Accelerated Mobile Pages: How It Works?
Google Accelerated Mobile Pages (AMP) is an open-source toolset for the creation of web pages that would load with minimum delay (initially it was implemented only to websites, now also applies to mobile web apps), introduced in 2015. Google AMP is quite efficient in solving its tasks - AMP load 15–85% faster compared to non-optimized pages.
It is noteworthy that Google AMP can be integrated with a ready-made web solution. Below we will discuss in more detail the main advantages and nuances of using AMP.
AMP: What Are Their Main Advantages?
The main incentive for the AMP project was searching for a simple and quick solution to optimize the performance of websites opened on mobile devices. As a result of hard work, in October 2015, the Google team launched the open source AMP HTML structure, thereby giving web developers the opportunity to create lightweight web pages with the shortest possible load time.
Before discussing the need to implement AMP, we suggest analyzing the main advantages of this technology to help you understand it enough that you could judge if it makes sense to implement this technology to your particular case.
- Faster page loading. This is the most obvious advantage of Google AMP judging by the data presented in the Google Developer blog. The loading speed of an AMP page can be up to one second in certain cases;
- Free caching. Google provides AMP developers with access to their caching servers so that the media content can be delivered to users at the lowest possible speed. Therefore, the use of AMP is not just the introduction of new-generation technology, it also grants access to the caching at the distributed content delivery network;
- Preferential treatment in Google Search results. On the one hand, Google indexing bots give preference to websites that load faster, on the other - correctly built accelerated mobile pages get an additional boost as the bonus from Google when a user opens the search in a mobile browser. Thus, AMP is more likely to get into the top of the SERP;
- Ease of implementation. You can integrate AMP into an already existing web solution using the AMP tools and the ready-made templates. This technology was initially designed to be as simple as possible;
- Wide capabilities for advertising and analytics. AMP is a set of rules and structures directed to making HTML code as concise and simple as possible. Among everything else, AMP shuns the usage of JS and other scripts, which often make web pages extremely cumbersome and slow. Nevertheless, technology also allows embedding analytic tools and ad units into AMP pages;
- Compatibility with all the major browsers.
AMP Development: Difficulties You May Meet
The disadvantage of AMP pages is that to create them you need to follow some rules, the implementation of which can be counter-intuitive for beginners. In addition, if your site already has a mobile version, the introduction of AMP may simply be ineffective (since many engines already contain optimizations for mobile devices).
Below we have systematized all the difficulties you may encounter during the introduction of Google AMP:
- A complication of the structure. AMP makes pages with an intricate structure even more complex;
- Possible problems with responsive page design. The possibilities of configuring adaptive design are very limited, and its development in the case of AMP does require a lot of experience from developers. In particular, pages with AMP scripts must meet certain requirements for CSS and HTML. Because of this, some kinds of animations, picture formats, and inline styles cannot be applied to AMP;
- Reduced functionality. Among AMP building blocks you will not find such customary elements as the navigation menu, sidebar, commenting forms. In addition, third-party widgets cannot be placed on AMP pages (for example, the Facebook sharing widget). Of course, you can add some elements manually but it will take a lot of time (since you still need to take into account the requirements for AMP);
- The appearance of AMP pages is far from ideal. It is likely that for the sake of high download speed you will have to sacrifice the visual appeal of your site;
- Possible problems with the volume of organic traffic. Google places the accelerated pages in a separate block of SERP - carousel, which means that users can view them without the transition to the website. This, in turn, will deprive your website of a certain percentage of organic traffic.
Also, note that the AMP is not a replacement for the usual HTML pages or mobile versions of the site but only a supplement.
What Makes Google AMP Different from Similar Solutions (Libraries)?
Can we assume that Google AMP is another set of scripts enclosed in a library? Not really. Any website that uses AMP technology has a number of differences from the site, in the development of which other libraries have been applied:
- Only asynchronous scripts are present in the code;
- All code is aimed at the acceleration of page rendering (for example, images are loaded only while scrolling the page);
- The code contains “linking” to the features of mobile browsers and mobile devices depending on their format (so that the loading of AMP pages took place equally fast regardless of device and browser).
On the one hand, the above differences help pages with AMP scripts to load on mobile devices significantly faster. However, the functionality of these pages turns out to be limited: for example, you can no longer add any other scripts to the AMP pages, moreover, similar restrictions are placed on the available HTML tags.
AMP: How It Looks Like
Is it possible to visually distinguish an AMP from more traditional pages? In fact, this is only possible for specialists: the main differences from the users' point of view are mainly in how Google Search displays these pages in mobile browsers.
For example, when you search Google for some news, you may see the block with a relevant picture carousel in a top of search results, and a logo with a lightning bolt near the website URLs. If the article has a Google “AMP” icon, it means that the page is served using AMP. These articles open in 4-7 seconds.
Now let's analyze what will change in the Google search results with the implementation of AMP technology:
- Cards will have a slightly larger size (this is the most obvious from the point of view of an ordinary user);
After clicking on any of the cards, you will still remain in the search engine, and the content of the selected page will be loaded in a separate frame;
The latter would have a slider for switching between related articles;
You will also be presented with a button to return to the search page;
All transitions will be carried out in a split second.
Last year, during AMP Conf, Google announced AMP for email, and now this format is ready for business. It allows creating interactive and engaging content within an email, opening up an opportunity for the user to take some actions (like respond to an event, or fill out a questionnaire) without leaving the inbox.
In April, Google announced a new Visual Stories block on search result pages. First of all, these stories will appear in the travel space, and later for movies, gaming, TV, fashion, and more.
How to Create an AMP Page?
So how to create an AMP? In fact, you don’t have to create anything - you just need to format an existing page in accordance with AMP rules. There is an extensive AMP HTML library for implementing the core AMP functionality and the ready-to-use extensions for additional features such as animations, video, etc. You can use ready-made templates or create your own design using AMP tools. After completing the configuration process, you can check the efficiency of AMP pages using special tools: Test AMP or AMP Validator.
Examples of a Successful Google AMP Implementation
Washington Post web resource was among the first AMP technology adopters. After the renovation, the site hit a fundamentally new level and reached a number of 1000 daily publications. The average speed of AMP page loading was mere 0.4 seconds. This, in turn, led to an increase in user returns of 23%.
Google AMP and PWA
Above, we considered AMP technology in application to website development. But what about mobile applications?
In fact, there is a solution already developed. In particular, lately, Google has been promoting its Progressive Web Apps (PWA). The most profitable strategy is using AMP and PWA together. Actually, you can use the AMP pages as data-source for the Progressive Web App which helps to reduce the backend and client complexity. On the other hand, AMP pages can use some PWA features like offline access.
From the marketing point of view, the synergy of these two technologies will allow achieving an unprecedented level of user experience on mobile devices: AMP - instant interaction with the user, and PWA - the continuation of this interaction with the same lightning speed. As for the implementation, combining AMP with PWA allows you to make an entry point to your site an AMP page, and then invite the user to PWA-based pages, and all this is executed directly in the browser.
We dare to suggest that together these two technologies will form a vector for developing a new generation of mobile software - even faster, more convenient and even more reactive.
AMP Development: Summary
In summary, sites with AMP increase user UX by decreasing the time of page loading to the minimum, helping the users to “get” to the content many times faster, which is likely to have a positive impact on the SEO of your site.
If you are interested in the prospects and advantages of applying AMP and PWA technologies to your website or web application, contact SSA Frontend! We have already successfully developed and implemented several AMP projects and would gladly take on your project. Get in touch today to find out the approximate cost of your solution.