Google just updated the web Play Store with a completely new UI that was teased back at I/O 2013, and it immediately caused a whirlwind of mixed reactions. We have a separate post coming up on all the differences as well as the features that didn't make it into the redesign (there are, unfortunately, a lot - even more than went missing in Maps v7), but right now I want to commend Google and address one aspect that immediately stood out to me within the first few seconds - speed.
There are two massive improvements at play here simultaneously for users of supported browsers, though, unfortunately, one of them does not apply unless you use Chrome, Opera, or Maxthon. Let me explain.
Note: Some users may be noticing slow page loads most likely caused by server load that resulted from a massive refresh that went out for everyone at once (surprisingly, it doesn't look like Google used staged rollouts - thanks for that!). There are also some bugs, like the Play Store loading itself in itself when clicking the Play button at the top. These are bugs that Google will undoubtedly fix.
Note #2: My Apps is very slow right now, especially for those of us with many apps, because it doesn't use pagination and loads all apps ever on one page. This is unrelated to the speedups of other pages I'm talking about, and I hope Google will fix it soon.
1. WebP is in, PNG is out for 5-15x+ image loading speedup
The first reason we're seeing a huge speed improvement is the move away from the lossless PNG image format to WebP, a relatively new standard developed by Google. There are upsides and downsides, but the upsides massively outweigh the downsides.
Let's take a look at some differences using four random samples of Play Store images, shall we?
- WebP (52 KB) vs PNG (827 KB) = WebP is about 16x smaller (wow)
- WebP (11 KB) vs PNG (62 KB) = WebP is about 6x smaller
- WebP (42 KB) vs PNG (345 KB) = WebP is about 8x smaller
- WebP (132 KB) vs PNG (1,281 KB) = WebP is about 10x smaller
Pretty impressive, isn't it?
Upsides
1. WebP images occupy a fraction of the comparable PNG ones - the savings are as crazy as 90% or more in some of my tests. I'm talking a 1.3MB image now being 132KB. Yup, that's going to save a lot of bandwidth and load way faster.
2. Because Google went with the lossy WebP variant rather than lossless, we should compare it to JPEG, which was their other alternative. WebP offers better compression and therefore doesn't degrade as much as JPEG at the same file size. While there is a very mild difference in sharpness and detail between PNG and WebP variants of the same images, it's not something most of you will ever notice, especially since you don't get to see both formats side-by-side.
Downsides
1. WebP images are not supported by every browser - in fact, if you're not using Chrome, Opera, or Maxthon, your browser does not currently support WebP. Here's a quick chart, courtesy ofCanIUse:
The good news is the Play Stores falls back to PNGs and doesn't break on IE, Firefox, etc. But that means you're not getting the benefits of image compression. There is a bug report for Firefox to add WebP support, but who knows when they'll get around to it...
2. As I mentioned before, WebP comes in both lossy and lossless variants, and Google went with the lossy one for more savings. This means that you may notice some image quality degradation, but in my experience, it's so small, most of you will be just fine.
2. AJAX everywhere
An even more significant improvement to browsing the web Play Store comes from the Play Store team AJAXifying the whole site.
Update: The more precise term for this is, apparently, SPA - a single-page application - thanks, Alex.
What does it mean in layman's terms? Before the refresh, every page of the Play Store was independent of each other, so when you went from app A to app B to artist C to device D, the browser made 4 full requests for each page as well as everything on them, including scripts, images, styles, etc. The good news was that if browser caching was set up correctly by the server, the browser was actually smart enough to realize most of the stuff was already cached and serve it from cache, but that doesn't always work, doesn't work on everything, and is slower than using AJAX. While definitely faster than loading each page and clearing cache, the old design was still not ideal.
Now, everything is AJAXed. If you're familiar with Google+, you probably know what browsing a heavily AJAXed site does to UX (user experience). The initial page hit (of any Play Store page really) shows the content and loads all the scripts and styles into memory. Then when you click on something, the page doesn't reload in the traditional sense - only the missing bits are sucked in on the fly. This is really really fast as there's almost no overhead and minimal redrawing of only the needed areas by the client-side JavaScript. There are probably some performance improvements to the initial page as well, but they're likely marginal.
So what does this mean to you, the user? In my tests (on an admittedly fast connection), I saw subsequent pages load up in a fraction of a second. According to the browser tools, it's something like 100-200ms, followed by the images, which are much improved thanks to what I described in part 1. Together, these new techniques make for huge perceived speedups.
Here's an example initial page load, followed by a subsequent switch to another app. The first page loads in 4-6 seconds, while the 2nd one is ready to show the content after less than 200ms, with all images done loading in less than a minute.
In conclusion, the Google team responsible for the Play Store has done an outstanding job when it comes to making everything zoom thanks to switching to WebP for images in supported browsers and AJAXifying all the things. Here's hoping they will do an even better job bringing back a whole host of removed features, a summary of which Ryan will post in a just a few.
No comments:
Post a Comment