What are accelerated mobile pages (AMP)?
Accelerated Mobile Pages meaning is an open-source HTML web framework created by Google. AMP is optimized for mobile users to enjoy faster page loads on their devices, which enhances their experiences. As more and more individuals rely on their mobile devices as their primary PC, this capability has become crucial.
Even though AMP uses a streamlined version of HTML, it does not support all HTML tags, so you can’t just use them anywhere you want. Images load when the user scrolls to them, and forms are not supported; therefore, a lightweight CSS version is necessary. There is a little JavaScript library available inside AMP.
The history of AMP
Google unveiled the AMP Project on October 7, 2015, after negotiations with the Digital News Initiative (DNI) and other tech companies about enhancing the mobile web. AMP Project participants include more than 30 digital firms (including Twitter, Pinterest, LinkedIn, and WordPress). Google started showing AMP sites in mobile search results in February 2016. Some highlights through the years:
- Adobe estimated that one year after the public release of AMP, its sites accounted for 7% of total online traffic for leading publishers in the United States in February 2017.
- In May 2017, Google said that more than two billion AMP pages had been published over 900,000 web domains.
- The release of the official AMP WordPress plugin on December 7, 2018
- Google replaced AMP with page loading speed and other “page experience” metrics in April 2021. Top Stories won’t be limited to AMP sites in search results, and AMP pages won’t have icons.
- Apps would stop supporting AMP in 2021.
- Brave Browser added functionality to skip AMP sites on April 20, 2022. On the same day, DuckDuckGo stated that their browser and browser plugin would automatically avoid AMP sites.
The truth is AMP has its primetime and downfall. To further understand why such technology is outweighed by other technology, we will discuss its architecture in detail and its pros and cons.
3 Components of accelerated mobile pages
The following are the three main parts of an AMP page:
AMP HTML
AMP HTML is just standard HTML with a few performance-enhancing constraints.
While most AMP HTML tags are compatible with standard HTML, some are swapped out for AMP-specific alternatives. Known as AMP HTML components, these unique tags simplify the efficient implementation of common tag patterns. The HTML element identifies an AMP page to search engines and other platforms.
A page may have both a regular version and an accelerated mobile page (AMP) version, or it can have simply one accelerated mobile page (AMP).
AMP JavaScript (JS)
Thanks to the AMP JS library, AMP HTML pages load quickly. To guarantee that your pages load quickly and display correctly, the JS library incorporates AMP’s recommended performance practices, such as inline CSS and font triggering.
Thanks to AMP JS, all of the page’s external resources may load without affecting the rendering of any other elements. The JS employs many performance strategies, such as iframe sandboxing, layout precalculation, and CSS selector disablement.
Accelerated mobile page cache
Cache versions of AMP HTML files are sent through Google AMP Cache. To ensure that all valid AMP files are delivered quickly, the AMP Cache uses a proxy-based CDN. Cache automatically optimizes website load times by retrieving AMP HTML pages, caching them, and then using that data to generate a new page version.
The use of caching to speed up a website is common knowledge. For valid AMP documents, AMP employs a proxy-based CDN in the form of an AMP cache. The AMP caching technology has built-in verification mechanisms. Through a set of assertions, the system checks whether a page’s markup adheres to the AMP HTML specifications.
How accelerated mobile pages works
The Accelerated Mobile Pages (AMP) framework was created to speed up mobile-friendly HTML web pages. AMP caches HTML-based mobile web pages quicker than other existing caching given by Google in the search results by pre-rendering your static content and delivering it locally to the user.
The concept of how accelerated mobile pages works is that the entire system is optimized for speed and readability. Picture loading, for example, is deferred until the image is scrolled into view; JavaScript handles this automatically. Soon, the JavaScript library may even be preinstalled on specific operating systems, making it unnecessary to install it separately. Plus, it’s all built to use Google’s extensive caching features, eliminating the need to provide any of your material to the search engine.
Techniques AMP uses to optimize your web loading
AMP, which works to build fast-loading pages, is a collection of components used to optimize the page:
- AMP only allows asynchronous JavaScript to avoid latency caused when JavaScript delay rendering and DOM prevention.
- It sizes all resources statically. Before downloading, AMP must know the size of external resources like iframes, ads, and images. AMP downloads materials after page layout in one HTTP request
- AMP rendering is unaffected by extensions. AMP can support Instagram embeds, lightboxes, tweets, and more, which need HTTP requests that continue page layouts and rendering.
- Third-party JavaScript prefers synchronized loading. In sandboxed iframes, AMP webpages allow third-party JS. However, the main page cannot prohibit third-party JS in iframes, which might take longer to calculate.
- CSS must be size-bound. AMP HTML only enables inline styling, which disables HTTP requests from many websites’ essential rendering routes.
- Efficient font optimization. Web font optimization in AMP improves branding, readability, and design, boosting speed, which decreases page size, and improves load times.
- Decrease style recalculations. After updating the design, AMP will review all components and reconstruct the page flow.
- Only use GPU for animations to supports transforming animation for faster load while opacity tweaks generate AMP animations quickly
- AMP preloads slow-loading resources by downloading vital materials and sluggish elements first.
- AMP loads quickly with Preconnect API that speeds up HTTP requests. Prerendering web content requires CPU and bandwidth. Pre-rendered AMP documents only download above-the-fold resources for fast loading.
The benefits of accelerated mobile pages
Why should we use accelerated mobile pages? Consider these few advantages of AMP.
Provide a better user experience
In the end, you should aim to improve the user experience. With AMP, you may expect a 15-85 percent decrease in load time. Since AMP pages load instantly, you can provide users with a consistently quick online experience across devices. This is one of the most noticeable accelerated mobile pages benefits.
Improve your search engine rankings
Google’s ranking system considers web load time and mobile-friendly. Google’s mobile-friendly ranking algorithm boosts visibility when your website loads quickly on mobile devices.
Boosts profits to the maximum possible
If your website takes two seconds longer to load, you lose 12% of your potential customers. This implies that you need to make sure your mobile website is fast enough for your visitors if you want to keep their attention and boost your return on investment.
Simplify your processes to increase efficiency
Making AMP pages is a relatively easy and uncomplicated procedure. You can convert your entire archive without effort using a content management system like Drupal or WordPress.
Every AMP page’s code may be optimized without specialized knowledge or tools, the AMP format is entirely portable.
Accelerated mobile pages disadvantages
The AMP format for web pages has various drawbacks since it is open-source. At times, you’ll have to sacrifice page aesthetics in favor of load speed. Before deciding to use AMP, consider the disadvantages we’ve listed below.
No dynamic content is supported
As a critical drawback, AMP is restricted in many ways regarding markup languages like HTML, CSS, and JavaScript. Since AMP pages aren’t compatible with geo-targeting, you should rethink using them to provide dynamic content. That’s a bummer since it hurts UX for those interactive sites we worked so hard on. On the other hand, the AMP carousel might be a better option for you.
Ads are restricted on AMP
Currently, six advertising networks support AMP sites, 2 of which are owned by Google. There are restrictions on how much money you can make from advertisements, but Google is working hard to fix that, and it keeps adding more ad integrations.
Analytics deficits
A speedier page load time is a nice perk, but you need to tweak Google Analytics and add unique tracking codes to your AMP pages to get data on how many people see them.
To put it simply, Google is in charge
Google has full authority as its AMP Cache sits between consumers and your server. There is worry among some publishers that Google is utilizing this strategy to further their interests in the mobile space. Risks in monetization flow for display advertising strategies will result from a lack of distribution control.
AMPs may not boost site traffic
Because AMP content is hosted on Google’s servers and has a Google URL, they may not enhance site visitors. Google has promised to fix this in the future, but in the meanwhile, astute publishers have found solutions.
The green lightning next to the article title when you search on Google used to indicate an AMP site. However, Google has removed this icon.
Frameworks for accelerated mobiles pages
AMP HTML
Although it has various limitations for dependable performance, AMP HTML is fundamentally HTML. Most tags in AMP HTML are standard HTML tags, although certain HTML tags have AMP-specific tags in their place. These unique tags, referred to as AMP HTML components, help search engines and other platforms find AMP sites.
AMP Email
In 2018, Google unveiled a new AMP framework called AMP Email. Although it includes a bit of JavaScript markup where AMP components may be included, AMP email is a standard HTML email.
Every day, over 270 billion emails are exchanged. However, the content of an email message is still restricted – statements are static and not actionable without a browser. AMP email aims to improve and modernize the email experience by adding support for dynamic content and interaction while keeping users secure.
AMP Ads
Digital publishers may display advertisements on their websites more quickly, lighter, and securely by using AMP advertising, sometimes called AMP HTML ads. Standard advertisements are written in HTML, but AMP advertisements are produced using the AMP Open-Source Project’s AMP HTML ad requirements.
Web Stories
Web Stories provide your readers with full-screen, quick-loading experiences. Create visually compelling stories with simple animations and tappable interactivity. The Web Story format (formerly known as AMP Stories) is open source and free for anybody to use on their websites.
Successful accelerated mobile pages examples
One of the most popular examples of accelerated mobile pages is Gizmodo. In May 2016, Gizmodo introduced their AMP and started publishing all their content on AMP sites and making AMP versions of their past pieces.
Gizmodo has already published over 24,000 AMP pages, which gets 100k hits per day. AMP has helped Gizmodo mobile sites load 3x quicker than the average mobile website, and over 80% of AMP traffic is new visitors, compared to less than 50% of all mobile visits. Furthermore, the blog’s impressions per page visit have increased by 50% thanks to AMP.
AMP vs PWA
Another emerging web technology that many top brands root for is Progressive Web Apps (PWA). Although PWA is created after AMP, we have found some similarities and differences between AMP and PWA.
While AMP focuses on a lightning-fast web page, PWA focuses on better user experiences with accessibility and convenience. That said, AMP’s interface and features feel like a basic website. In contrast, PWA brings more app-like experiences and can be used without an Internet connection.
AMP and PWA have some crossovers and can be used together to combine their benefits. Many top brands, such as The Washington Post, have leveraged this for their new online experiences that shorten page load to 90% and gain 23% in customer retention
To learn their distinction in detail, here are: AMP vs PWA: Which one is better for your website performance?
The future of AMP: Should I use it in 2024?
As mentioned before, AMP is at its downfall, and Google has basically stopped supporting this technology. Also, Google stated in 2021 that AMP is no longer a search engine priority. Instead, it will be the web speed, a criterion of the Core Web Vitals.
Thus, Synodus recommend you optimize your Core Web Vitals instead of looking for an AMP solution. AMP can be hard to maintain sometimes; without future support, it can even be more challenging.
However, this doesn’t mean the technology is dying. The idea and structure behind AMP are pretty solid, even though it’s quite complex. Because of that, many developers have used parts of AMP to improve their websites with other web technology, such as The Washing Post or Rakuten.
In the end, we suggest you refrain from using accelerated mobile pages if your website is mainly static or your web apps are standard with not-too-complex features. However, if you want to develop a rich-feature web app with good UX/UI and fast loading, go for AMP and other web architecture such as SPA and PWA.
More related posts from our Web development blog you shouldn’t skip:
