Search code examples
amp-html

AMP Page Speed Prioritize Visible Content Warning

How can I use AMP and get rid of the Page Speed Insights Prioritize Visible Content Warning with a hero image and text?

I started with just the blank, AMP boiler plate page. 99 score with no prioritize warning. Ok, great so far.

However, I then just added a single paragraph of text: https://run.plnkr.co/preview/cj80bdid90002235spi9tf57y/

Got a 94 score, but it has the prioritize warning.

Ultimately, I want to have a hero image at the top with some text, but that seems even more problematic: https://run.plnkr.co/preview/cj80c7n680002235srggnlk6o/

91 score, but with the prioritize warning.

 <!doctype html><html ⚡><head> <meta charset="utf-8"> <link rel="canonical" href="self.html"/> <meta name="viewport" content="width=device-width,minimum-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script></head><body>

 <amp-img src="https://placehold.it/100x50" width="100" height="50" alt="Hero Image"></amp-img>

 <p>Lorem ipsum dolor sit amet</p>

 </body></html>

As I understand, the prioritize warning appears when multiple round trips must be made for above-the-fold content. https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent

OK, makes sense if I had a nav bar, header, and a bunch of stuff above the fold that did not display. Here, I just have a single paragraph. I've tried filling up the page with paragraphs, but nothing I seem to do gets rid of that warning.

How does a single paragraph tag trigger this warning?

And more importantly, what is causing this error, given that it is a bare bones example?

Solution

  • I have learned:

    • PSI is an older tool that does not give 100% accurate results for AMP
    • PSI has its own opinion of what is "best" for mobile that does not match up exactly with AMP technology / philosophy
    • AMP's runtime engine (Javascript) is right at the limit of what PSI requires for above the fold content. So just by loading AMP and having something on the page, you are right on the edge of its "initial load" requirement.
    • Delaying content, such as using AMP-IMG causes PSI to judge the page poorly. For example, PSI expects a hero image at the top of the page to not be lazy loaded, but AMP-IMG can only lazy load.

    To fix this, the only solution I have found is to use the AMP-List component or any amp component that injests Json to display the initial, above-the-fold content. Then, you can still get a Good rating.