Images Above the Fold - Prioritize Visible Content

[Willie Louthen-Brown]

To whom it may concern -

 

Recently, our team noticed a change in the Prioritize Visible Content rule within Page Speed Insights.  Over the past several months, we had spent significant time optimizing our sites, and we were able to achieve perfect scores (100 Mobile Speed / 100 Mobile User Experience / 100 Desktop Suggestions Summary) for many of our sites.

 

With the new algorithm in place for Prioritize Visible Content, our scores dropped significantly.  As we researched this issue, and created several test cases, we found that any image placed above the fold on our sites would violate the PVC rule.  To illustrate, I have created a series of simple test cases, and tested each of them within Insights.

 

http://acornserverone.com/speed-examples/perfect-test.htm (Test Case #1)

This page has most of the basic features of a "real" Web site, although they are simplified.  The site design is also fully responsive as recommended by Google.  There is CSS, jQuery, and text, but this page has no images.  The Insights scores for this site are perfect 100/100/100.

 

http://acornserverone.com/speed-examples/image-top-test.htm (Test Case #2)

This page is an exact copy of the original page - with the addition of one small image (300px by 200px - 22.8KB) near the top of the page.  With the addition of this image - the Insights scores drop to 100/100/89.

On the Desktop Suggestions Summary - I have violated two rules.  Both Eliminate render-blocking JavaScript and CSS in above-the-fold content and Prioritize visible content are reducing the scores, although none of the CSS or jQuery features or placement has been changed.

 

http://acornserverone.com/speed-examples/image-bottom-test.htm (Test Case #3)

This page is also an exact copy of the original page, with the same image as Test Case #2, but this time the image has been added near the bottom of the page.  The Insights scores for this page have returned to 100/100/100.

 

https://www.google.com (Test Case #4)

This is the front page of your own search engine.  The Insights scores for this page are 91/100/97.  The first rule broken for both Mobile Speed and Desktop Suggestions Summary is Prioritize Visible Content.

 

Based on these test cases, it seems that the Insights tool is telling us that no Web site should have any image above the fold.  As Web developers, we work very hard to comply with all of the best practices recommended by Google.  We have spent many hours researching these best practices and implementing them within our sites.  However, this recommendation seems to be unreasonable, asking us to build sites that do not have images in the initial viewing window.

 

Please help us to understand your reasoning behind this recommendation.  Additionally, are you planning to remove the Google logo from https://www.google.com to comply with this recommendation?

 

Our team is happy to collaborate with your developers to help balance the need for fast Web pages with real world design and development needs.  If there is anything we can do to help you improve the functionality of the Insights test, please let me know.

 

Thank You,

Willie Louthen Brown

Senior Developer

Acorn Internet Services, Inc.

[Carlos Lizaga Anadon]

Did you try to inline images in base64? 

Best regards. 

[Miguel García Sánchez - Colomer]

Hi,

this is the best answer about prioritize visible content rule: https://groups.google.com/d/msg/pagespeed-insights-discuss/mRCQQvTn9rE/moufdaoUFwcJ: 

"The easiest way to think about this rule is this: Find all of the HTML elements (<div>, <img>, <form>, <input>, <span>, <table>, <iframe> etc) that are visible above the fold when your page is fully loaded. Make sure that your inlined CSS specifies the necessary information to figure out the size of those elements. This might include widths, heights, font sizes, font weights, floats, displays, etc. This includes content as well - if you have a <p> tag that starts empty and then gets filled in via AJAX, that causes a problem because it will cause the size of the <p> tag to change."

Try to use your image or in Base64 like Carlos said or with an inlined CSS that specifies the necessary information to size the element (all the elements).

In your CSS the "image" portion it's using height: auto;  Try to specify an exact size.

body { background: #333; font-family: Papyrus, fantasy; font-size: 1.5em; line-height: 180%; color: #000; } div { margin: 20px auto; padding: 20px; width: 80%; background: #FFF; } p { margin: 0 0 1.625em; } img { max-width: 90%; height: auto; }

I have to make changes in my web too to get a better results with PVC. I'm analyzing what things in my website don't use fixed values and "delegate" the size calculation in the browser.

Best regards,

Miguel.

[Willie Louthen-Brown]

Carlos and Miguel -

Thank you for your responses.  I have tried the Base64 method - http://acornserverone.com/speed-examples/image-base64-test.htm - and it produces the same scores within Insights (100/100/89).

I did also create a test where the image size is defined - http://acornserverone.com/speed-examples/image-defined-test.htm - and this does resolve the page speed issue - score is back to 100/100/100.  However, this method is very limiting in regards to responsive design.  When using a percentage width and a height of auto - the image can size itself appropriately to any device.  If I am defining a specific width and height - the image can only size itself to the specific sizes that I have defined using media queries.  Due to the number of devices sizes on the Web - it is impossible to use media queries to create an image size for every device.

Google recommends fully responsive designs - and the best way I have found to create fluid responsive images is with a percentage width and height of auto.

Do you have other recommendations to merge the need for fluid responsive images with defined image sizes?

Thanks

[Miguel García Sánchez - Colomer]

Yes, Dave said it.

i'm analyzing how can i get the "sizes" without using auto and "browser-calculations" for my responsive design too. I think that the only way it's to use media queries without auto or another "browser-side-calculations", but it's very difficult. I'll think on it and try to look for a fix, so if you have another idea please share it! ;)

Maybe Carlos knows another way.

Best regards,

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/069f3328-c1c4-4f57-8c76-3bd906c4eb98%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Carlos Lizaga Anadon]

In fact, it's possible, http://framework.zend.com/manual/1.11/en/zend.http.user-agent-device.html here's an example with zend, but there should be open source projects to interact with user-agent and get device size on the http: / https: request. Some days ago I found one that would render images for that specific size in cache but seems that I have a terrible memory. 

Maybe you can research a little on this as it might be a nice trick.

Best Regards! 

[Willie Louthen-Brown]

Carlos -

Thank you so much for providing the resource below.

I do not understand why Google would want us to use such a complicated procedure - when simply setting a percentage width for the image produces the visual display that is needed.

I have noticed that you provide many responses on this forum.  Are you a member of the Page Speed Insights development team?

Thanks

[Carlos Lizaga Anadon]

I'm not, sorry. I'm just a student of computer science.

Best regards.

[Brian LePore]

What where you're base64-ing your images. If the images are > 2 KB then you're liking to make the user download more content than if they were downloading the original file (that is, the base64 version of that file is going to be > the original file size + HTTP headers).

Since Chrome/Firefox are already/going to soon support it, have you looked at using responsive images using the picture element and the srcset attribute on the enclosed source tags and img tag?

[Carlos Lizaga Anadon]

In despite of base64 > img plus http headers, you need to keep in mind that it will have an extra of waiting time before download and that if you aren't using CDN or a cookieless domain or subdomain you will have to sum cookie size to each resource call. That will make the page heavier. 

You can use lazy load too for images which would be the best solution in what performance refers but sometimes performance isn't the goal as UX should take place in on a same or even higher rank.

In favor of img vs base64, they can be easily cached and we could debate many other advantages / disadvantages but I was just curious about how that would affect to PS score so that's why I asked him to try that trick.

It is up to you to sacrifice or not PS score for UX or just re-think all your architecture to be the best in both, but that would actually mean a lot of effort.

Regards. 

[Ashar Abdullah]

Hi All,

I was just testing out the "improved" Page Speed Insights. I do agree that images are indeed causing the "Above-the-Fold" errors. I've tried to combine with src set as well as using picture tags as an alternative. All methods do not seem to work. I have read a bit on how page speed insights need to have the exact amount of space required for an image. What I have done that seems to solve the problem.

1. Created a div with predefined values in css.

2. Placed the image as a background

So far I have tested it with gif. It may work with jpg and png as well.

Hope this helps those who are trying to achieve the perfect score.

Cheers

Ashar