Implement and optimize AMP for SEO

How to implement and optimize AMP

Index:

• What is AMP – Accelerated Mobile Pages Project
• Is AMP useful for SEO?
• Google Discovery – tells Google about your AMP pages
• Optimizing AMP for SEO
• Use only asynchronous scripts
• Declare the size of external resources
• Don’t use render-blocking plugins / extensions
• Keep third-party JavaScript out of the rendering path
• All CSS rules must be inline and occupy a maximum of 50k
• Recall fonts efficiently
• Reduce style recalculations – style recalculations
• Use only GPU-accelerated animations
• Prioritize resource loading
• Load pages in an instant
• Plugins and Resources

What is AMP – Accelerated Mobile Pages Project

AMP stands for Accelerated Mobile Pages Project (AMP) . AMP is an open source project currently led by Google with the aim of making mobile web pages fast. In practice with AMP you create a very simplified version of each page of the website, so that the loading results almost instantaneous.

Is AMP useful for SEO?

For now, AMP looks like a technology dedicated to news sites, but it may open up to other types of results in the future as well. As you may have already noticed, from February 2016 a new carousel appears when looking for news in the SERP.

AMP carousel in search results

The impact of AMP on SEO is quite evident, for news searches the carousel is the section above the fold , the rest is below .

The user experience on AMP pages is objectively satisfying for this kind of results, the pages open instantly and surely the user begins to appreciate this speed (and then he will click an AMP carousel again).

Google Discovery – tells Google about your AMP pages

As I said, AMP is a system for generating simplified copies of the web pages of the site. How can we tell Google that we have implemented AMP and that there are new pages to crawl and index?

To indicate to Google the AMP versions of the pages, a specific link tag is used to insert in the HTML head.

In the canonical page the AMP page is indicated with the link rel = ”amphtml” , while from the AMP page the canonical page is linked with the link rel = ”canonical” . Simple isn’t it? It is the same operation as the hreflang for the management of languages ​​or the rel = “alternate” for the management of mobile sites.

Since the rel = amphtml defines where the AMP version web page is located, it must be entered in the non-AMP page, or the standard / canonical version of the page. The main function of the rel = amphtml link is to indicate to Google that we are using the AMP project and therefore must index new pages.

When Googlebot encounters a rel = amphtml it will follow it and eventually index the AMP page. If the AMP page is valid it will be inserted into the Google CDN (content delivery network) of Google to be loaded quickly in the iframes in the SERP (the AMP carousel is at the end an iframe). In the future, when a mobile user searches for your page, Google will show the copy from their CDN.

Don’t Worry Publisher : You can always monetize your content even with AMP and CDN, because ads will show if you follow the AMP rules (read on).

Does implementing AMP impact the Crawl Budget?

What is the Crawl Budget? Read here . Anyway – no, AMP doesn’t impact crawl statistics. Google assigns Crawl Budget dedicated to the discovery and indexing of AMP pages. The desktop site will continue to receive regular scans from Googlebot.

Optimizing AMP for SEO

Most of these optimizations can (should) be followed even if you have no plans to implement AMP, let’s consider them part of normal webpage load time optimization.

If you are planning to implement AMP, this guide may help you understand the principles behind AMP so that you can maximize results.

Use only asynchronous scripts

This indication refers to all JavaScript files called by your HTML file. Non-deferred or non-asynchronous JavaScript files are referred to as javascript render blocking and are one of the most common problems that impact web page loading speed.

What is asynchronous JavaScript?

When a JavaScript file is invoked asynchronously, the browser is told that running this JavaScript file is not important for drawing the page (rendering). This way the browser will download the JS file only when the page is rendered. As the page loads, the JavaScript file may start downloading, but it won’t block rendering of the page.

To ensure that there are no JavaScript blocking rendering, AMP only allows JavaScript invoked asynchronously. Even if you don’t want to implement AMP, this optimization is very interesting.

How to invoke JavaScript asynchronously?

Usually a JavaScript file is invoked like this:

To make the call asynchronous to the external JavaScript file just add ” async “:

Warning: all that glitters is not gold … Unfortunately, many web page features may not function properly when a JavaScript is called asynchronously. For example, by invoking the jQuery library asynchronously, elements may appear broken or not shown correctly until the browser has loaded everything.

Declare the size of external resources

The AMP documentation describes this optimization as follows:

“External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download. “

This statement might suggest that an image must necessarily declare an explicit size such as width = 900 height = 400 or something like that. The truth is, that’s not exactly the case.

How does dimensions work in AMP?

In Amp there are special cases used for advertisements, images, videos and iframes (all things that can ruin the formatting of the site). In most cases there are explicit dimensions declared for these elements, but these dimensions are used to responsively resize the elements thus maintaining the aspect ratio.

When a page is drawn from the browser, there are often a lot of style recalculations involved. This means that much of the work done would not be necessary if the browser understood the size of the elements before starting to download them.

When an image is called from an HTML page without height and width attributes, the browser must download the image before it can know its size. Once the image is downloaded, the browser has to adjust the page layout to display it.

The process can be summarized as follows:

• the browser draws the page
• the image is recalled without dimensions declare the dimensions
• the image is downloaded
• the browser knows the actual size of the image
• the browser recalculates all the elements of the page in order to insert the image

if the browser knew the size of the image, the process would boil down to:

• the browser draws the page
• the image is downloaded and displayed correctly without the need for recalculation

Shortening the process also reduces the page load time exponentially to the number of ads and images placed on the page .

How to declare the size in AMP?

Images are inserted using the specific <amp-img> tag . The tag tells the browser to use the declared dimensions not as an absolute value but as a ratio between height and width, the so-called aspect-ratio .

How to declare the size without AMP?

A responsive design is enough to implement this solution. More and more browsers support srcset – more info .

Note: except in special cases we follow the rule that if the image is less than 50 × 50 pixels, then it is correct to simply declare the dimensions with the width and height attributes.

Note: Don’t forget the other SEO-friendly image optimizations!

Don’t use render-blocking plugins / extensions

What plugins and extensions am I talking about? Items such as lightbox, instagram embed, and tweet are referenced in the AMP documentation. These types of extensions use a portion of the page layout to show things we don’t handle and that require additional HTTP calls. As we have seen for images, these extensions can also become render-blocking elements. Ideally, the HTTP requests needed to find and draw these elements shouldn’t block rendering of the page. In other words, the page should finish rendering before starting to populate the extension layouts. The same way it works for ADS, first you have to load the page, and then load the ADS.

How to handle this optimization in AMP?

In AMP this problem is solved by placing the element in a specific tag. If a web page contains an iframe, then the script in the <amp-iframe> tag is invoked in the HTML head and will communicate the size and layout of the element before it is even downloaded.

There is a list of add-ons for inserting external elements into AMP pages, such as Analytics, Facebook, and more. The complete list with detailed information can be found here .

How to handle this optimization without AMP?

With defer function for javascript , images and videos . Deferring items means waiting for the onload event before starting to download them. Read the three linked guides to learn how to differentiate the various elements.

Keep third-party JavaScript out of the rendering path

Again, a render path optimization, which is actually the most important concept revolving around optimizing load speed, can be worth a lot in terms of results.

Third party JavaScript files are commonly the result of copy and paste solutions for things like social buttons, web analytics tracking, SEO tools, marketing tools, ads, and so on. Third-party JavaScript tend not to be very optimized for page loading.

By blocking all third-party JavaScript, AMP frees the web page from blocking elements, so it can be rendered without waiting for anything other than what is absolutely necessary to display the visible part of the page.

It is very important to know the third party JavaScript files we use on the site because we don’t have control of what the script is doing. Often these scripts use synchronous calls or document.write , which significantly blocks rendering.

The AMP documentation describes a simple example:

“… If you have five ads, and each does three sync loads, with a 1 second latency connection, you’re in 18 seconds of load time just for JS loading.”

For this third-party JavaScript must be checked.

Can third party JavaScript be used in AMP?

Yes. Custom and / or third party JavasScripts can be run, but only in sandboxed iframe mode – more info . AMP wants to limit the use of this type of JavaScript because they often cause slowdowns in loading pages.

Take an inventory of the external JavaScript calls and try to defer them and see if the page still works correctly. If you find that these methods don’t work, you may need to replace them with a similar product optimized for web performance.

All CSS rules must be inline and occupy a maximum of 50k

Since all CSS are block elements , the AMP project excludes the use of external CSS. As you may have noticed, low quality CMS themes often use very large CSS, in some cases even largely useless. If you want to implement AMP you have to change the method by which the CSS rules are managed: the CSS code must not exceed 50k and must be in-line, that is inserted inside the HTML file (no external CSS dependencies).

Any webpage with more than 50k of CSS in-line will fail Google verification and will not show in the AMP carousel.

In case you don’t want to implement AMP, know that reducing the number of CSS files and their size is a strong optimization to improve page load times. There are CMS and frameworks where the CSS used to design the pages of the site represents about 8% of all the CSS rules inserted in the file. Isn’t that a waste?

Remember:

• you know the CSS rules you are using on the various pages
• check which rules are actually used and which are not
• eliminate unnecessary rules
• merge CSS into one file
• check the upload speed again

You know those themes where you can change the primary color? Look at the CSS, I wouldn’t be surprised to find blocks of CSS multiplied by each color variant. Once the color of the site has been decided, the other rules must be eliminated!

Recall fonts efficiently

Do you use custom fonts? Read here! In a typical HTML page, several JavaScript and CSS are loaded before the Fonts. Since the Font file is often quite a large file compared to a JavaScript or CSS, it is okay to call it first.

The ideal situation would be to start downloading the Font before the other files so that the resource is downloaded with as little delay as possible. However, it is not easy to achieve this unless you insert the contents of the Font file in-line in the HTML (do you know the site Varvy.com? He does this) but it is not the best solution for all sites.

Insert the Font file in-line

By developing an AMP page you should ensure that the first HTTP request that goes out is the request to the Font.

Reduce style recalculations

What is a style recalculation? When something changes in the web page that affects the layout, the whole page has to be recalculated, and this happens even for small changes. We talked a few paragraphs before about this aspect, using the images as an example, let’s see with another example how to reduce style recalculations.

If an image has no declared size, the browser has to download it just to find out how big it is. Let’s say a page is 300px high with an image of unknown size. When the image loads, the browser discovers that the image is 400px high. At this point we need a style recalculation. When the browser has to perform these recalculations the page loading time gets longer.

It is not only images that cause this problem, even divs can have a dedicated CSS style that is only used to a small extent.

The goal of AMP is to eliminate the style recalculation and using the optimizations just shown you can verify that most of the style recalculations will be eliminated.

• In AMP the dimensions must be declared and this removes the style recalculations
• In AMP the CSS code must take up less than 50k and this reduces the cost of style recalculation

AMP also ensures that the DOM reading occurs before the write operations. This means that there is no need to have multiple recalculations for each frame, in fact AMP imposes at most only one recalculation per frame.

If you are not interested in implementing AMP, the best way to minimize style recalculations is to follow the optimizations seen in this article. As mentioned above, these optimizations are essentially achieved by removing blocking elements in the rendering process.

Saying “minimize style recalculations” is more or less the same thing as saying “plan the web page well”. When a page is designed as a page, rather than a website, these things tend to resolve themselves during development. What I mean by this is that just as CSS should be made for the page and not the website, so should everything else work properly. If an item is not required on the page, do not upload it.

All of these considerations might seem trivial and common sense, but they are not. Virtually every WordPress theme does the opposite of what is recommended in this guide.

To minimize style recalculations you need to know what happens on each page, to know which JS and CSS elements are needed and which are not. It doesn’t matter what your site needs, it matters what the page needs. People don’t look at sites, they look at pages.

Uses only GPU-accelerated animations (Graphics Processing Unit – Graphics processor)

The use of animations inside web pages is becoming more and more popular. When I say animations you might be thinking of large moving images. The truth is that animations are used in a lot of little features, like UI acknowledgments and other stuff like that. If you buy a recently built WordPress theme, you are likely to use.

In order to make sure the animations are AMP-friendly , we need to make sure that the animations are handled by the GPU. What is a GPU? GPU stands for Graphics Processing Unit. Unlike the CPU (Central Processing Unit, the central processor of a computer), the GPU is dedicated to graphic calculations (animation management, 2D and 3D models,…). Due to its specific nature, the GPU is very efficient at handling graphics animations compared to the CPU. This benefit becomes even greater because since the GPU is dedicated to graphics, the CPU can devote all of its resources to rendering the page. Long story short, using CPU and GPU together can make animations faster than using the CPU alone.

How to manage animations in AMP?

Unfortunately there is no simple command that just says “use the GPU for animations”. What you can do, whether you use AMP or not, is to limit the type of animations to only two methods:

• Transform
• Opacity

AMP restricts animations to these two methods, which can be used to make most animations, and promotes the element to be animated.

How to handle animations without AMP?

In the same way seen for AMP: limit the animations to transform and opacity and promote the element to animate. Google’s developer page explaining the method gives a good overview of the process .

Prioritize resource loading

The resources used by a web page can be images, ads, videos, elements inserted in embeds, etc. On a typical webpage these resources are often loaded randomly – such that they are fighting for the same bandwidth and there is no way to know which resources will load first.

How does AMP overcome this problem?

I translate from the official documentation: “AMP controls the downloads of all resources: AMP gives priority to the loading of resources, loading only what is needed, and using the prefetch on lazy-load resources.”

How resources are loaded is the key to speeding up page loading. The same web page, with the same content, using the same images, CSS files, js files and the same font, will load at different speeds depending on the order in which the resources are loaded. AMP intelligently loads resources.

A page that loads CSS before JavaScript is typically faster than a page that loads JavaScript before CSS. If that page also postpones the loading of images below the fold , delays the loading of JavaScript files that are not needed above the fold , it is easy to reduce the loading time of the page by a few seconds.

AMP essentially forces some best practices. AMP also tries to go further, with prefetching r of lazy-load resources. This might seem strange at first, why would it preload a resource that was explicitly lazy-loaded (i.e. loaded later)?

There are three things a browser can do:

• get resources – the less they are the faster the process will be
• calculates – the fewer calculations it performs the faster the process
• is at rest – it is the right time to perform secondary tasks that will soon be needed

The problem with most web pages today is that everything is brought together at once. Everything is called at the same time, the “get resources” phase is clogged and when the browser is at the “calculate” phase it will have to calculate everything together, clogging the process again. Why not prioritize and order the items to download and process? By alternating elements and phases, it is possible to drastically reduce the loading times of complex websites.

AMP simply uses these “idle” windows in a way that allows the page to load efficiently.

How do I do this without AMP?

The truth is, you don’t need AMP or anything else to prioritize the resources to load. There is a logical process that you can follow that will help your pages load faster with the same resources.

• Understanding the rendering path – rendering path
• Optimize CSS loading and load CSS rules first
• Make a list of all the resources loaded from a web page
• Divide these resources into two groups: one group is “below the fold” and the other is “above the fold”
• Postpone the loading of “below the fold” elements
• Consider if you really need all the dependencies you are using for that specific page. If not, remove the superfluous

The truth is, as Google recognizes, a hand-optimized web page can be even faster than an AMP page.

Load pages in an instant

AMP uses Preconnect :

The preconnect relationship link type is used to indicate a source that will be used to retrieve the necessary resources. Initiating an initial connection, which includes DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection. “

Preconnect is a browser way of saying: “Hi, I just thought you should know that there is a likelihood that the user will request this resource shortly, so why don’t you go ahead and start connecting to it?”

This way browsers can decide when it is best to start downloading the recommended resource. This will allow the resource to be ready as soon as it is needed because all the connection details have already been done ( DNS / handshake / SSL)

Preconnect , Prefetch , Prerender , and other browser suggestions such as DNS-prefetch all have a common problem: they are often abused by plugging in and clog the machine again.

How do you manage in AMP?

AMP uses prefetching and pre-rendering more intelligently. Rather than pre-rendering everything, only the “below the fold” area will be pre-calculated.

With AMP pages we can go further, rejecting the PreRender for elements with too long CPU cycles, or elements that can use too much CPU such as third-party iframes.

How to achieve this without AMP?

Using preconnect, dns-prefetch, and pre-rendering can be done without AMP. However remember that if web pages rely on a large amount of resources, reducing or optimizing the way these resources are loaded is a better strategy than using prefetching.

Plugins and Resources

• WordPress plugin to implement AMP and Facebook Instant Articles
• WordPress plugin to implement AMP
• Extension of the official AMP plugin with new functions such as Analytics
• Validation Guide
• Online validator
• Chrome extension