{"id":312,"date":"2020-06-16T22:24:19","date_gmt":"2020-06-16T22:24:19","guid":{"rendered":"https:\/\/helprocure.com\/blog\/?p=312"},"modified":"2021-08-21T23:30:25","modified_gmt":"2021-08-21T23:30:25","slug":"accelerate-mobile-pages-with-amp","status":"publish","type":"post","link":"https:\/\/helprocure.com\/blog\/accelerate-mobile-pages-with-amp\/","title":{"rendered":"Want to Rank Top on Google for SEO? Speed Up Mobile Pages with AMP!"},"content":{"rendered":"

Have you been wondering why the bounce rate<\/a> of your web pages, blog posts and articles keep getting high? A major reason is that your web pages aren\u2019t loading fast on mobile browsers. That is, they are not amp pages. Hence, you need to speed up your mobile pages with Accelerated Mobile Pages (AMP).<\/span><\/p>\n

\u00a0<\/span><\/p>\n

It is no more news that many online searches and internet related activities are being carried out using mobile devices more than desktop computers. Thus, speed is an important part of designing and developing web pages today.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

According to SocialMediaToday<\/a>, “53% of mobile website visits are being abandoned because they take more than 3 seconds to load<\/em>“.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

\"socialmediatoday<\/p>\n

This is why it is a priority for web designers and publishers to speed up mobile pages with the AMP framework. If not for any other reason, but because it will provide a better experience for your users and it will greatly enhance search engine optimization (SEO) for your site.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

In a nutshell, pages that are AMP-optimized rank better and faster and they most certainly convert more mobile page visitors into customers.<\/span><\/p>\n

\n

What is Accelerated<\/span> Mobile Pages (AMP)?<\/span><\/strong><\/h2>\n

\"what<\/p>\n

Accelerated Mobile Page (AMP) is a project from Google and Twitter designed to make mobile pages fast. It is a stripped-down form of HTML pages designed to be super lightweight and critically fast loading.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

It consists of certain HTML tags. That is, some HTML tags can\u2019t be used. You also need to use a light version of CSS. Then JavaScript is not allowed at all. Having in mind that pure speed and readability is to be attained and then all this is designed to be heavily cached so that Google can host these pages.<\/span><\/p>\n

\n

How accelerated mobile pages work?<\/span><\/strong><\/h2>\n

\"how<\/p>\n

According to the diagram above, we’re all used to a regular web page. This is labelled as \u201cBlog\u201d in the diagram. This is the regular desktop version of the page. In the source code, if you have an AMP version, you would specify that with the \u201crel\u201d AMP HTML link, which points to what we call the “hosted AMP page”.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

So, the hosted AMP page is a page on your domain constructed of a stripped-down form of HTML. If you want to see this in action, I’ve referenced Helprocure\u2019s Blog AMP Page<\/a> here. You can put \u201c\/amp\u201d at the end of any news story, post or article on a site and see the AMP HTML.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

It is linked in display with the AMP HTML link in the source code. So that’s the hosted accelerated mobile page, which has nothing to do with Google. You can just do that, and it is designed to be faster. Yet, Google also rolled out a free hosted cached platform as well, which is labelled with the static.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

So when you see these pages showing up in Google search results, the version that shows up there will be hosted on a gstatic.com, in other words, a Google-hosted cached version.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

And both of these, both the one you host yourself and the version that is cached around the Internet potentially even by other people as well, both of those would contain the rel=\u2019canonical\u2019 back to the original site\/web page.<\/span><\/p>\n

\u00a0<\/span><\/p>\n

Now, the mobile accelerated pages are fast because the HTML is cut down, but it’s also designed that they are bits of content that can be cached potentially by anyone without rel=canonical pointing back to you<\/span>.<\/span><\/p>\n

\n

Accelerated Mobile Pages vs Progressive Web Apps<\/span><\/strong><\/h2>\n

\"difference<\/p>\n