When using AMP by Shop Sheriff, we compress, minify, and optimize your AMP pages as much as possible right out of the box.  This includes:

• HTML minification
• Compression
• Proper image dimensions
• Lazy-loading
• ...more

However, there may still be some things you can do to optimize the AMP pages.  Here we will discuss a few tips:

If you're loading Videos or Product Reviews, place them "below the fold"

If you have product reviews or videos, or another third-party integration on your AMP pages, one thing that might happen is that this content is high enough on the page that pagespeed tools attempt to load these right away.  This is called having content "above the fold".  

Product reviews:

If product reviews are being loaded too high up on the page, an example pagespeed report might show that "jQuery" is being loaded on the page, which is a clear sign that something (usually product reviews) needs to be pushed down further.  Here is an example:

If you see this happening, we have a few tips to solve this.

Tip 1: Add more content to your product description in your Shopify admin panel.  This will cause the product reviews to load further down the page because your product description is longer.

Tip 2: Add "Related products" above your "Product reviews".  This is easily accomplished within the AMP theme editor, and this will push your product reviews below the fold.

Videos:

If you have added videos to your AMP pages, for example, the AMP home page, it's not possible to load the page without loading the video, so you will inherently have a lower pagespeed score.  This is impossible to avoid on any site that uses videos high up on the page.  The following tip will solve this.

Tip: Move the video "below the fold" by adding content above the video.  

Minimize the amount of Custom CSS you are using

AMP has a built-in Custom CSS tool, which allows you to add CSS code to the AMP pages.  This is a fantastic tool to help you fine-tune the layout of the AMP pages, but of course every tiny bit of code that you add to the pages does affect how heavy the pages are.  

Tip: If you are using the Custom CSS tool with a lot of CSS, consider cutting down on the amount of Custom CSS used, if possible.

Utilize AMP's "Custom Domain" option

The standard AMP configuration has your AMP pages living at the /a/s/ subdirectory.  This is 100% OK, and recommended, however, if you utilize the "Custom Domain" option then there can be a slight speedup on the pages.  This is because the AMP pages no longer use Shopify's "App proxy" setup, and instead route directly to the AMP custom domain.  In our experiments, this can save up to around 100-200ms.  This is not much at all, but it's worth noting.  If you're unable to use the Custom Domain option, the speedup gained by this is relatively negligible, so it's nothing to lose sleep over.

I'm still not happy with my AMP pagespeed score

First, definitely make sure that product reviews or videos are not loading too high up on the page, as there's nothing that can fix this except the methods described above.  However, if you still feel that the AMP page speed is too low, there are two things you should know:

1) The Google "PageSpeed Insights" tool is constantly changing, and often produces wildly different scores with each test.  For this reason, we don't recommend it as an accurate measure of page speed score.  Instead, we recommend GTMetrix, which does a much better job of analyzing each potential speedup opportunity for your shop.  If you notice that your GTMetrix (not page speed insights) score is below 80, contact us and we'll be happy to check that out for you.

2) Remember that when someone finds you on Google Search Results, Google actually caches and preloads AMP pages, no matter what their score is, so they load faster than any possible page.    Furthermore, when a user searches and sees an AMP page on the screen, Google pre-loads that search result.  The end result is an AMP page that inherently loads faster than any possible page, because it's cached and preloaded by Google themselves.  This is in large part what contributes to the SEO boost that AMP pages receive.  

My GTMetrix non-AMP score is better than my AMP score

This is extremely rare.  If this happens, we do recommend running a few tests through GTMetrix as sometimes they can give inconsistent scores.  However, if you've been able to achieve this, and we congratulate you.  AMP pages should almost always be scoring within 80-100 on GTMetrix, which makes them quite hard to beat.  If you managed to beat the AMP score, it's still worth noting point #2, above, which is the fact that Google caches and pre-loads AMP pages, so your SEO and search-engine speedup, as well as your Core Web Vitals metrics, on AMP will be inherently better than your non-AMP page.  Google also rewards you with the AMP lightning bolt and gives you the opportunity of showing up in Google's "Top stories" carousel.  We recommend checking out all of the ways that AMP improves SEO.