Image resizing gives higher score for Google Page Speed but has a slower page load time

Question

I have a website which uses external images, the dimensions of which I do not have control. They are part of an API and as such I am not meant to store the images on another server. In one one of my pages, I have a series of thumbnails.

I am looking at ways to improve my site's performance within Google's rankings.

Currently the browser scales the image, but having run a GT Metrics report, I see that I could improve my speed by serving scaled images.

So, here are the two options I have. Unless there are more that I haven't considered.

1. Continue to scale the full size images down in the browser.
2. Create thumbnails of the external images dynamically, which will incur some processing time. I am using PHP which I know isn't the fastest method to process images.

I decided to do an experiment in order to help, but it has left me unsure of the best option.

I ran a test in which page A displays 3 images from Flikr, scaled down by the browser page B displays the same images dyamically scaled, using php.

Page A scored a very bad 0% for serving scaled image and 22% overall for Google page speed using GT Metrics, with a page load time of 0.6 seconds.

Page B scored 100% for serving scaled images and 92% overall for Google page speed using GT Metrics, but with a longer page load time of 1.6 seconds. A whole second longer.

If I scale images dynamically, I incur some load time to process the images, but Google sees my page as being of better quality. I have included a lazyload feature to prevent too much image processing at once.

My question is which is better. A faster page or Google's opinion of my page's speed?

Answer 1

GTmetrix scores are subjective and has nothing to do with Google.

0.6 is better than 1.6 but that is not the full picture.

I am more familiar with WebPageTest: http://www.webpagetest.org/

GTmetrix is giving the page load time. Once the page is loaded there is still more work for the Browser to render the page.

Once the page is loaded the Browser begins page layout and the pics must be still be retrieved.

For your situation the time to First paint or Start Render is where you should focus to improve page speed. While 0.6 is good, you can do better.

You want to look at the following times:

TTFB    
DOM Loaded  
First Paint 
Start Render    
Load Time   
Rendering   
Fully Loaded    
Visual Complete 

As far as improving the retrieving and rendering of the pics, I'd have to understand how you determine which pics to load.

In my opinion (no one really knows) Google is going to favor a low bounce rate. That is the way you are listed in the results and how many will mistakenly click on you and immediately hit the back button.

For page analytics and Google you should probably try to score well in Google Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/

If you post the waterfall image from GTmetrix or WebPageTest I can tell you more.