{"id":16353,"date":"2019-06-18T12:31:04","date_gmt":"2019-06-18T19:31:04","guid":{"rendered":"https:\/\/www.primeview.com\/?p=16353"},"modified":"2019-07-24T16:02:54","modified_gmt":"2019-07-24T23:02:54","slug":"why-you-should-use-amp-accelerated-mobile-pages","status":"publish","type":"post","link":"https:\/\/www.primeview.com\/blog\/why-you-should-use-amp-accelerated-mobile-pages\/","title":{"rendered":"Why You Should Use AMP (Accelerated Mobile Pages)"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-16357\" src=\"https:\/\/www.primeview.com\/wp-content\/uploads\/pv-amparticle1.jpg\" alt=\"\" width=\"800\" height=\"530\" title=\"\"><\/p>\n<p>We all know how important mobile is nowadays, at least you should. Here are just a few statistics to highlight this.<\/p>\n<ul>\n<li>4 out of 5 consumers use smartphones to shop. (Source: Convince&amp;Convert)<\/li>\n<li>In 2018, mobile ad spends worldwide came to $138.1 billion and could reach 212.4 billion by 2021. (Source: Statista)<\/li>\n<li>In January 2019, there were 3.986 billion unique active mobile internet users. (Source: Statista)<\/li>\n<\/ul>\n<p>You can see why it is so important nowadays to have a mobile responsive website to deliver your message to the most consumers. (Learn more read, <strong><a href=\"https:\/\/www.primeview.com\/blog\/mobile-friendly-websites-spell-seo-success\/\">Why Mobile-friendly Websites Spell SEO Success<\/a>.)<\/strong><\/p>\n<p>More than just being mobile responsive though, your content needs to load fast. Page speed is an important ranking factor, and if your website doesn\u2019t load fast, visitors will bounce right off. 40% abandon the site if their wait exceeds three seconds. This is true for PC and Mobile devices.<\/p>\n<p>Mobile operating systems, CPUs and graphics processing are smaller than on desktop. Getting your content to load fast on mobile so visitors stay and you can get conversions requires minimizing the amount of scripts and data. This is why you should\u00a0use AMP\u00a0\u2013\u00a0Accelerated Mobile Pages.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-16361\" src=\"https:\/\/www.primeview.com\/wp-content\/uploads\/business-1839876_1280-1024x682.jpg\" alt=\"AMP HTML\" width=\"1024\" height=\"682\" title=\"\" srcset=\"https:\/\/www.primeview.com\/wp-content\/uploads\/business-1839876_1280-1024x682.jpg 1024w, https:\/\/www.primeview.com\/wp-content\/uploads\/business-1839876_1280-300x200.jpg 300w, https:\/\/www.primeview.com\/wp-content\/uploads\/business-1839876_1280-768x512.jpg 768w, https:\/\/www.primeview.com\/wp-content\/uploads\/business-1839876_1280.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"color: #000000;\"><strong>What is AMP?<\/strong><\/span><\/p>\n<p>AMP is an open source web component framework and a website publishing technology developed by Google which provides fast loading web content. Basically, it is a stripped-down form of HTML (Hyper Text Markup Language), the code used to create a website with certain limitations.<\/p>\n<p>The Google AMP framework consists of three components:<\/p>\n<ol>\n<li>AMP HTML: A redesigned version of HTML with a new set of custom AMP commands.<\/li>\n<li>AMP JS: A new JavaScript structure for mobile pages that allows all loading of external resources one by one (asynchronous).<\/li>\n<li>AMP CDN (Content Delivery Network): This takes AMP-optimized content and caches, serves and validates AMP pages for fast delivery. Referred to as AMP-Cache.<\/li>\n<\/ol>\n<p>Even with this stripped-down functionality, content such as images and videos can still be published on AMP pages by caching them to Google. Instead of embedding images and videos on your website, which slows load time, the AMP CDN serves this content via Google. The image or video content will still appear on your page, but the source links back to Google\u2019s copy of it, allowing your page to load faster.<\/p>\n<p>Caches are a fundamental part of the Accelerated Mobile Pages. There are also currently\u00a02 other AMP Cache providers, CloudFlare AMP Cache, and Bing AMP Cache. As a publisher, you don\u2019t choose an AMP Cache, the platform which links to your content chooses the AMP Cache to use.<\/p>\n<p>Google likes it when you use AMP because it likes speed. As mentioned, page speed is an important ranking factor. Google reports that AMP pages served in Google search typically load in less than one second and use ten times less data than the equivalent non-AMP pages. CNBC reported a 75% decrease in mobile page load time for AMP Pages over non-AMP pages, while Gizmodo reported that AMP pages loaded three times faster than non-AMP pages.<\/p>\n<p>AMP allows you to repurpose content to match the device it\u2019s being served on. You can have two versions of your content: one version for desktop, and one for mobile. Each version delivers the most efficient experience for users based on the device they\u2019re using. You can have a regular desktop version of a page and in the source code you have an AMP version you designate with the rel AMP HTML link (&lt;link rel=&#8221;amphtml&#8221;), which points over to a hosted AMP page. While AMP is designed with mobile responsiveness in mind, it will work across all screen sizes.<\/p>\n<p><strong>AMP can be used to build:<\/strong><\/p>\n<ul>\n<li>AMP Websites &#8211; enables the creation of websites that are consistently fast and high-performing across devices and distribution platforms.<\/li>\n<li>AMP Stories &#8211; provides content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories.<\/li>\n<li>AMP Ads &#8211; a faster, lighter and more secure way to advertise on the web.<\/li>\n<li>AMP Email &#8211; allows email marketers to embed the interactive elements like carousels, accordions, confirmation, purchase buttons, etc., into the emails without opening a new tab to visit a website.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-16367\" src=\"https:\/\/www.primeview.com\/wp-content\/uploads\/AMP-MOBILE-SEO.jpg\" alt=\"AMP MOBILE SEO\" width=\"624\" height=\"344\" title=\"\" srcset=\"https:\/\/www.primeview.com\/wp-content\/uploads\/AMP-MOBILE-SEO.jpg 624w, https:\/\/www.primeview.com\/wp-content\/uploads\/AMP-MOBILE-SEO-300x165.jpg 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p><strong>Accelerate your <a href=\"https:\/\/www.primeview.com\/digital-marketing\/seo\/\">SEO<\/a> and Sales<\/strong><\/p>\n<p>There are two main benefits of AMP for SEO. One is pages making use of AMP coding appear in special places in search results and\/or with a special \u201cAMP\u201d designation. This leads people to click on your page more often because they know it is fast. The other benefit is that it\u2019s a ranking factor.<\/p>\n<p>Google-sponsored research shows that AMP leads to an average of a 2X increase in time spent on a page. The data also shows e-commerce sites experience an average 20 percent increase in sales conversions compared to non-AMP web pages.<\/p>\n<p><strong>How does AMP make pages load so fast?<\/strong><\/p>\n<p>AMP makes your pages fast, to the point\u00a0where their load time feels almost instant. But how does AMP do it? How does AMP get to that high speed?<\/p>\n<p>First, you need to understand that your webpages use these 3 programming languages:<\/p>\n<ol>\n<li>HTML to define the content of web pages<\/li>\n<li>CSS to specify the layout of web pages<\/li>\n<li>JavaScript to program the behavior of web pages<\/li>\n<\/ol>\n<p>Accelerated Mobile Pages have specific rules for using them. How they are used or not used is important. Our Arizona <a href=\"https:\/\/www.primeview.com\/\">web design firm<\/a> has developers who understand how to follow the AMP guidelines and best practices.<\/p>\n<p>AMP has seven features that enable it to create this super-fast loading time.<\/p>\n<ol>\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong>AMP never stops the load chain<\/strong>\u00a0<\/span><\/h3>\n<\/li>\n<\/ol>\n<p>Most websites include assets and scripts that are synchronously downloaded in the order specified and therefore block the rendering of the page. For example, a third-party ad, that appears between two blocks of content will stop the rest of the page from rendering until the ad is fully available.<\/p>\n<p>AMP solves this by making all of its own scripts and components load in parallel, at the same time by NOT allowing any custom JavaScript that could break those rules. Instead, interactive page behavior features are handled in custom AMP elements. The custom AMP elements may use JavaScript, but they\u2019re carefully designed to make sure they don\u2019t hurt performance.<\/p>\n<p>JavaScript can be used by IFrames,\u00a0an HTML element used to insert content from another source, such as an advertisement into the Web page. While third-party JS is allowed in IFrames, it still cannot block the main page from rendering.<\/p>\n<ol start=\"2\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong> Asset-Independent Layout<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>On a normal HTML page, the browser rarely knows what the layout will be before all assets are loaded. It won\u2019t know how much space it needs for assets such as pictures until they are fully loaded. It won\u2019t know if there is enough space for the rest of the content.<\/p>\n<p>In AMP, all external images, ads or IFrames must state their size in the HTML so that AMP can determine each element\u2019s size and position before the actual resource is loaded. AMP loads the layout of the page without waiting for any resources to download. Only one HTTP request is needed to lay out the entire document.<\/p>\n<ol start=\"3\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong> Inline size-bound CSS<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>CSS (Cascading Style Sheets)\u00a0is\u00a0used by programmers to specify the style of your webpages such as font color, size, and other elements. So they don\u2019t have to rewrite code every time some content is to be displayed, they call on a Style Sheet. However, CSS blocks all rendering and page load and is used a lot in the HTML. AMP pages allow only ONE inline style sheet with a maximum size of 50 kilobytes.<\/p>\n<ol start=\"4\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong> Large web fonts <\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>Web font optimization is crucial for performance. A browser will wait to download huge fonts until everything else is done. The AMP system requires zero HTTP requests until the font starts downloading.<\/p>\n<ol start=\"5\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong>Minimizing style and layout recalculations<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>Each time you measure or change something by a script on a page, the browser has to layout and recalculate the page, and these operations can get expensive in terms of load time. For example, two pictures are already loaded on the page. When the first picture is half-loaded, it\u2019s in one place. But when it\u2019s fully loaded, the content is pushed further down, so the browser doesn\u2019t know in advance what will happen to the layout of the page until all assets are loaded.<\/p>\n<p>With most web pages, multiple scripts do various dynamic actions at the same time,\u00a0causing many changes in the layout. Because AMP mediates all render operations, it intelligently combines readings and changes to minimize effort.<\/p>\n<ol start=\"6\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong> GPU (Graphics Processing Unit) accelerated animations<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>For a long time, your CPU (computer processor) did all the work to display a page in a browser. With advances in GPU\u2019s, they have become efficient at managing pixels. AMP offloads a lot of the visual work to the GPU, freeing up CPU cycles and make your page run faster.<\/p>\n<ol start=\"7\">\n<li>\n<h3><span style=\"color: #16a2cf;\"><strong> Prioritized resource loading<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>When AMP downloads resources, it optimizes downloads so the currently most important resources<strong>\u00a0<\/strong>are downloaded first. Images and ads are only downloaded if they\u2019re likely to be seen by the user above the fold or if the user is likely to quickly scroll through them. The key here is that resources\u00a0are loaded as late as possible, but pre-fetched as early as possible. That way, things load very fast, but precious CPU cycles are only used when resources are actually shown to users.<\/p>\n<h2><strong>Get Amped up<\/strong><\/h2>\n<p>With AMP you have faster load time leading to better engagement and reduced bounce rate, plus it improves mobile ranking. If you are looking for an SEO Company in Arizona that can code Accelerated Mobile Pages, PrimeView is at your service. <a href=\"https:\/\/www.primeview.com\/contact\/\">Contact us today<\/a> to get started!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We all know how important mobile is nowadays, at least you should. Here are just a few statistics to highlight [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":16357,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/single-post-full-width-banner-with-sidebar.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5,93],"tags":[],"class_list":["post-16353","post","type-post","status-publish","format-standard","hentry","category-blog","category-mobile-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/posts\/16353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/comments?post=16353"}],"version-history":[{"count":0,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/posts\/16353\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/media\/16357"}],"wp:attachment":[{"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/media?parent=16353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/categories?post=16353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.primeview.com\/wp-json\/wp\/v2\/tags?post=16353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}