{"id":933,"date":"2017-02-01T11:52:51","date_gmt":"2017-02-01T06:22:51","guid":{"rendered":"http:\/\/www.idslogic.com\/blog\/?p=933"},"modified":"2025-02-26T13:06:09","modified_gmt":"2025-02-26T07:36:09","slug":"how-accelerated-mobile-pages-ensure-faster-mobile-web","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/how-accelerated-mobile-pages-ensure-faster-mobile-web","title":{"rendered":"How Accelerated Mobile Pages Ensure Faster Mobile Web?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/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:\/\/www.idslogic.com\/blog\/how-accelerated-mobile-pages-ensure-faster-mobile-web\/#Understanding_AMP\" title=\"Understanding AMP\">Understanding 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:\/\/www.idslogic.com\/blog\/how-accelerated-mobile-pages-ensure-faster-mobile-web\/#How_does_AMP_work\" title=\"How does AMP work?\">How does AMP work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.idslogic.com\/blog\/how-accelerated-mobile-pages-ensure-faster-mobile-web\/#Getting_started_with_AMP_for_your_site\" title=\"Getting started with AMP for your site\">Getting started with AMP for your site<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-size: 14pt;\">With smartphones and tablets revolutionizing the way people access information and at the same time people gaining a tremendous amount of news on their handheld devices, publishers from all over the world are trying to reach out to the audience by using mobile web. But the user experience may often leave many things to be desired.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">You must have observed that every time a web page loads, there are pop up advertisements or subscription forms that may make the site load slow. The visitor may lose interest and abandon the site for some other alternative. Website owners and advertisers lose a visitor and also an opportunity to earn revenue through advertisements if the site is slow.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">So, it is very important to find a solution to this challenge so that business owners and publishers are able to generate revenues from their mobile website.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Understanding_AMP\"><\/span><span style=\"font-size: 18pt; color: #008000;\">Understanding AMP<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">To address this issue, Google has announced a new open source initiative, which is known as Accelerated Mobile pages (AMP) project that enables the publisher to create mobile optimized content once and get it loaded instantly everywhere. AMP aims to dramatically improve the performance of the site so that web pages with rich content like animations, graphics and videos can operate alongside smart ads and even load promptly without sacrificing the ad revenue that business owners may rely upon.<\/span><\/p>\n<div style=\"margin: 40px auto; border: 2px solid #065beb; padding: 20px 25px; border-radius: 6px; background: 0;\">\n<div style=\"display: inline-block; vertical-align: middle; width: 62%;\"><span style=\"font-size: 14pt;\"><strong>Are You Looking to Hire Dedicated Mobile App Developers?<\/strong><\/span><\/div>\n<div style=\"display: inline-block; vertical-align: middle; width: 36%;\"><span style=\"font-size: 14pt;\"><a style=\"padding: 10px 22px; margin-bottom: 0; line-height: 1.3em; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; color: #ffffff; background-color: #065beb; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; display: block;\" href=\"https:\/\/www.idslogic.com\/dedicated-mobile-app-developer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Call us today!<\/a><\/span><\/div>\n<\/div>\n<p><span style=\"font-size: 14pt;\">Though experienced developers may attain similar results through intensive performance optimizations, website owners often neglect it due to resource constraints. But with AMP these optimizations can easily be attained without affecting the primary mobile web experience. Today various publishers and technology companies\u00a0 like Twitter, WordPress.com, Chartbeat, Adobe Analytics and LinkedIn have come together to offer a better experience for everyone by making the mobile web work properly.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"How_does_AMP_work\"><\/span><span style=\"font-size: 14pt;\"><span style=\"color: #003366;\">How does AMP work?<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\"><em>The framework consists of three basic parts:<\/em><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><span style=\"color: #800000;\"><strong>AMP HTML<\/strong>:<\/span> This is a subset of HTML and it has some customized tags and features. If you are familiar with regular HTML, then adapting the existing pages to AMP HTML will not be a difficult task. Though most of the tags in AMP HTML pages are regular HTML tags, some of the HTML tags are replaced with AMP specific tags. The customized elements called the AMP HTML components, make implementation of common patterns easy in a performant way.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-938\" src=\"http:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2017\/01\/HowdoesAMPwork.png\" alt=\"How-does-AMP-work?\" width=\"621\" height=\"297\" srcset=\"https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2017\/01\/HowdoesAMPwork.png 621w, https:\/\/www.idslogic.com\/blog\/wp-content\/uploads\/2017\/01\/HowdoesAMPwork-300x143.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><span style=\"color: #800000;\"><strong>AMP JS<\/strong>:<\/span>\u00a0 This library implements all the AMP\u2019s best performance practices and helps to manage resource loading and also offers you the customized tags to ensure fast loading of your page. The most interesting thing is that it makes everything from the external resources asynchronous and so nothing in the page blocks anything from rendering. One thing that is to be noted is that any third party JavaScript is not permitted with AMP.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><strong>Also Read: <\/strong><span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/blog\/why-startups-smes-should-invest-in-android-app-development\">Why Startups &amp; SMEs Should Invest in Android App Development?<\/a><\/span><\/span><\/p>\n<\/blockquote>\n<p><span style=\"font-size: 14pt;\"><span style=\"color: #800000;\"><strong>AMP CDN<\/strong>:<\/span> This is a proxy based CDN that is used to deliver the AMP documents. It gets AMP HTML pages, caches them and then improves the page performance automatically. When Google AMP Cache is used, the document, JS files and the images load from the same origin that uses HTTP 2.0 for maximum efficiency.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Getting_started_with_AMP_for_your_site\"><\/span><span style=\"font-size: 14pt;\"><span style=\"color: #003366;\">Getting started with AMP for your site<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">For beginners, they will have to create at least two versions of their content page. The original version of the content page is the one that the users will see and the AMP version of that page. Since AMP doesn\u2019t allow form elements or any third party JavaScript, you won\u2019t be able to have on-page comments or lead forms or some other elements that you may be used to have on your page. You may have to rewrite the site template in order to accommodate any restrictions.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Multimedia should be especially handled for e.g. the images should utilize the custom amp-img element and it must also include the explicit height and width. In case your images are animated GIFs, then you may need to use amp-anim extended component. These extended components are not difficult to use, but they simply need some planning in your site design.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">The increased usage of ad blockers has made it a challenging task for the publisher to display ads on their site and monetize their websites. AMP pages now ensure effective ad monetization on <strong><a href=\"\/mobile-apps\/\">mobile web<\/a><\/strong> and adopt a user-centric approach. The prime objective is to offer support to the range of ad formats, technologies and ad networks in AMPs.<\/span><\/p>\n<p><span style=\"font-size: 14pt; color: #000000;\">Thus to conclude, we can say that the open nature of AMPs will offer free flow of information and ensure that mobile web works faster and better for the visitors everywhere.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><strong>Also Read: <\/strong><span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"\/blog\/everything-you-need-to-know-about-android-12-new-features\">Everything You Need to Know About Android 12 New Features<\/a><\/span><\/span><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>With smartphones and tablets revolutionizing the way people access information and at the same time people gaining a tremendous amount of news on their handheld devices, publishers from all over the world are trying to reach out to the audience&#8230;<\/p>\n","protected":false},"author":1,"featured_media":934,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[317,167,172,104],"tags":[332],"class_list":["post-933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-marketing","category-mobile-apps-development-india","category-technology","category-web-development","tag-accelerated-mobile-pages"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":7,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions"}],"predecessor-version":[{"id":11040,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions\/11040"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/934"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}