15
Jul
image

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.

image

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?

  1. WebP (52 KB) vs PNG (827 KB) = WebP is about 16x smaller (wow)
  2. WebP (11 KB) vs PNG (62 KB) = WebP is about 6x smaller
  3. WebP (42 KB) vs PNG (345 KB) = WebP is about 8x smaller
  4. 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.

Hint: Remove -rw from WebP image urls to view the same images as PNG. For example: WebP -> PNG.

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 of CanIUse:

image

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.

7-15-2013 5-19-27 PM

7-15-2013 5-21-04 PM

7-15-2013 5-21-15 PM

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.

Artem Russakovskii
Artem is a die-hard Android fan, passionate tech blogger, obsessive-compulsive editor, bug hunting programmer, and the founder of Android Police.
Most of the time, you will find Artem either hacking away at code or thinking of the next 15 blog posts.

  • cy_n_ic

    So...i can F5 even faster and more often! Win!

    • http://www.androidpolice.com/ Artem Russakovskii

      Not really - F5ing offers marginal speedups compared to going back and forth between two apps, for example - as long as you're really quick.

      • cy_n_ic

        As long as i can refresh and get my nexi before everyone else im good :)

        • Cerberus_tm

          Right!

          (You do know the plural of nexus is nexus right? It's the 4th declension.)

          • http://www.androidpolice.com/ Artem Russakovskii

            We've argued this to no end and arrived at "nexuses" here on AP. It's an endless discussion really.

          • CuriousCursor

            According to the dictionaries, ot can be either nexus or nexuses but not nexii.

          • cy_n_ic

            Wow lol. Its whatever the hell i want to call it. I got my point across and everyone understood me. Damn grammar nazis. A rose by any other name...

          • CuriousCursor

            Yeah, you try referring to a rose by some other name. Nobody will understand what you're saying.

          • Cerberus_tm

            Yeah, either nexus or nexuses, but not nexi as above.

            (I personally use Nexus as plural, because it is a fun and appropriate place to flaunt correct Latin plurals. It's not pretentious if it's fun, right? The contrast between the old language and the latest smartphone makes it funny.)

  • Freak4Dell

    It's definitely much faster on Chrome than Firefox. I think I'll survive without super fast loading of the Play Store, though.

    • http://www.androidpolice.com/ Artem Russakovskii

      Why not use Chrome vs Firefox at this point?

      • Freak4Dell

        UI. As in, I hate Chrome's.

        • Stranger from a Far Coast

          Dude, i'm a firefox fanboy since 1.5 and just converted to chrome last month, chrome is noticeably faster in terms of scrolling and deals faster in heavily scripted sites. What u find in firefox extensions, there is a replacement extension for that whether inside chrome web store or outside of it.(.crx) My only jibe is flashgot. I have to use stupid IDM's integration as opposed to firefox's auto prompt download selection.

          • Freak4Dell

            I use Chrome side by side with FF at times. It's slightly faster sometimes, but nowhere near enough to make me want to use that UI. I like my menu bar, thank you very much. For all the extensions that Chrome has, it boggles my mind that there's no way to customize the UI. I can make FF look like Chrome, but have yet to find a way to do the opposite.

          • wampdog29

            You can customize the UI.....

          • Freak4Dell

            How? I've seriously Googled it many times.

          • Justin W

            I asked someone else of this, why would you need to customize the UI of Chrome? All you need is right there.... Alternatively, there are hot-keys for pretty much everything.

          • randomchars

            " All you need is right there...."

            No. All YOU need might be right there, but don't make assumptions about billions of other people.

          • Freak4Dell

            Why does anyone need to customize the UI of anything? Why don't we all just use iOS. Everything we need is right there. Oh...wait. People customize stuff because they like it a different way than other people. I already said above that I like having my menu bar there like I've had on every single desktop program since Windows 3.1. This is the one area where I'm envious of Mac users. Since their menu bar is built into the OS, they don't lose it when companies make stupid UIs.

          • randomchars

            Chrome's UI?

  • MagicMiguel

    It's a slow turd for me on the latest version of Chrome. Takes forever to load my apps list. And what happened to showing which apps are installed on each of my devices?

    • Josh C

      my apps page is horribly slow for me too, cuz they load all the apps on one page instead of having pages. and sorting is gone. The rest of the site though is amazingly fast.

    • http://www.androidpolice.com/ Artem Russakovskii

      My Apps is completely different and unrelated to the speedups I'm talking about.

  • unhappybirthday

    Getting lots of missing graphics in Dolphin...

    • Ray

      Possibly the result of Dolphin not being able to render the webp images perhaps?

      • randomchars

        It falls back to png, if webp is not supported.

  • Mobile Phones Fan

    All very interesting, but so far the revamped Play Store is not 'insanely fast' on any of my devices...nowhere near it.

    And it's the same on pretty much every browser and OS, including Chrome. I suppose it could be a little zipper in a few, random places -- hard to be clinical, given the dramatically changed layout & graphics -- but it sure doesn't feel that way in the overall experience.

    • http://www.androidpolice.com/ Artem Russakovskii

      Try desktop Chrome.

      • Thomas’

        While it loads really quickly, the scrolling is a pain. Choppy and annoying. It shouldn't be on a MBP which isn't the slowest notebook on earth...

      • Oletros

        My Apps section is considerably slower than the old design

  • LTame

    Wait... I can see Chrome with good Roboto font rendering on your screenshots. HOW'S THATS POSSIBLE? :|

    • http://www.androidpolice.com/ Artem Russakovskii

      I'm using Chrome stable v28 on Win7x64. Looks good to me at 1920x1080.

    • Ray

      Normal for me as well - at work and home. Not sure why it's not working for you.

    • PhineasJW

      I bet you have installed the Roboto font in Windows.

      Uninstall it, and it'll look fine in Chrome. It's a bug.

    • Peter

      I also have rendering issues on my Win 7 with Chrome 28. Google Plus is almost unreadable. I think it has something to do with the monitor resolution.

      See here:
      http://i.imgur.com/4AHmK7L.png

      • http://www.androidpolice.com/ Artem Russakovskii

        Yikes.

      • DCSH

        Yep, same here with G+ and Play Store... haven't found a solution to that up to now... really ugly.

  • BBXiong

    but if you look closely on the webp compared to png given example on this post, you notice some very fine details are lost on png. I suppose it is not noticeable if you are not comparing side by side, and the significant smaller size makes this very forgiveable :)

    • victorvics

      there are 2 type of webp. lossless(no detail is lost) vs lossy(few detail is lost but saves more size). google is using lossy so that people save more bandwidth. its not like people need details of the image for these.

      • BBXiong

        yeap, just pointing the quality loss out, I did mention the loss is minimum and you really need to compare them side by side to see the difference, so it's a welcomed change

        • http://www.androidpolice.com/ Artem Russakovskii

          I'm pretty sure I said this very same thing in the post.

    • http://www.androidpolice.com/ Artem Russakovskii

      Wait, are you saying the PNG is less detailed? PNG being the lossless version here.

      • BBXiong

        oops, my bad, it's a typo, what i really meant is quality loss on webp, I guess the combination of lacking of sleep and too much programming is no good for brains

  • Furyswrath

    Sadly you still cannot sort though your Orders and list out Apps you have paid money for. You gotta hunt them down. I dunno about anyone else But ive bought so many apps i lost track many years ago of what Ive gotten.. Sure would like to be able to see all that with out using 3rd party chrome addons.

    • victorvics

      oh my god!!! please stop. this thread is not about missing feature but about the site speed. people just complain

      • ssj4Gogeta

        I'm not sure how much you can discuss as a consumer on a website starting to use AJAX.

      • Fellwalker

        What point speed if all the useful functionality is gone?

    • http://www.about.me/FHL09 Troy

      What 3rd party add-on are we talking about here, I would love to see all the apps I've purchased like you I've brought alot and lost track.

      • Furyswrath

        Well it dont work anymore with the site design. It was a Grease Monkey script I used that gathered it all.

        • David Zamora

          There is an app for that guys: My purchases

          • Furyswrath

            Right that still seems to work.. But I like seeing it on the web version too.

    • Justin W

      There's an app available to see purchases you've made through the play store - it's called My Purchases and you can find it at the link below. It's a useful app, but it's functionality needs to be included in the Play Store.
      (https://play.google.com/store/apps/details?id=de.lowpingerz.mypurchases&hl=en).

      • http://www.about.me/FHL09 Troy

        Thank you Justin.

        I knew of that but when I used it I swear it was missing purchases I've made so I went off it but I'll give it another spin and see if it turns up better this time.

        Not only that but I recall it being slow to load so I hope that too is improved.

        I still feel you shouldn't have to have an app to do something another app did but doesn't do anymore.

  • Bluesfear

    you can't update apps thru the play store website anymore?

    • Justin W

      Not atm :(

      Actually, I didn't even know you could before this update. I've installed apps, but never remotely uninstalled apps or updated them from the desktop. Hopefully they bring them back though.

  • Alex

    Just a couple things:

    That was the old request ticket for WebP in Firefox-- the new one (with rejuvenated support) is here: https://bugzilla.mozilla.org/show_bug.cgi?id=856375

    Also, not too important, but "AJAXed everywhere" is another way to say SPA. Single-paged applications (SPAs) are what you're talking about here, and with awesome implementations like AngularJS, Ember.js, (and to lesser extents, Knockout.js, etc) this is the way things are going. It is indeed awesome, and I'm having a lot of fun currently converting huge corporate applications to SPAs.

    Cheers.

    • http://www.androidpolice.com/ Artem Russakovskii

      Thanks, I've updated the bug link to the "take 2" one and added a note about the SPA term.

    • http://sushubh.net/ chromaniac

      Also from what I have read Mozilla has no intentions of adding WebP support in the near future. They seem to have some issues with the file format.

  • CuriousCursor

    Google should understand this, tablet layout DOES NOT work on desktop displays. The UI space changes in this update are terrible

    • Cerberus_tm

      Is Google becoming like Microsoft? I absolutely hate the huge tiles in several columns: I just want a long list, much easier to browse.

  • Cerberus_tm

    After the first hour or so, it is now smarter indeed. But it's still horribly dysfunctional. Look at this, for example. I can't even read the titles. Google, are you becoming Microsoft's evil Metro twin?

    • Justin W

      It truncated them in the old version, similarly to this on the main page. On the actual app page, it scrolled them.

    • http://www.androidpolice.com/ Artem Russakovskii

      Yeah, this is a pretty serious weakness of the card layout. I'd really rather have an option to turn it into a list, similar to how Windows folder views work, for example.

      • kh5

        They should use landscape format cards here, like in the Play Store on phones. There you have a smaller icon on the left and the text has enough room on the right. The fact that sometimes text has too little room is in fact the biggest gripe I have with the card layout sometimes.

        • Cerberus_tm

          Why cards at all? What's good about cards at all? The edges and spaces look like useless clutter to me, excuses le mot.

      • Cerberus_tm

        Exactly. Choice, Google, give us choice! Choice can overcome many potential weaknesses in a system. That's why we like Android.

    • Adrian

      If you hover over it now it does actually pop up a tool tip with the full app name.

      • Cerberus_tm

        Yeah I noticed that, but it's still cumbersome.

  • Seth Daniel

    "while the 2nd one is ready to show the content after less than 200ms, with all images done loading in less than a minute"

    I think you mean "in less than a second" here. At least I hope the page didn't take a minute to download the images.

  • Android Telegraph

    Wow, I hope WebP becomes a standard everyone uses if possible. There's so many times I go "why the hell can't this or that blog use JPEG instead of PNG so the page loads fast," then it hits me that JPEG also reduces quality a bit.

    • Mike Harris

      JPEG doesn't allow for transparency, while PNG does.

      • Devon Warren

        Also in flat images that only have a small selection of colors PNG images can be smaller

  • Glen

    The store has been offline 404 for the past several hrs here in Australia!!

  • kevlar

    oh no, more javascripts. :(
    hell lot slower now to access Play Store on my country >.<

    I prefer previous play store, I can still see some user comments even with simple html browser. and it's faster to load.
    not anymore now.

    • randomchars

      What does JS have to do with your country?

  • jurrabi

    I guess they still have to fix some glitches since play store greets me with this portuguese message :
    Fizemos algumas alterações...O Google Play tem um novo design que torna mais fácil navegar e descobrir novos favoritos. Aproveite!

  • jurrabi

    Me not liky all this changes. The page looks like a tablet, what I guess looks great in a tablet, but it looks dumb in my PC. In PC I like condensed screens where I get as many info in one look as possible and I can click with the mouse very precisely. But this big dumb interfaces for touch devices are taking over everything and I'm starting to get annoyed.

    And I miss the missing bits...

  • re

    Firefox!!!

  • Nabeel Farooqui

    That is definitely fast.

  • kamiller42

    Dear Google Police, interesting comment from Firefox bug report thread.

    "FWIW, that article seems to suggest that they are serving lossy webp vs lossless png which makes any comparison largely meaningless."
    https://bugzilla.mozilla.org/show_bug.cgi?id=856375#c89

    Avoid commenting in the bug report. Should be reserved for development talk.

    • Randell Jesup

      I was going to reply at more length, but @*$&% Disqus wiped my comment when I logged in.

      The difference between JPEG and WebP is what should be measured, not PNG vs WebP. JPEG would have worked in every browser (and if WebP does produce an advantage, though likely minimal or only relevant to the website owner), why not have the fallback be JPEG instead of PNG?

      This basically totally invalidates 1 of the 2 points of this breathless "OMG they're so incredible I'm going to faint" article. :-)

  • Alex

    After reading this article, all I understood is that the web version of the Play Store in faster because they've changed some things.
    Anyway I love you guys!

  • Mats Svensson

    ...and then they add slow jerky faaaaades for everything, making the site feel sirupy slow.

    And of course the obligatory useless Google lowlow-contrast design, just to make your eyes bleed.

    And of course HIDE all those insane permission-requests away, to make Trojan-makers happy.

    JFC!

  • Fellwalker

    in Firefox on my nexus 7 it is far slower, freezing several times. and what is that pane on the left that won't go away? it does show a left arrow which suggests it should close , but it doesn't. if I pinch to zoom that plane shrinks to a panel but zooms independently and sits over the rest of the page!

    loading the page took 10 seconds to be scrollable, and 30 before the images of the purchased app actions were available (open / uninstall).

    play store app is thank goodness the older design which used to be far less feature rich but seems now more so and much much faster.

    • Fellwalker

      horrible in chrome too with same zoom problem. I thought we went away years ago from separate panes in Web page because they were naff?

  • Fizer

    Nice article. Thanks for sharing.

    Do you have any idea about serving png files instead webp format for the browser who does not support? I think the images are linked to static files, how do they handle in server side?

  • jastonas

    To me, the speed is like Android 2.1. Sluggish. Laggy.

  • enzo tagawasak

    asdfasdfasdfas