In old days, publishers were worried about their website speed in desktop only, but now they worry about their website speed in mobile and tablets.The reason being, now smartphones and tablets have become the king of browsing traffic. According to Google data, the share of mobile web browsing traffic expends to 52.3%.
Use of external js files and high-quality images make mobile speed slower. If the mobile browser pages are not loading quickly, it can discourage users and they can leave even before your content is completely loaded. So It is good to optimize your web pages for mobile users.
As mobile browsing is increasing day by day, Google provided a solution to the publishers for their mobile website problems by launching Project AMP, or Amp Mobile Pages. In short AMP Website was created so that publishers can load their amp web pages more quickly and fast in mobile devices.
WHAT IS AMP?
Accelerated Mobile Pages (AMP) is an open source project powered by Google which helps publishers and web developers to create mobile friendly and mobile optimized web pages which load instantly.
HOW AMP WORKS?
AMP is a framework for creating mobile web pages. It basically consists of three parts::
AMP HTML Code is new markup language inherited from parent language HTML with many custom tags and properties like amp-i frame, amp-script, amp-images etc. if you are familiar with HTML then you are ready to go converting your web page into Google AMP pages with AMP HTML. For more details of amp tags, you can check AMP Project’s list.
A Content Delivery Network caches your AMP pages and automatically make some performance optimizations.
HOW ARE AMP PAGES LOADING SO FASTS?
7 important ways by which AMP making page load so fast are as follows :
- It executes all JS code asynchronously to avoid delaying page rendering. Amp blocks author-written java-script and provides its own java-script to handle page features. Third-party JS likes to use synchronous JS loading. Third party java-script is allowed in the i frame by restricting them to i frames, they can’t block the execution of the main page.
- In AMP, it is important to state the sizes of external resources such as images, ads or iframes in the HTML so that it can measure each resources size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.
- In Google AMP pages, only inline styles are allowed. By this, it removes multiple external CSS and style files HTTP requests from the rendering path compared to most web pages.
- AMP accelerated mobile pages controls all resource downloads: it prioritizes resource loading, loading only what’s needed, and use lazy-loading method to download resources. It optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if users are going to scroll the page.
- AMP Sites doesn’t let extension mechanisms block page rendering. AMP supports extensions like lightboxes, Instagram embeds, tweets, etc. While these require additional HTTP requests, but those requests do not block page layout and rendering.
- Web fonts are super large, so web font optimization is crucial to performance. The AMP system declares zero HTTP requests until fonts start downloading. This is only possible because all JS in AMP has the async attribute and only inline style sheets are allowed; there are no HTTP requests blocking the browser from downloading fonts.
- The new connect API is used to ensure HTTP requests are as fast as possible when they are made. With this, a page can be rendered before the user explicitly states they’d like to navigate to it; the page might already be available by the time the user actually selects it, leading to instant loading.
In our next Blogs, we will tell you about how does AMP impact SEO, How to use AMP pages.
very nice article, keep up the good work