{"id":972,"date":"2017-09-20T11:53:34","date_gmt":"2017-09-20T11:53:34","guid":{"rendered":"https:\/\/www.nvecta.com\/blog\/?p=972"},"modified":"2022-06-24T13:24:54","modified_gmt":"2022-06-24T13:24:54","slug":"accelerated-mobile-pages-explained","status":"publish","type":"post","link":"https:\/\/blog.nvecta.com\/blog\/accelerated-mobile-pages-explained\/","title":{"rendered":"Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development"},"content":{"rendered":"<p><a href=\"https:\/\/www.nvecta.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-10403 size-full\" src=\"https:\/\/www.nvecta.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg\" alt=\"amp-accelerated-mobile-pages\" width=\"800\" height=\"450\" srcset=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 800w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 300w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 768w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 370w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 270w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-accelerated-mobile-pages1.jpg 740w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">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.<\/span>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%.<!--more--><\/p>\n<p><span style=\"font-weight: 400;\">Use of external js files and high-quality&nbsp;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 <\/span><span style=\"font-weight: 400;\">It is good to<\/span> <span style=\"font-weight: 400;\">optimize your web pages for mobile users.<\/span><\/p>\n<p>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.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.nvecta.com\/blog\/accelerated-mobile-pages-explained\/#WHAT_IS_AMP\" >WHAT IS AMP?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.nvecta.com\/blog\/accelerated-mobile-pages-explained\/#HOW_AMP_WORKS\" >HOW AMP WORKS?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.nvecta.com\/blog\/accelerated-mobile-pages-explained\/#HOW_ARE_AMP_PAGES_LOADING_SO_FASTS\" >HOW ARE AMP PAGES LOADING SO FASTS?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"WHAT_IS_AMP\"><\/span><b>WHAT IS AMP?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> The main concept of Accelerated Mobile Pages (AMP) is to load readable text content in web page first and then load additional content like images, ads, scripts after the remainder of the page has rendered. Accelerated Mobile Pages (AMP Google) blocks external and unwanted JavaScript code to load web page near-instantaneously.&nbsp; <span style=\"color: #ff0000;\">To Know More<\/span>&nbsp;<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/www.notifyvisitors.com\/product\/amp-accelerated-mobile-pages\" data-wplink-edit=\"true\" target=\"_blank\" rel=\"noopener\">Advantages of Accelerated Mobile Pages<\/a><\/span><\/span><\/p>\n<p><\/p>\n<h3><span class=\"ez-toc-section\" id=\"HOW_AMP_WORKS\"><\/span><b>HOW AMP WORKS?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div style=\"background: #eaeaea; border-left: 4px solid #4CAF50;\">\n<p style=\"padding: 15px;\">AMP is a framework for creating mobile web pages. It basically consists of three parts::<\/p>\n<\/div>\n<p><b>AMP HTML<\/b><\/p>\n<p><span style=\"font-weight: 400;\">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 &nbsp;AMP HTML. For more details of amp tags, you can check &nbsp;AMP Project\u2019s list.<\/span><\/p>\n<p><b>AMP JS<\/b><\/p>\n<p><span style=\"font-weight: 400;\">It is a JavaScript framework for mobile web pages, An important function is to manage resource handling and asynchronous loading of page content. But you can not use third party java-script file or your own custom java-script code in AMP framework because it is not permitted.<\/span><\/p>\n<p><b>AMP CDN<\/b><\/p>\n<p><span style=\"font-weight: 400;\">A Content Delivery Network caches your AMP &nbsp;pages and automatically make some performance optimizations.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"HOW_ARE_AMP_PAGES_LOADING_SO_FASTS\"><\/span><b>HOW ARE AMP PAGES LOADING SO FASTS?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/www.nvecta.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-10404 size-full\" src=\"https:\/\/www.nvecta.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg\" alt=\"amp-pages-loading-fast\" width=\"800\" height=\"450\" srcset=\"https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 800w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 300w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 768w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 370w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 270w, https:\/\/cdn3.notifyvisitors.com\/blog\/wp-content\/uploads\/2017\/09\/amp-pages-loading-fast1.jpg 740w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p><\/p>\n<div style=\"background: #eaeaea; border-left: 4px solid #4CAF50;\">\n<p style=\"padding: 15px;\">7 important ways by which AMP making page load so fast are as follows :<\/p>\n<\/div>\n<ul>\n<li><span style=\"font-weight: 400;\">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. <\/span><span style=\"font-weight: 400;\">Third-party JS likes to use synchronous JS loading. <\/span><span style=\"font-weight: 400;\">Third party java-script is allowed in the i frame <\/span><span style=\"font-weight: 400;\">by restricting them to i frames, they can\u2019t block the execution of the main page.<\/span><\/li>\n<\/ul>\n<ul>\n<li>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.<\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">In Google AMP &nbsp;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.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">AMP accelerated mobile pages controls all resource downloads: it prioritizes resource loading, loading only what\u2019s 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.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">AMP Sites doesn\u2019t let extension mechanisms block page rendering. AMP supports extensions like <\/span><span style=\"font-weight: 400;\">lightboxes<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">Instagram embeds<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">tweets<\/span><span style=\"font-weight: 400;\">, etc. While these require additional HTTP requests, but those requests do not block page layout and <\/span><span style=\"font-weight: 400;\">rendering.<\/span><\/li>\n<\/ul>\n<ul>\n<li><span style=\"font-weight: 400;\">Web fonts are super large, so <\/span><span style=\"font-weight: 400;\">web font optimization<\/span><span style=\"font-weight: 400;\"> 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.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">The new <\/span><span style=\"font-weight: 400;\">connect API<\/span><span style=\"font-weight: 400;\"> 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\u2019d like to navigate to it; the page might already be available by the time the user actually selects it, leading to instant loading.<\/span><span style=\"font-weight: 400;\"><br><\/span><span style=\"font-weight: 400;\">&nbsp;<\/span><\/li>\n<\/ul>\n<div style=\"background: #e7f3fe; border-left: 4px solid #4CAF50;\">\n<p style=\"padding: 15px;\">In our next Blogs, we will tell you about how does <strong><a href=\"https:\/\/www.nvecta.com\/blog\/how-does-amp-pages-impact-seo\/\" target=\"_blank\" rel=\"noopener\">AMP impact SEO<\/a><\/strong>, How to use AMP pages.<\/p>\n<\/div>\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-background\" href=\"https:\/\/www.notifyvisitors.com\/product\/amp-accelerated-mobile-pages?ss=blog-accelerated-mobile-pages-explained\" style=\"background-color:#f8862c\" target=\"_blank\" rel=\"noopener\">Let&#8217;s Start AMP<\/a><\/div>\n\n\n\n<p>Also Read:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.nvecta.com\/blog\/how-to-enable-ads-on-amp-pages\" target=\"_blank\" rel=\"noopener\">How to Enable Ads on AMP Pages?<\/a><\/li><li><a href=\"https:\/\/www.nvecta.com\/blog\/amp-development\/\" target=\"_blank\" rel=\"noopener\">AMP Development | A Complete Guide<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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%.<\/p>\n","protected":false},"author":5,"featured_media":7758,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[88,87,93,90,89,59,91,92],"class_list":["post-972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accelerated-mobile-pages","tag-accelerated-mobile-pages","tag-amp","tag-amp-development","tag-amp-html","tag-amp-mobile-pages","tag-amp-pages","tag-amp-web-pages","tag-what-is-an-amp"],"_links":{"self":[{"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/comments?post=972"}],"version-history":[{"count":23,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/972\/revisions"}],"predecessor-version":[{"id":10407,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/posts\/972\/revisions\/10407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/media\/7758"}],"wp:attachment":[{"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/media?parent=972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/categories?post=972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.nvecta.com\/blog\/wp-json\/wp\/v2\/tags?post=972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}