Tag: AMP

The AMP HTML framework continues to gain attention and the v1.0 release of the official WordPress plugin has made it even easier to implement AMP on WordPress. Even though the plugin provides the ability to just flick the switch, AMP implementation should be carefully planned for. For projects that we work on, there are a series of things that we consider and understand before we kick off any development.

The following is a summary of these things. If you’re looking at AMP, take note of these points and build them into your planning.

1. Understand your existing site performance and what could be reasonably achieved with AMP

Performance is as performance does. Benchmarking performance on the existing site and understanding:

1. Where it sits as far as bad<—>good goes
2. How much AMP could realistically move the needle

This will give you an idea of the gap you may be able to bridge with AMP and whether or not the investment is worth the potential return. I.e. moving from a 7 to a 9 performance score means something quite different than moving from a 3 to an 8.

If you’re looking for modern tools for assessing performance (amongst other things), we turn to:

• Lighthouse
• Calibre
• WebPageTest.org

Each of these tools provides agnostic metrics that you can use to track your performance trends over time. We recommend learning the nuances so you can master each of them.

2. Understand the different implementation types of AMP

With the AMP for WordPress plugin, there are 3 different modes for implementation. These are:

1. Classic
2. Paired
3. Native

Each implementation has a different impact on the way your site will operate. Native and Paired modes use your theme’s templates and styling. They often look just like your non-AMP URLs. (Classic mode uses a template bundled with the plugin. Based on changes to SEO best practices and the lack of a “canonical” experience with Classic Mode, we don’t recommend you use Classic Mode.)

The value these 3 different modes bring varies and the choice between them can often be influenced by the technical limitations of how your site is set up. Understanding these will help frame your thinking as you move towards more technical discovery.

The AMP Modes & The WordPress Plugin section on this page cover these 3 modes in more detail. You can also read more over on the plugin’s documentation.

3. Audit asset optimization infrastructure (CDNs, Caching, etc) and define what could be removed and what could conflict with AMP

There are a thousand ways to skin a cache. Asset optimization takes many forms and their friendliness with AMP varies. Auditing what you have active on your current site means that when you move into testing AMP compliance, you’ll be better equipped to identify where issues (if there are any) come from and how to resolve them.

4. Understand performance-related revenue streams

This is different for every site. Revenue streams can come from:

• Ad revenue: Both programmatic and manual
• Subscriptions
• Ecommerce
• Affiliate and Sponsored Content

Review how page performance, and the resulting user experience, can influence conversion rates and technical implementations on these.

5. Audit current Ad-Tech implementations

AdTech implementations deserve their own point here as it varies greatly and is usually Javascript heavy. AMP offers AdTech-specific components for working with this, but the implementation can vary. Understanding your AdTech stack will help you:

1. Determine how to implement the ads in AMP, like with amp-ad
2. Help inform you on how you should go about testing AMP and its impact on ad revenue

6. Audit current Javascript

From tracking codes to frontend features, Javascript is everywhere. Knowing the what and how of it on your site will help you determine:

1. What you can actually say goodbye to (you’ll be surprised how often we are able to remove JS from sites we work on without impacting functionality or integrations)
2. What you can reimplement in AMP, like with amp-bind, amp-ad, or amp-analytics

Once you get to testing, the simplest first step is simply turn off JavaScript in the browser and get a sense of how your site functions without it.

7. Audit tracking/cookie implementations

This is part of the JavaScript step as well but can be considered on its own. Tracking snippets on websites are easily one of the biggest contributors to poor performance. We’ve seen many cases where turning off tracking, without doing anything else, has improved page performance by more than 50%.

However, tracking is an important component of modern website management. An audit of what you have though can help you determine:

1. What could be safely removed from your AMP pages
2. How to leverage existing components like amp-analytics, amp-bind, and amp-list

AMP have components available to help facilitate tracking. The Google Tag Manager service actually has AMP specific features to help implement tracking while maintaining AMP compatibility.

8. Audit the total amount of CSS on URLs. The plugin can remove unused CSS, but it can still exceed AMP’s maximum of 50KB.

One of the restrictions AMP places on a page is a maximum file size for CSS of 50KB. The AMP for WordPress plugin through a feature called tree-shaking reviews a page and produces a minimized file of only the required CSS. However, this feature doesn’t guarantee that the file size will be under the threshold. Reviewing key page templates, particularly for complex pages, will help you scope the project around the need to refactor CSS on the site.

9. Your current state of AMP compatibility

This actually falls into more of the discovery stage of a project but is actually something that can be done, at least at a high level, quite easily. S0 if you’re in the exploratory stage of looking at AMP, doing this can give you a serious head start.

The process basically involves working on a staging/testing/alt version of your site, installing the AMP WordPress plugin and using its features to identify validation errors.

The step-by-step for this can be found here.

10. Understand the Roadmap for AMP & the AMP Plugin for WordPress

Knowing what’s coming, even what’s just around the corner, can help inform your decision around an AMP implementation. A no-go factor about AMP or the plugin may actually be something that could be resolved in the near future. The Roadmap is public and can be easily reviewed over here.

 

These 10 points are what our teams move through when scoping an AMP implementation project. Considering, understanding, even implementing them yourself will mean you’re highly informed about AMP and its potential value for your website.