All posts tagged ‘chrome’

Mobile Browsers Help Users Avoid Bloated Webpages

Stop feeding your website donuts. Image: D. Sharon Pruitt/Flickr.

Websites are getting fatter, dramatically fatter, with the average page size of sites tracked by the HTTPArchive now nearly 1.3 MB. If the current rate of page size increase continues, that number will reach 2MB sometime early next year.

That’s bad for pretty much everyone, but doubly so for mobile users with constrained bandwidth.

Fortunately for mobile users, the network increasingly seems to see large page sizes as damage to route around.

Services like Instapaper, Pocket or Safari’s Reader have long offered an easy way to strip out extraneous content. Now mobile web browsers are increasingly taking it upon themselves to speed up the bloated web.

The recently unveiled WebKit-based Opera Mobile borrows Opera Mini’s proxy-based Turbo Mode, or “Off Road” mode as it’s known now. Once only deemed necessary for feature phones (Opera Mini’s primary market) proxy-based browsing will soon be available in all Opera browsers.

Google’s Chrome for Android browser is getting ready to follow suit.

The beta channel release of Chrome for Android recently introduced an experimental data compression feature which Google says will “yield substantial bandwidth savings.” Chrome’s compression is nowhere near the level of Opera’s, but it does roughly the same thing — puts a proxy server between the user and the bloated site in question and then applies various speed improvements like using the SPDY protocol and compressing images with WebP.

To turn on the compression head to chrome:flags and look for the “enable experimental data compression” option.

Here’s Google’s description of the various optimizations:

For an average web page, over 60% of the transferred bytes are images. The proxy optimizes and transcodes all images to the WebP format, which requires fewer bytes than other popular formats, such as JPEG and PNG. The proxy also performs intelligent compression and minification of HTML, JavaScript and CSS resources, which removes unnecessary whitespace, comments, and other metadata which are not essential to render the page. These optimizations, combined with mandatory gzip compression for all resources, can result in substantial bandwidth savings.

In other words, Google and Opera are doing what web developers ought to be doing but aren’t. Just like developers should have been making reader-friendly pages, but weren’t, so “reader” modes were born.

It works too. In the video embedded below Google’s Pete Le Page shows how Chrome’s new proxy options take a page from The Verge and reduce it from a husky 1.9MB to a still fat, but somewhat better 1.2MB.

Want to make sure the internet doesn’t see your site as damage it needs to route around? Check out developer Brad Frost’s article Prioritizing Performance in Responsive Design, which has a ton of great advice and links, including what I think is the most important thing developers can do: Treat Performance As Design. In other words, if your site isn’t svelte and fast, it’s not well designed no matter how pretty it might look.

[Note: It is not ironic to post about web page bloat on a page that is, arguably, pretty bloated.]

File Under: Browsers

Google Chrome Speeds Up the Small Screen

Webmonkey.com in the latest Chrome for Android Image: Screenshot/Webmonkey.

Google has released a major update to its Chrome for Android web browser.

The latest version of Chrome for Android — available in the Google Play Store — features an updated version of Google’s V8 JavaScript engine, which has finally been optimized for mobile devices. That means Chrome for Android should now be faster than the old, stock Android web browser.

According to Google, the latest version of Chrome for Android improves on Google’s Octane benchmark tests by 25 percent on average. While benchmarks aren’t always the best indicators of real-world performance gains, the speed boost should mean that JavaScript-heavy pages like Gmail or Facebook load a bit faster.

Our friends over at Ars Technica put the latest version of Chrome for Android through the paces using not just Google’s own Octane test, but the Sunspider and Kraken benchmarks as well. The results don’t always feature quite the speed improvement that Google claims, but this is without a doubt the fastest version of Chrome for Android yet.

The performance improvements aren’t just in JavaScript either. Scrolling webpages is much smoother and, most noticeable in my testing, pinch-to-zoom is much more responsive with none of the stuttering and lag that marred previous releases.

Other nice improvements include the ability to keep web audio playing even if you switch to another app (handy for music streaming sites), and support for coming web standards like CSS Filters.

Google has also released an update for Chrome on iOS, though the changes on the iOS side are largely cosmetic. Apple’s App Store policies prevent Google from including the V8 engine in Chrome, so iOS users won’t see any speed improvements. There are however a few design tweaks, like a unified search/URL bar and a quick way to see the entire history of a tab by holding down the back button.

File Under: Browsers

Google Brings 3-D Animations to Mobile With New Chrome for Android

Google’s Ro.me experiment running in Chrome for Android. Image: Screenshot/Webmonkey

Google Chrome for Android is beefing up its animation powers. For now the new WebGL support is limited to developers willing to install the beta channel and delve into Chrome’s settings, but expect support for sophisticated WebGL animations to land in the final version of Chrome for Android soon.

If you’ve already installed the beta channel of Chrome for Android you’ll be automatically updated to the latest release. If you’d like to try it out, head over to the Google Play Store (unfortunately, searching the Play Store for “Chrome Beta” doesn’t work). It’s worth noting that Chrome and Chrome Beta install as two different apps.

WebGL is a JavaScript API for adding hardware-accelerated 2-D and 3-D rendering to the HTML5 Canvas tag. It’s the cornerstone of many sophisticated animations on the web — think cutting-edge games or interactive videos like Google’s earlier Ro.me experiment.

The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL can run on many different devices — your laptop, your phone, even your TV. That said, older Android phones will likely be a disappointment when it comes to rendering complex WebGL animations.

The latest Chrome for Android Beta gives users access to chrome://flags, a hidden menu page that allows interested developers to run experimental features. Head to that address and scroll down to find the option to turn on WebGL.

Other handy developer tools in chrome://flags include an FPS counter, which shows a page’s frame rate, CSS Shader support and the same experimental WebKit features option you’ll find in the desktop release of Chrome.

File Under: Browsers

Hello, Chrome. Do You Read Me, Chrome?

It’s not perfect, but Google’s voice transcription demo is impressively fast. Image: Screenshot/Webmonkey.

Forget touchscreens; the input device of the future is your voice. So far there’s no need to worry about HAL 9000-like web browsers taking over your laptop, but Google is hoping to bring speech recognition to the web.

The latest beta version of Google’s Chrome web browser has added preliminary support for voice commands, improving on the tools that shipped back in Chrome 11. That means you’ll soon be able to browse the web, dictate e-mails or, in Google’s strange vision of the future, “have a freestyle rap battle,” all without touching a mouse, trackpad or screen.

In fact you can try dictating an e-mail today, just make sure you’ve got the latest beta channel release of Chrome installed and head over to the e-mail demo page. The demo will also work with the new beta channel for Android release, which means that, between this and Android’s Voice Actions, Android users will soon be able to do just about everything by voice command.

Of course, as with any speech-to-text transcription, mistakes happen and eventually you may end sounding like you said “all your base are belong to us.” In the screenshot you can see that Chrome twice gets the word “entity” wrong, but even with some mistakes the real-time transcription is impressive.

The backbone of the demo is Google’s Web Speech API, a JavaScript API that allows web developers to easily integrate speech recognition into their web apps. In the case of Chrome that means you send the voice input over to Google’s servers and get back the transcribed text which you can then use in your app. See the HTML5Rocks blog for more detail on how to create a simple textfield demo. You can see the code behind Google’s demo over on GitHub.

Right now the Web Speech API is just a webkit feature, though a W3C Community Group has worked on a standards proposal. From a W3C Community Group the proposal could move to a Working Group that would then start working on an actual specification — all of which may or may not actually happen — but at the moment it’s a non-standard, though impressive feature.

File Under: Browsers, Mobile

Preview Coming for Chrome for Android With New Beta Channel

Chrome for Android beta channel. Image: Scott Gilbertson

Want to be the first on your block to get new features for Chrome for Android? Google has a new beta channel release available just for you.

Starting today, you can install a beta channel release of Chrome for Android on any device running Android 4.0 or better. Note that it appears that you need to follow that link to get the beta channel release. Searching in the Google Play Store did not show the beta channel. The beta channel can be installed alongside the normal release channel.

The current release for the beta channel is Chrome 25, which is a significant update for the mobile version of Chrome, adding support for the new CSS Flexible Box Model syntax, dynamic viewport units (useful for responsive designs) and CSS calc(). The Android version of Chrome also gets the same updated IndexDB and CSS Filters support we looked at in the desktop release.

The beta channel release should also be a bit faster. The Chromium blog claims that improvements to the V8 JavaScript engine give the browser a 25 to 30 percent improvement on Google’s Octane benchmark tests.

The beta channel for Android offers some new tricks in Chrome’s developer tools, notably “big improvements in measuring your mobile performance with the Timeline’s frames mode.” Google also says it’s easier to navigate and edit your active scripts in the revamped Sources panel.

For more details on everything that’s new in the beta channel of Chrome for Android be sure to read through the Chromium blog’s announcement.