{"id":5763,"date":"2021-10-15T12:23:44","date_gmt":"2021-10-15T17:23:44","guid":{"rendered":"https:\/\/giovanirodriguez.dev\/?p=5763"},"modified":"2022-06-08T17:32:47","modified_gmt":"2022-06-08T22:32:47","slug":"why-do-you-need-a-good-accelerated-mobile-page-amp","status":"publish","type":"post","link":"https:\/\/giovanirodriguez.dev\/why-do-you-need-a-good-accelerated-mobile-page-amp\/","title":{"rendered":"Why do you need a good accelerated mobile page (AMP)?"},"content":{"rendered":"\n<p>Web activity on mobile has steadily overtaken that on desktop. This change has been gradual but has been substantial. In fact, mobile usage accounts for more than 50% of all Internet traffic, overtaking desktop usage at 45% as of 2018.<\/p>\n\n\n\n<p>Google's desire to optimize websites for mobile browsing prompted them to build the Accelerated Mobile Page (AMP) project, an open-source initiative to improve the performance of websites.<\/p>\n\n\n\n<p>An AMP is a content page that uses a very specific framework based on existing HTML so that information can be exchanged with browsers more efficiently, resulting in a seamless, faster, and more reliable experience. The result is nearly instantaneous loading of web pages.<\/p>\n\n\n\n<p>It works perfectly with all currently available browsers and integrates flawlessly with content management platforms (CMS) such as WordPress and Drupal, making it a <a href=\"https:\/\/www.simplemachinesmarketing.com\/blog\/do-small-businesses-need-to-worry-about-accelerated-mobile-pages-amp\/#:~:text=In%20the%20spirit%20of%20AMP,small%20business%20should%20use%20AMP.\">viable alternative for businesses seeking to make their websites mobile-friendly<\/a>. It is completely free and developed by a large community of professionals.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>In light of the widespread use of smartphones, switching to an AMP (accelerated mobile page) for your website will drastically improve traffic levels and visitor retention.<\/p>\n\n\n\n<p>AMPs should be implemented by 2021 for these reasons:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. <a href=\"https:\/\/www.crazyegg.com\/blog\/speed-up-your-website\/\">Quicker loading<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584438784894-089d6a62b8fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Person using their cell phone. On an accelerated mobile page (amp) it is possible to use different text boxes.\"\/><\/figure>\n\n\n\n<p>Speed is the key to an accelerated mobile page. To make sure mobile pages load at optimal speeds, we designed the entire project to be responsive to the demands of mobile users. It follows then that some of the more complex pieces of back-end coding had to be cut back to make the system more efficient.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">An AMP can make a page load faster&nbsp;<\/h2>\n\n\n\n<p>There are several reasons why content rendering doesn't stop. Normally, the browser will render each part of a page in order, following the loading order specified in the underlying code. This means that the next article won't be displayed until certain loading requirements are met. Third-party scripts (such as ads) could, for example, stall the entire rendering process by taking too long to load. The result is a slower process.<\/p>\n\n\n\n<p>This problem is fixed with AMP's parallel rendering by making all its own components load simultaneously while not allowing any script that could restrict it. Custom AMP elements will take care of all the interactive components on the page without affecting performance.<\/p>\n\n\n\n<p>You can still use Javascript on your pages, however. While AMP (accelerated mobile page) provides many opportunities for dynamic and interactive content, such techniques should be handled carefully.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Layout that does not depend on any particular asset. A browser needs to load all assets on the page before it can see how it will look. Layouts often include images, media elements, and scripts that must be loaded first so the size and effect of the content can be evaluated.&nbsp;<\/li><li>As the HTML for AMP explains, these elements are all handled in HTML, so even before they load, the browser can already assemble the layout because the size has already been determined. Pages may be loaded at once using static layouting without having to load resources first.<\/li><li>The CSS is inline and size-bound.&nbsp; There can be only one stylesheet in an AMP. CSS limits the number of HTTP requests, which speeds up the process. In addition, the CSS size is limited to 50 kilobytes, so we get a nice degree of design while still forcing developers to write efficient and clean code.<\/li><li>Optimize the font. The rather large fonts used on webpages are usually downloaded after all the other items have loaded. A maximum of one HTTP request is required until the font is downloaded because an AMP limits CSS and use of external scripts.<\/li><\/ul>\n\n\n\n<p>Recalculation of layout and style was minimal. As mentioned, dynamic scripts on standard websites can affect how the page layout looks, as well as change the layout depending on what interactions the user makes. This forces the browser to recalculate how the content will be displayed. This sort of calculation is minimized by the limitations of the AMP framework.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1615494488092-b13b68fe0eb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Samsung on a mobile page.\"\/><\/figure>\n\n\n\n<p>Acceleration of images using CPUs and GPUs. CPUs use layers for rendering pages, and the media is then sent to GPUs (graphics cards) for further rendering. The only way to achieve faster load times with AMP is to use the GPU for imagery processing.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>Putting resources at the top of the priority list. As a result of AMP, popular resources are often displayed first. Because static layout allows for everything above the fold to be pre-fetched before loading, as well as resources predicted to be important. There essentially is no difference between the information when it is there and when it is rendered by the user.<\/p>\n\n\n\n<p>Speed is an important part of an AMP. In other words, performance comes before everything else. An AMP may require some time-consuming adjustments to your web design, but it can boost page speed tremendously. You might want to consider whether your mobile visitors would prefer a page that loads almost instantly instead of a page with all the bells and whistles you desired. As our mobile-friendly world becomes more prevalent, customer satisfaction might be more influenced by faster gratification.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Reduced bounce rate<\/h2>\n\n\n\n<p>Google research finds that not only do mobile users expect fast loading times, they also consider their expectations when choosing whether or not to stick around.<\/p>\n\n\n\n<p>Over 30% of visitors bounce after waiting up to three seconds for a page to load. In approximately five seconds, bounce raises reach a staggering 90%. A few seconds later, it exceeded 100%.<\/p>\n\n\n\n<p>The bottom line here is that mobile optimization is crucial to stay competitive in the market. This logic explains why mobile-friendly websites are crucial for businesses, given the mobile browsing market share. A company's mobile pages can set them apart from its competitors by making load times nearly instant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Improved flexibility and performance<\/h2>\n\n\n\n<p>In addition to an AMP, other frameworks improve the performance of mobile websites. Yet, because it is built around the idea that mobile users want their content immediately, it is by far the most flexible and the best performer in terms of speed.<\/p>\n\n\n\n<p>Although this should not mean that other solutions, such as responsive web design or progressive web apps, should be dismissed, it is worth pointing out just how important it may be to seriously consider this very feasible option.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">4. (AMP SEO) specialises in optimising search engines for mobile devices<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586329501141-c0a435d6c0bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Cell phone on YouTube, which has an accelerated mobile page (amp)\"\/><\/figure>\n\n\n\n<p>The performance of your website and its speed will certainly affect visitor retention and conversion, but it's also essential that you rank well in search engines to drive traffic to your website.<\/p>\n\n\n\n<p>Based on mobile browsing trends, Google supports the AMP Project, which means they attach a great deal of importance to this particular subject. Mobile-first indexing by Google was introduced in 2018, meaning that rankings are assigned based on how useful pages are for mobile users.<\/p>\n\n\n\n<p>In the modern digital marketing environment, the usual SEO best practices are not enough to ensure efficient SEO. Your company's website will rank higher on search results if you make the site mobile-friendly and optimize it by using Google's own framework.<\/p>\n\n\n\n<p>Rich results in the Top stories carousel, host carousel of visual stories, and rich results during mobile search can be displayed on pages with structured data. In addition to images, page logos, and other interesting features, this search can return interesting results as well.<\/p>\n\n\n\n<p>Of course, an <a href=\"https:\/\/medium.com\/@danbuben\/why-amp-is-bad-for-your-site-and-for-the-web-e4d060a4ff31#:~:text=Because%20AMP%20strips%20content%20down,appear%20right%20beside%20legitimate%20news.\">AMP has its shortcomings<\/a>. If your web design is too complex and contains dynamic elements, it may not be possible for you to duplicate it fully. A clever program can handle this problem, but creativity and patience will be required.<\/p>\n\n\n\n<p>As a result of its heavy reliance on cached information, the framework also does not automatically support Google Analytics tracking, but fortunately, this problem is easy to fix with readily available solutions.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>While these can be valid arguments against an AMP, the simple fact is that users are now much more inclined to favor speed over all other attributes, so it may very well be best to choose pragmatism over aesthetics as a means to balance things out.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1458748600212-a4c65493cbfd?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Person taking pictures on two cell phones. They usually upload these photos to a mobile page.\"\/><\/figure>\n\n\n\n<p>Web design should include mobile compatibility. Your business will benefit from an accelerated mobile page (AMP), not only because it keeps you up to date with trends, but it will also help you stay ahead of other businesses.<\/p>\n\n\n\n<p>You can read some other blogs right here:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/giovanirodriguez.dev\/copywriting-convert-your-visits-into-clients-through-text\/\">Copywriting: Convert your visits into clients through text<\/a><\/li><li><a href=\"https:\/\/giovanirodriguez.dev\/google-ads-vs-facebook-ads-invest-in-cost-per-click-cpc\/\">Google ads vs Facebook ads | Invest in Cost Per Click (CPC)<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Web design should include mobile compatibility. Your business will benefit from an accelerated mobile page (AMP), not only because it keeps you up to date with trends, but it will also help you stay ahead of other businesses. Check if this apply to you.<\/p>\n","protected":false},"author":6,"featured_media":5761,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[333],"tags":[321,433],"class_list":["post-5763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-tools","tag-web-hosting"],"_links":{"self":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/5763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/comments?post=5763"}],"version-history":[{"count":1,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/5763\/revisions"}],"predecessor-version":[{"id":6668,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/5763\/revisions\/6668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media\/5761"}],"wp:attachment":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media?parent=5763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/categories?post=5763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/tags?post=5763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}