Why use AMP on Your WordPress Site

I still remember the year 1997 when I first got into Website design. Things have been quite simple those days. We have been working normally with a simple HTML page, some 5 pictures and maybe loading an external javascript file if things turned out to be more complex. CSS did not yet exist. In some cases, we split up the page with a frameset, but that was pretty much all. An average page was loading maybe 5 resources, which made up no more than 50 kB in total. Having the majority accessing the web via dial-up, we needed to be quite economical with the bandwidth we used.

Things have changed quite a bit. Nowadays an average WordPress website will load around 100 external resources, combining images, fonts, CSS and Javascript files. All of those combined can easily add up to 3 MB for every single page load. On a high-speed DSL connection, this may be still acceptable, but it is a recipe for disaster on mobile devices.

Some interesting facts: Since 2017 mobile has surpassed desktop in page views. On average a website takes 8,5 seconds to load and on mobile, this number can be easily 3 to 4 times larger. 53% of users say they will abandon a site that takes longer than 3 seconds to load. 79% of online customers said they are less likely to shop on a site again that showed slow performance. And Amazon discovered in a study that every second of delay did cost them about 10% of their revenue. It is easy to see that there is quite a bit room for improvement.

Google has seen this problem and has taken some measures. For search engine ranking it takes into account site speed and user experience. A slow-loading website will increase the bounce rate, which indirectly influences your ranking in Google as well. For getting a positive user experience, as well as for improving your Search Engine rankings, it is important to optimize your page loading speed, especially on mobile devices.

In order to provide a solution for this negative trend, in 2016 Google established together with a few other industry leaders the AMP standard. It is a simplified subset of the HTML standard that envisions to drastically improve page loading speeds, especially on mobile devices.

Google says that using the AMP protocol is not directly a ranking factor yet. But the improved site speed is, as well as the improved user experience. Also, the top story news carousel showing on mobile devices is reserved specifically for AMP pages. News sites were the first ones rallying around implementing AMP. All AMP pages are also marked by the logo in the search results.

In practical case studies, an Indian e-commerce site has seen a 40% decrease in bounce rate. An event ticket site switched to AMP and their page load time dropped from 6 seconds to 1 second. As a result, they have seen a 20 to 30% increase in conversions from paid advertising and a whopping 100% increase in conversions coming from organic search. On average, e-commerce sites see a 32% increase in organic traffic, a 42% increase in search engine rankings and a 20% increase in conversion when switching to AMP. Twitter has seen a 10% decrease in bounce rate when linking to AMP pages compared to their non-AMP equivalent. Another study showed that users are engaging 2x as long on a fast-loading AMP website.

Limitations of AMP

In order to achieve the almost instant loading experience, AMP has implemented a number of limitations:

1. No Javascript allowed except the predefined AMP components. That brings certain limitations, especially in relation to interactive elements, but greatly reduces processing time of the page, as well as avoiding the loading of bulky libraries. Since August 21, 2019 a limited support of Javascript became available in AMP, but regular Javascript libraries of your plugins most likely do not comply.
2. No external CSS. About half of the resources loaded on a WordPress page are CSS libraries. Loading additional files on a mobile network is more time-intensive since the round trip times on mobile are quite a bit higher than on a wired internet connection.
3. All CSS combined needs to be less than 50 kb. A theme that has Woocommerce support for example will include all the product layout CSS, even if you have not a single product on your site. Plugins are adding additional CSS, which are normally loaded on all pages, whether they are using the plugin or not. In practice, not even 10% of code in the CSS libraries loaded is actually being used on the page. On AMP, only the CSS that is actually used should be loaded.
4. Some CSS animations are disallowed, and animations are limited to those who can be processed with GPU acceleration.
5. The HTML tags <img>, <video>, <audio> and <iframe> have AMP equivalents that prioritize loading of the essential content first, and will load media files only after the initial page is being built. That speeds up the initial page loading time.

Furthermore, Google places an AMP-compatible page into its cache, allowing for almost instant displaying of the page when clicking through from their search results. At every page request, the cache is going to be updated to guarantee that the content of the page will stay up to date.

Implementation in WordPress

In order to make WordPress compatible with the AMP standard, there are a growing number of plugins available. In another blog, I have tested the best available options and will give you a review of the strengths and weaknesses of every one of them.

In relation to the plugins, there are basically two different approaches. There is the official plugin that was developed in a collaboration between Google and Automattic, the company responsible for WordPress.com. They provided a framework where the plugin does the heavy lifting of CSS tree shaking in order to limit the CSS to the code that gets actually used. It also transforms the mentioned forbidden HTML tags to their AMP equivalent. What is not handled by the plugin are Javascript libraries. If they are unessential for functionality, the AMP plugin can even strip off the Javascript code. If the code is though essential, the AMP plugin is handing the job to the corresponding plugin or theme to supply an equivalent that does not need Javascript at all, or that runs based on the provided AMP component libraries.

Here lies still a problem with the official implementation of AMP. There are just a few dozen themes out there that have implemented support of the AMP plugin. When it comes to plugins, the support is even more limited. For example, Caldera Forms was the only form plugin working perfectly with AMP. In relation to page builders, you are limited to Gutenberg. Just trying to extend Gutenberg with additional blocks will limit your choices to very few options. The Atomic Blocks library is the only one I know to be 100% AMP compatible. Hopefully, in the future the support of plugins will increase, but for the time being, any plugin that will use Javascript on the frontend will have its limitations when used with the official AMP plugin.

There is a number of other plugins available who take a different approach. Instead of depending on the theme to substitute their Javascript, they use a completely separate template to render the AMP page. They have also a list of plugins that modify their output to make them AMP-compatible. The AMP for WP plugin, for example, has roughly 30 plugin integrations in its Pro version. At the moment that gives a clear head start in relation to compatibility. The big downside though will be a completely different layout in the AMP version compared to the desktop or even the responsive mobile layout. In this case, the styling is defined by the AMP plugin and not by the theme.

Conclusion

AMP is really a powerful way to increase the speed of your mobile pages, and it helps to meet Google’s expectations of a speed-optimized page. In the last couple of years, the available plugin options have evolved quite a bit and making a proper AMP implementation of your site gets every time easier. The features of the various available plugins vary greatly, and it pays off to plan well your move to AMP in order to maintain a positive user experience while implementing a significant page speed upgrade.

If you liked this article, I have a special offer for you. I have created a manual to lay out the whole process of WordPress Speed Optimization for you. From choosing the right hosting service to caching, minification, GZip compression and image optimization, we have you all covered. We explain also the whole process of making your site AMP compliant. This document will help you to get your WordPress speed optimization, especially on mobile, to the next level.