Accelerated Mobile Pages

How to Get Started with Accelerated Mobile Pages (AMP)

Google announced Accelerated Mobile Pages (AMP), a very accessible framework for creating fast-loading mobile web pages.

0 May 05, 2023

What Is AMP?

This past October, Google announced Accelerated Mobile Pages (AMP), a very accessible framework for creating fast-loading mobile web pages. The open-source initiative is designed to enable publishers to easily improve speed (and consequently, the user experience) for their mobile readership without sacrificing any ad revenue that they may rely upon. Although experienced developers can often achieve similar results through intensive performance optimizations, publishers often neglect this due to resource constraints. AMP allows these optimizations to be easily achieved without altering the primary mobile web experience. There’s also the added benefit of its future usage by Google and other prominent web technology companies, who are encouraging its use by integrating it heavily into their respective platforms.

How Does AMP Work?

Essentially a framework for creating mobile web pages, AMP consists of three basic parts:

AMP HTML:A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML. For more details on how it differs from basic HTML, check out AMP Project’s list of required markup that your AMP HTML page “must” have.
AMP JS:A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
AMP CDN:An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

How Will You AMP Your Site?

For starters, you will have to maintain at least two versions of any article page: The original version of your article page that users will typically see, and the AMP version of that page. Since AMP doesn’t permit things such as form elements and third-party JavaScript, you likely will not be able to have lead forms, on-page comments and some other elements you may be used to having on your page in a standard implementation. It is also likely that you will have to rewrite your site template to accommodate the restrictions. For example, all CSS in AMP must be in-line and be less than 50KB. Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension, in order to better control that loading. Multimedia must be handled specially. For example, images need to utilize the custom amp-img element and must include an explicit width and height. Like images, there is a custom tag that must be used to embed locally hosted videos via HTML5, called amp-video. For embedding YouTube video, however — which the majority of web videos are — there is a separate extended component, amp-youtube. There is also support for things such as slideshows via amp-carousel and image lightboxes via amp-image-lightbox, as well social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine via their own extended components. These tag and extended components aren’t difficult to use; they just require some planning in your site design. In order for Google (and other technologies supporting the AMP Project) to detect the AMP version of your article, you will need to modify the original version of the article page. The original article page must include the following tag, essentially a canonical tag for AMP pages: <link rel="amphtml" href="http://www.example.com/blog-post/amp/"> The AMP Discovery page also mentions that some platforms that support AMP will require Schema.org meta data to specify the content type of the page. (Currently, “article,” “recipe,” “review” and “video” are listed as page type examples on GitHub.) Moreover, it also indicates that Schema.org meta data “is a requirement to make your content eligible to appear in the demo of the Google Search news carousel.” So if you’re trying to get a future benefit from Google by implementing AMP, make sure you get your schema right!

More like this one

How to Audit Your Business Website for Better Lead Generation

A business website is often the first point of contact between a brand and a potential customer. When visitors land on a site, they quickly decide whether they will stay, explore, or leave. Many businesses invest time and money to build a website, but very few review its performance from a lead generation perspective. A […]

Trends Digital Marketing Agency In Kolkata Follows In 2024

The digital marketing industry is ever-evolving. Moreover, with more and more users getting into various digital platforms, marketing a business through online platforms has turned effective. Hence, it is always important for the digital marketing agency in Kolkata to stay updated with the latest trends in this industry. The traditional methods of promoting a business […]

Why We Are The Best Social Media Marketing Company in Kolkata?

Do you know what makes an organization the best social media marketing company in Kolkata? There are numerous organizations in this field trying to establish themselves as the best. But do you know what distinguishes us from the rest? Most importantly, in the vibrant and dynamic competitive era, businesses are constantly seeking ways to stand […]