How to Build an AMP Page for a Faster Mobile Site

What AMP is and why it matters

AMP (Accelerated Mobile Pages) is an open-source framework Google developed in 2015 to dramatically speed up the loading of web pages on mobile devices. In a world where more than 60% of internet traffic comes from mobile phones, site load speed directly affects user experience, bounce rate, and search ranking position. Research shows 53% of mobile users abandon a site that loads in more than 3 seconds. AMP solves this problem by restricting HTML, CSS, and JavaScript in a way that guarantees extremely fast page rendering.

AMP pages typically load in less than a second, which is 4-5 times faster than the average mobile page. Google further speeds up AMP content by caching it on its servers via the AMP Cache system, so the page is delivered from the closest Google location to the user. This results in near-instant loading when a user clicks an AMP result in Google search.

How AMP works

The three AMP components

AMP consists of three key components that together ensure fast loading. The first is AMP HTML - an extended HTML version with custom tags that replace standard HTML elements with optimized versions for images, video, and carousel components. The second component is the AMP JS library, which manages resources, asynchronously loads external resources, and ensures nothing blocks page rendering. The third is AMP Cache - a proxy-based CDN that automatically fetches AMP pages, validates them, and caches them for fast delivery.

AMP limitations

To achieve exceptional speed, AMP enforces strict limitations. You can't use your own JavaScript - you can only use AMP components and the limited amp-script element. CSS must be inline and limited to 75KB. All external resources (images, ads, videos) must declare their size in advance so the browser can calculate layout before resources load. Forms and interactive elements use special AMP components. These limitations may feel strict, but they're what guarantees a consistently fast experience.

AMP page structure

Basic AMP HTML template

Every AMP page begins with a specific structure. The doctype is standard HTML5, but the html tag must contain the amp attribute or the lightning emoji. In the head section, the required elements are a charset meta tag, viewport meta tag, canonical link to the non-AMP version of the page, the AMP boilerplate CSS that represents standardized styles to prevent Flash of Unstyled Content, and a reference to the AMP JavaScript library. The body of the page uses AMP-specific tags instead of standard HTML elements for media content.

AMP components

AMP offers a rich ecosystem of components for different needs. For images use amp-img with mandatory width and height attributes. For video content there's amp-video and amp-youtube. Interactive elements include amp-carousel for sliders, amp-accordion for expandable sections, amp-lightbox for modal views, and amp-form for forms. For analytics use amp-analytics, which supports Google Analytics, Facebook Pixel, and other platforms. Each component loads asynchronously and doesn't block rendering.

Implementing AMP on a WordPress site

Official AMP plugin

The simplest way to add AMP to a WordPress site is using the official AMP plugin. This plugin offers three operating modes: Standard mode turns the entire site into AMP, Transitional mode creates AMP versions of all pages alongside the originals, and Reader mode creates AMP versions only for posts. For most sites we recommend Transitional mode because it allows gradual migration. After installation, the plugin automatically generates AMP versions of your pages and adds the necessary meta tags to link them with the original pages.

AMP for WP plugin

AMP for WP is an alternative plugin with more design customization options. It offers over 10 built-in AMP page themes, WooCommerce support, integration with popular SEO plugins like Yoast and Rank Math, as well as advanced ad options. The free version covers basic needs, while the Pro version adds custom AMP templates, Contact Form 7 support, and advanced analytics. If the visual identity of your AMP pages matters, this plugin offers more flexibility compared to the official plugin.

Manual configuration

For complete control over AMP implementation, you can create custom AMP templates in your WordPress theme. Create separate template files that generate valid AMP HTML. Use WordPress hooks to add canonical links between AMP and non-AMP versions. This approach requires more technical knowledge but gives you complete control over the appearance and behavior of AMP pages. We recommend it only for advanced developers with specific requirements plugins can't meet.

Testing and validating AMP pages

AMP Validator

Google offers several tools for validating AMP pages. The AMP Validator at validator.ampproject.org is an online tool where you enter a URL or HTML code and get detailed error information. Chrome DevTools has built-in AMP validation - add #development=1 to the end of the AMP URL and open the console to see errors. The AMP Test Tool in Google Search Console shows how Google sees your AMP pages and identifies issues that may prevent indexing. Always validate every AMP page before publishing because invalid AMP pages won't be cached or shown with the AMP tag in search.

Common errors

The most common errors in AMP implementation include using disallowed HTML tags instead of AMP equivalents, CSS exceeding the 75KB limit, inline styles with the important declaration which is disallowed in AMP, disallowed JavaScript in the page body, images without declared dimensions, and forms without an AMP action endpoint. The validator clearly points to each error with a description and code line, making correction easier.

AMP and SEO

Impact on ranking

AMP itself isn't a direct ranking factor in Google search. However, AMP indirectly improves SEO because it drastically reduces load time, which is a ranking factor, improves Core Web Vitals metrics, reduces bounce rate because users don't wait for loading, and increases user engagement, which sends positive signals to Google. AMP pages used to be displayed in a special carousel at the top of mobile search, but since 2021 non-AMP pages can also be displayed in this section. Still, AMP pages have an edge in delivery speed thanks to AMP Cache.

Canonical links

Proper canonical link placement is key for AMP SEO. Every AMP page must have a link rel canonical pointing to the original non-AMP version of the page. The original page must have a link rel amphtml pointing to the AMP version. If you use Standard mode where the entire site is AMP, the canonical link points to itself. This ensures Google correctly indexes and connects both page versions without duplicate content issues.

Alternatives to AMP

AMP isn't the only way to achieve fast mobile pages. Modern web optimization with a Core Web Vitals focus can achieve similar results without AMP restrictions. Lazy loading of images and videos, efficient CSS and JS management, using a CDN, server optimization, and modern images in WebP and AVIF formats can dramatically speed up a site. Next.js, Gatsby, and similar frameworks generate extremely fast pages without AMP. Consider AMP if your priority is Google News visibility or you have a site with predominantly static content. For complex web applications with a lot of interactivity, standard optimization is a better choice.

Conclusion

AMP can be a powerful tool for speeding up a mobile site, especially for sites with mostly text content like blogs, news portals, and informational sites. Implementation via WordPress plugins is relatively simple and can bring significant improvement to mobile experience. However, AMP isn't a universal solution - limitations in JavaScript and design can be problematic for complex sites. At BeoHosting our servers are optimized for both AMP and standard pages, with fast SSD storage and a LiteSpeed web server that delivers exceptional performance regardless of the approach you choose.