I’m a big fan of Core Web Vitals, and the cumulative set of criteria that Google calls “Page Experience”, and that is not a coincidence! In the many conversations I’ve had with AMP haters skeptics, most have asked “why we can’t just measure whether something is fast & user friendly” when talking about why only AMP pages made it in the Google’s Top Stories Carousel, and my answer was always “because measuring this is {expletive} hard”.

Cue to 2021, and while it took us a few years, we can measure this stuff now! And Google is indeed dropping the AMP requirement for the Top Stories carousel for that very reason.

Well, anyhow, excited about the Page Experience report launch in Search Console, I logged in to proudly snap a screenshot of my hyper-optimized AMP-first website, and voila:

😱 That…is not what I expected. And if you’re thinking “but wait, isn’t this the whole point of using AMP!” then you’d be right. And AMP does get you quite far toward great PX, but unfortunately AMP is not a foolproof solution yet. The AMP team is hard at work to tighten up its performance promises, but in the meantime, I had to go on a troubleshooting journey.

Also, it looks more brutal than it is in actuality because the PX indicator, unlike gender, is binary: You either meet the bar, or you don’t. In my case, I did almost everything right, except the are of “LCP”, short for “Largest Contentful Paint”, in the Core Web Vitals drill down report:

Lucky for me, my team has built a very handy Page Experience guide & optimization guidance tool just for this purpose:

I ran my site through the tool, and it recommended several areas for optimization:

  • Markup hero images on your page
  • Serve appropriately sized images
  • Make Google Font loading optional, and preconnect
  • Ensure initial Server-response time for the page is short

I also ran my site through Lighthouse, Chrome DevTools’ performance measurement tab, to get a more general picture of what’s going on. Lighthouse reported a mobile performance score of 84. Here’s where I rolled up my sleeves and started optimizing:

  1. Stop loading unneeded images on mobile.
    My colleague Weston pointed out that the images in the fancy stories carousel at the top of my page somehow still load on mobile, even though they’re not visible.. so I found that I accidentally didn’t fully hide them via CSS. If you have such an issue yourself, make sure that the images or parent elements around it have display: none on them by default, and then target them by media query for larger devices.
  2. Change the Google Fonts loading strategy.
    If you’ve grabbed a code snippet to include a Google font into your site, chances are it looks something like this: <link href="...&display=optional" rel="stylesheet">. Change display=swap to display=optional to make it so that if the font takes too long to load, the browser goes 🤷‍♂️ and ignores it until next page load.
  3. Re-optimize images and load them via <amp-img>, not CSS’ background-image.
    Somehow WordPress or even SiteGround’s SG Optimizer don’t seem to be doing a great job at compressing images, so I realized multiple several hundred kilobyte large images were loading. I also realized that I used background-image to load most images on the homepage instead of regular image tags. The downside with background-image is that you can’t easily load different versions of the image for different browsers/resolutions, and you can’t control the lazy loading strategy yourself. Hence, I optimized most images manually with Squoosh & converted all to regular tags.
  4. Load everything I need first!
    This should be somewhat obvious, but I missed a few things here: For instance, that animated carousel is situated at the top, but not the most important element on the page, and the HTML of the menu & sidebar structurally was placed before the content of the page. I also made sure to add a data-hero attribute on the first important image on the homepage to ensure that that one gets loaded before all others (a neat AMP feature).

The bad news: AMP’s Page Experience guide is still complaining about the same stuff. The good news: It’s complaining much less ;) And the even better news, Lighthouse’s lab data gives me a score of 97:

As for me, and likely many other developers, I’m still waiting for Search Console to revalidate by Core Web Vitals (which will take up to 28 days as it has to wait for real-world field data to come in), but I’m reasonably pleased that a few optimizations here and there helped turn things around.

As for everyone else? I’ll be honest, I’m a little worried. I was able to do all of these things because I’m technical, but most web creators & bloggers are not. We’re essentially one-half of a doctor telling them “your site is sick, and also, good luck finding or making the medicine”. If you’re a blogger today, the AMP plugin for WordPress is maybe unsurprisingly still your very best shot at solving many, many issues at once.

If you’re a web creator, how are you dealing with getting your site ready? Who’s helping you, and how can my team help you more? Let me know!

Reply with a tweet or leave a Webmention. Both will appear here.
  1. Weston Ruter said
    : “I was able to do all of these things because I’m technical, but most web creators & bloggers are not.” This is important, as most web creators and bloggers would not be creating their own themes. It seems theme developers should be the primary audience of such tools?
  2. Weston Ruter said
    : And what we can do for bloggers and web creators is highlight the themes which are doing great in terms of page experience.
  3. John Pettitt ⛔ said
    : Also weird image load bug - cache off scroll to the bottom of the page reload and scroll back up slowly and some of the carousel images don't load
  4. Šime Vidas said
    : Thank you for not starting the article with a section that “introduces me to web vitals” for the tenth time. 😂