Interpreting Google's Speed Index score

Web Performance Discuss Test Results
1

Hi there,

Thanks for looking.

I’m testing a new WP Genesis theme.

Early results are encouraging. Most metric scores seem to be excellent (when test close to server location), but Speed Index by comparison seems a little high. I was expecting circa 2000. Any ideas why site speed isn’t lower?

http://www.webpagetest.org/result/150806_JS_S9V/

I’m not a developer, so forgive the ignorance…
but the theme seems to briefly show a pre-loader when loading pages e.g. http://www.vintageheirloom.biz/product/vintage-chanel-beige-10-classic-flap-bag/.

Does this indicate javascript being used. Am I better to find a theme that doesn’t do this or is this technique fine in terms of performance?

Thanks for looking.
Kevin

2

3047 feels about right if you look at the filmstrip: http://www.webpagetest.org/video/compare.php?tests=150806_JS_S9V-r:1-c:0

The page content fades in starting around 3 seconds and completes around 3.3 seconds.

There’s LOTS of room for optimization with that template even if you didn’t change the behavior. In particular, combining the different CSS and JS files into a much smaller number (same code, just merged together) would save 1/2-3/4 of a second. Beyond that takes actual coding to change how the images for the gallery load (they are all loading at the same time even though only one is visible).

3

Thank you for sharing your knowledge & insight.

Great to know there is plenty of room for optimization.

Thanks
Kevin

4

I see that you’ve already got W3TC installed. This provides the options to combine CSS/JS that Patrick suggests. IIRC it also allows setting of expiry headers in the browser cache section, although you probably don’t want to do that until you go live! ( although I prefer getting the web server to do that directly ).

The BJ Lazy Load plugin does a pretty good of of delaying the display of images ‘below the fold’.

5

Hi GreenGecko,

Thanks for the heads up! I’ll see if I can get the theme developer to combine CSS/JS.

I’ve a feeling my host Synthesis disables any minification at server level so I think I won’t be able to use the W3TC to combine. I’ll need to confirm though.

Thanks. I’m pretty sure my host handles expiry headers, my live site has this working.

Now the BJ lazy load sounds like a good idea, but the theme I’m testing at www.vintageheirloom.biz. It looks like it waits and loads all the information in one go (I see 3 flashing dots). Would BJ lazy load help?

Thanks!

6

Hi Patrick & GreenGecko,

I’ve found my live site sometimes gets a lower Google Speed Index score than my dev site despite having far worse score metrics. This doesn’t make sense to me. Just to confirm I’m interpreting a lower Speed Index score as better.

My live site got a Speed Index score of 3130 with the following metrics:

http://www.webpagetest.org/result/150810_N0_FW1/1/details/

Load time: 4.657s
First byte: 1.089s
Start render: 3.048s
Visually complete: 7.300s
DOM Elements: 623

My dev site got a Speed Index score of 3942 with the following metrics:

http://www.webpagetest.org/result/150810_R8_FPD/1/details/

Load time: 2.754s
First byte: 0.199s
Start render: 1.490s
Visually complete: 4.400s
DOM Elements: 199

Any ideas why my dev site’s speed index is higher?

Thanks!
Kevin

7

You’re delivering wildly different experiences between you dev and production sites and the production site is closer to it’s final visual state sooner than your dev site is.

FWIW, start render on your page looks like it’s just the background color so it’s not really that useful of a metric.

Here the two tests are side by side in a filmstrip which will hopefully demonstrate better: http://www.webpagetest.org/video/compare.php?tests=150810_N0_FW1-r%3A1-c%3A0-l%3AProduction%2C150810_R8_FPD-r%3A1-c%3A0-l%3ADev&thumbSize=200&ival=100&end=visual

It looks like the massive background image is loaded way at the end which is causing the slower speed index. It could be significantly faster just by recompressing the image at a better quality setting: http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fwww.vintageheirloom.biz%2Fwp-content%2Fuploads%2F2015%2F08%2Fkime_09W.jpg though for the full visual experience to be significantly improved you’d also want to figure out how to trigger the browser to start fetching it sooner.

8

Hi Patrick,

Thanks so much for your help. I’ll pass on this thread for the theme developers. I agree the homepage doesn’t seem to load progressively, which sounds like it would help improve things (I’m hoping start render at least).

The original 1st homepage image was circa 395kb (put in into PShop 50% quality), now 82kb. Looks fine. Helped a little: http://www.webpagetest.org/result/150810_G9_XQC/1/details/

My dev site is on a crappy cheapest HostGator server, so I’m sure when I get it onto my live site which is fine tuned for the Genesis themes it will help.

Can you tell me what progressive jpegs are. I get 32/100 In Photoshop is this just ticking Progressive in Photoshop?

Thanks!
Kevin

9

Yes, that’s just ticking the progressive box in photoshop and results in images that start blurry and progressively get sharper instead of loading all at once from top to bottom. There’s some debate about which experience is better which is why it’s not called out as one of the top-level grades.