Website performance is becoming an increasingly important ranking factor. Perhaps even more crucial though, it also has a huge impact on page abandonment, conversions, and ultimately user satisfaction. In order to keep both users and bots happy, it’s important to keep your pages as lean as possible.
We’re always looking at new techniques to speed up websites, so when Google announced their AMP project, it piqued our interest. Today we’re going to be looking at the recently-released WordPress plugin which promises to make any WordPress site AMP compatible.
Setup
Getting started is simple as installing the official AMP plugin. While there are other AMP plugins by third parties, we will stick to the official one today.
The AMP plugin starts working immediately once activated. It will generate minimal, AMP-compatible versions of posts and pages on your site. Note that these don’t replace your existing pages, but are additional pages that are automatically served to mobile users in the search results.
Your existing pages do receive an “amphtml” tag, which helps search engines find the amp versions of your pages.
<link rel="amphtml" href="https://www.example.com/hello-world/amp/">
Similarly, the amp version will now link back to the desktop version.
<link rel="canonical" href="https://www.example.com/hello-world/">
This tag ensures there are no duplicate content issues for search engines.
While setup ends there, unfortunately so do the other customization options. The official AMP plugin offers very few settings to tweak the new version of the page.
Customization
Under the AMP Options page in the WordPress sidebar, you are able to turn on AMP support for both posts and pages (which you should likely do). However, there is one other setting which is hidden away in the customizer. Navigate to Appearance > Customizer to find the color options.
The Customizer’s preview page can be toggled into AMP mode by pressing this toggle button at the bottom. Note that not all templates support AMP, so you may need to navigate to a post or page first.
Once amp mode is turned on, select AMP from the sidebar navigation, then Design. This will allow you to customize a small number of color options.
Color scheme and header color are where you built-in options end. To get any more customization out of AMP, you would need to use a theme that supports special hooks designed for AMP.
Performance
We’ve decided run some tests to get a better idea of what kind of savings to expect. For a more fair comparison, we’re testing both a lightweight and heavyweight site. Due to the shorter duration of this test, we will focus on page speed rather than SEO performance.
Lightweight Site
The first website is a new site we’ve designed for a law firm. It’s very light and loads quickly already, so the effects of AMP should be minimal. We’ll be measuring performance using a 3G connection.
Original: Load time: 3.1 seconds, Requests: 37, Total Data: 182 KB.
AMP: Load time: 3.6 seconds, Requests: 6, Total Data: 113 KB.
Our original page was actually slightly faster than the AMP version, even though the amount of data and number of requests were larger. This is likely due to AMP’s requests being external, as that requires DNS lookups and TLS exchanges. Our server is also multiplexed via HTTP/2 which mitigates the cost of additional HTTP requests.
On an HTTP/1.1 server, the AMP page would most likely have won.
Heavier Site
For this one we’ll be tested a lodging business. This site includes large photos, and uses many scripts and CSS files. This should be more interesting.
Original: Load time: 20.6 seconds, Requests: 159, Total Data: 2,962 KB.
AMP: Load time: 8.9 seconds, Requests: 19, Total Data: 888 KB.
In this case, the AMP page was noticeably faster than the original page. The AMP page was still quite heavy due mostly to including all the same images as the original page. Scripts and CSS were significantly reduced though as the AMP version replaces these with its own.
If considering just the performance impact, AMP can make sense on larger websites; especially those that are heavy on CSS and scripts.
Other Considerations
If you do decide to use the AMP plugin though, you must also make some concessions. These generated AMP pages offer little control, and largely come down having to “take it or leave it”. If your content doesn’t work well without CSS, or if the generated page clashes with your brand identity, then you have little recourse in fixing it.
Having an AMP page also means having to maintain two different versions of your content. If your regular page has a contact form, you’ll need to consider if AMP users are still able to reach you. This added complexity may not be worth the performance gains in all cases.
Finally, AMP pages must be recognized as being fully isolated. There is no navigation to the rest of your site, nor is there support for your homepage, blog indexes, etc. This means that your viewers are likely to stay only briefly.
Like anything else, AMP is just a tool. It’s one option for speeding up your website for a subset of mobile users. It does not replace the need for you to have a fast website, but it may offer a bandaid solution while you get there on your own.