AMP & TYPO3

What is AMP?

Accelerated Mobile Pages (AMP for short) is a project initiated by Google to speed up the delivery of websites. The focus is on mobile websites. In principle, however, desktop versions can also be programmed with AMP. With AMP, the search engine operator is pursuing the goal of significantly improving the surfing experience (=User Experience) with mobile devices. According to statistics, this also pays off for website operators;

 

 

See: https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-website-load-time/

 

In summary, the three biggest weaknesses of mobile sites are:

  • long loading times
  • lags and slow interaction
  • choppy page loading (e.g. due to ads)

This is exactly where AMP comes in: By providing short load times and an instantaneous page load without subsequent shifts, the user experience is dramatically improved

In this article, we would like to give a brief overview of AMP and show why AMP is not only possible but also recommendable for TYPO3 website operators.

AMP is - in very simplified terms - a modified HTML that delivers web pages extremely fast due to the technology described below. Since AMP is subject to various restrictions and is not necessarily supported by every browser, the most common solution is to deliver two versions of the website: one in the previous HTML format and one in the AMP format. Both page types are linked to each other, so that the search engine can decide which version it links to (e.g. AMP on mobile devices and HTML on desktop systems). This is relatively important, especially against the background of browser compatibility.

Introduction to Accelerated Mobile Pages

A very clear introduction to AMP is provided by Google itself (in the person of Paul Bakaus):

 

How does AMP work?

AMP is essentially based on three pillars:

 

  • AMP-HTML and restrictions on the use of HTML/CSS and JavaScript
  • AMP-JS: JavaScript for mapping the entire logic and thus, among other things, for optimised resource management
  • AMP-Cache: pages are stored on Google's CDN servers for the purpose of short loading times

The pages become particularly fast through two concepts:

Pre-rendering

In Google's search results, the first viewpoint (that is, the part of the page that is visible on the respective display at first glance, i.e. without scrolling, also known as "above-the-fold-content") of AMP pages is loaded with a high click probability without the visitor noticing anything (via a so-called "hidden iframe"). If the visitor clicks on such a link in the search results, the page is displayed IMMEDIATELY. 

So when a search term is entered in the Google search:

  • searches google for the links qualified for that term (=search result)
  • calculates (based on various factors) which links the visitor is most likely to click
  • loads the above-the-fold content of these pages that corresponds with the visitor's display

Because the pages are only loaded from Google cache for security reasons, they have a different URL, which has led to considerable criticism.

Example:

The AMP page

www.wacon.de/news_artikel.html

would appear in the google search result like this:

www.google.com/amp/wacon.de/news_artikel.html

There are two reasons for this: First, when the search is performed, it is not clear whether the user actually accessed the page. However, the loading was nevertheless recorded by analysis tools and would falsify the statistics. Secondly, the pages that are already in the AMP cache are checked for validity, and can therefore also be loaded without errors as AMP pages

Dynamic loading of resources

AMP only loads the images (or other resources) that actually need to be displayed ("Above the Fold"). When the user scrolls down, the images to be displayed then are also loaded first. This makes the first call to the page extremely fast. This method has been used in a similar form with JavaScript for a long time - independently of AMP and Google - and is called Lazy Loading.

How can you recognise AMP pages?

You can recognise AMP pages in the search results by the lightning symbol next to the respective URL. We have made our own TYPO3 website AMP-compatible for our Stuttgart office: www.birdy.net. Here is the representation in the search result:

 

The following already becomes clear: the more users know the meaning of the symbol (=fast loading times, comfortable surfing), the more likely they are to click on it.

 

Ergo: AMP will lead to an increase in visitors!

Quality check

With Lighthouse there is a free, powerful tool for analysing websites. We have applied the software to our AMP website htps://www.birdy.net/amp  "and are thrilled with the results: 

 

These values can hardly be achieved with "normal" websites. They show the enormous potential of AMP.

 


Technical specifications.

A brief overview of the most important technical aspects:

 

  • the use of https is mandatory
  • the HTML document starts with <!doctype html><html amp> instead of just <html>, then the <head>statement must appear followed by <meta charset="utf-8">
  • the canonical tag must point either to the corresponding HTML page or - if it does not exist - to itself
  • a viewport must be specified (recommended initial-scale=1)
  • in the head of the page, the AMP JavaScript and a css-boilertemplate must also be included
  • CSS must be defined inline within a <styles>tag in the head and must not be larger than 50KB
  • Except for the AMP-JS no other JavaScript is allowed in the main document. It can only be included via an iframe that does not block the construction of the page
  • Images are included in the <img-amp>, which - in contrast to the <img>-tag - must necessarily end with </img-amp>.
  • For images, fixed heights and widths must be specified. This allows the space needed by the image to be calculated and kept free before loading the resources and the structure of the page goes without shifts even when loading the images later.
  • only web fonts from white-listed providers may be used.
  • the validation of an AMP page can be done via the developer tools by appending the parameter "#development=1" to the URL or via the link https://search.google.com/test/amp

What benefits can AMP have for a TYPO3 website?

AMP was originally developed to make publishers' pages available on mobile devices. In fact, they are also under pressure to offer AMP pages as an alternative to normal pages. For example, only AMP pages are included in Google's news carousel (recognisable by the lightning bolt at the top right of the news teaser):

 

The news carousel is increasingly being displayed as a rich snippet above the normal (generic) search result. So it is not only limited to the news section of Google:

 

Sooner or later, however, not only publishing houses but all professional website operators interested in a good ranking will have to implement AMP. Even without the need to appear in the news results. The reason for this is the increasing focus of search engines on fast mobile websites. Currently, Google still maintains two different indices: one for desktop search and one for mobile search. However, the search engine operator has already announced that it will soon only maintain the mobile index as its main index. At the same time, the importance of optimising the website for mobile devices is emphasised again and again. Speed and ease of use are decisive factors here. 

 

Delivery of AMP pages is also possible with TYPO3! So if you are using the TYPO3 content management system, we as Internet agency can advise you on this and offer you conceptual solutions and also implement them. 

Technically, the AMP integration is realised via an if-condition in the TYPOSCRIPT template, so that the same content can be delivered in two different versions (HTML and AMP) 

The editor has no additional work with this solution. We would be happy to explain to you exactly how this works in a personal conversation.

 


AMP in ongoing TYPO3 operation

Once your TYPO3 website has been converted or adapted to AMP, the editor does not have to pay attention to anything else in the optimal case. The content is still only maintained once and then automatically delivered to the visitor by TYPO3 either as HTML or AMP pages. Unfortunately, the optimal case is rarely the rule. It will always happen that the editor uses certain settings in TYPO3 (e.g. individual format specifications, direct input of HTML code, etc.) to make the respective website - unintentionally - "AMP-invalid". As a result, it is no longer used as an AMP page . No matter how small/insignificant the error may be. In AMP, there is only valid or not vailde.

 

How can one regularly/automatically check web pages for AMP validity?

Fortunately, Google takes care of this task for us! The prerequisite is to set up Search Console for the website. If Google now comes across pages that are declared as AMP but are not valid, the operator of the website (or the Search Console) is sent an email with a link to detailed information in the Search Console and can thus correct the error promptly:


Would you also like to benefit from AMP?

As an internet agency, we are specialised in TYPO3. We now have a lot of experience with the implementation of AMP on TYPO3 and would be happy to support you. If you have a TYPO3 website and would like a first, no-obligation and free consultation, the best thing to do is just give us a call:

 

0800-9226619

Or send us a request for an appointment using the quick contact form at the bottom of this page.


Links

Official project website: https://www.ampproject.org/

 

Quick start and templates to create your own site: https://www.ampstart.com

You want to improve the visibility of your TYPO3 website and the user experience for your visitors with AMP? Then simply contact us using the quick contact form below and we will get back to you right away. There are no costs for visits in the Rhine-Main area..