Slider Images quick to load!

Web Performance Discuss Test Results
1

I’ve just setup two pages on my website as a test.

Page one has two progressive JPG’s placed separately on a page.

Page two has the same two progressive images, but placed within a slider which flips between the two images (Cyclone Slider 2 for Wordpress).

I ran the test to see how much slower it would be using the slider, but have found some interesting results:

Page one (two separate images)
http://www.webpagetest.org/result/140811_G4_11M2/

Page two (the same images in a slider)
http://www.webpagetest.org/result/140811_04_11M3/

Results:

  • The slider started rendering quicker.
  • Document Complete was a lot quicker with a slider.
  • The fully loaded time was slightly slower however with a slider.

On the repeat view though, the slider was actually quicker than the separate images for both document complete and fully loaded (but slower to start rendering).

This isn’t something I was really expecting and has convinced me to keep the slider I’m planning on my next website.

The only thing slightly puzzling about these results are that when using a slider, it seems the testing tool doesn’t recognise that they are progressive JPG’s and so marks down for that. My theory is that this is being caused by the slider possibly not displaying until the images are completely loaded.

If this is the case, I’m guessing it’s worth not using progressive JPG’s in the sliders as the progressive nature does add some file-size, for no benefit it seems?

2

Looks like the actual images are radically different between the two pages.

Non-progressive: http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fwww.threepennythieves.com%2Fwp-content%2Fuploads%2F2014%2F08%2FContrast-changed_1-960x600.jpg

Progressive: http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fwww.threepennythieves.com%2Fwp-content%2Fuploads%2F2014%2F08%2FContrast-changed_1.jpg

If you didn’t create the separate images then my guess is that the slider code resized and re-compressed the image for you to fit in the space.

3

I’ve just seen that I had a setting on the Slider Plugin to resize the image, which I’ve now turned off.

I’ve also got it set so as it’s loading a 1920x1080 image in a much shorter width. Although this will slow down the loading times in comparison to the resized version, it’s quite a simple way of allowing a much higher resolution image to be displayed on Retina screens.

Here’s the corrected results:

Separate Images:
http://www.webpagetest.org/result/140813_M4_ZXD/

Slider Images:
http://www.webpagetest.org/result/140813_XH_YB7/

It seems that as the slider was resizing the images originally, that was the reason they weren’t progressive JPG’s. When resizing is turned off, I get straight A’s across the board.

Interestingly, for the separate images, the first byte time is slower and ends up with a “C” grade.

Overall:
It looks to be a pretty minor difference between the slider and separate images, with the exception of the total loading time, which is a couple of seconds more with the slider.