Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

 

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

What exactly is Google accelerated mobile pages (AMP)? Please, slow down a little as we will answer that question in just a moment.

When users access content from your mobile website, do the pages load instantly?

If it takes more than a couple of seconds for your mobile pages to load, it’s likely your users have already abandoned your site.

With more than half of all website traffic generated through mobile devices, a slow-loading mobile page can have an adverse impact on user experience, traffic volume and search engine rankings.

Mobile page speed has been a high priority for many webmasters since Google released a crucial update to their search algorithm in July of this year, marking the beginning of a new mobile-first search index.

The update has left many companies scrambling for an effective mobile solution that will allow them to retain their SERP rankings post-update.

Google AMP pages project was designed for just that.

So then…

What is AMP?

Developed by Google and backed by several large tech companies, such as Twitter, Google accelerated mobile pages – AMP is an open-source development framework, aimed at providing a better and faster mobile web experience.

Google AMP pages was created to apply a consistent standard among web pages and optimize content for any mobile device.

AMP accelerated mobile pages uses a simplified web page format designed specifically for mobile devices, which enables these pages to load dramatically faster than average HTML pages.

In fact, AMP pages open almost instantly.

Here is a sample screenshot of an AMP page from The Guardian.

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

If you were to visit this page from your browser, you will notice the page design is simple; lacking any advanced scripts, navigation or widgets.

Currently, Google, Twitter, LinkedIn, Reddit and Pinterest are among the high-profile companies using Google accelerated mobile pages (AMP).

In 2016, Google officially integrated AMP pages into its mobile search results.

By early 2018, Google began pushing for the AMP mobile pages technology framework to be added to web standards.

But the question you might want to ask is…

Is Google Accelerated Mobile Pages right for your mobile Website?

Many websites have successfully used Google accelerated mobile pages to speed up the load time of their mobile pages and vastly improve user experience.

However, it may not always be the right fit for hosting your amp mobile pages, and there are some things to consider prior to making the switch.

Websites using Google accelerated mobile pages are enjoying the following benefits:

  • Faster page load time (almost instantly)
  • Lower bounce rates
  • Higher mobile search rankings.

However, there are also some challenges to consider, including:

  • The inability to add certain features or widgets
  • Analytic platform restrictions (although Google Analytics is accepted)
  • A complicated process for inserting ads on your pages, and…
  • Difficulties switching back from AMP.

*Important Note* Before implementing Google accelerated mobile pages (AMP), make sure you understand the following implications of using this framework for your mobile pages.

Considerations for implementing AMP

  • AMP Improves Page Speed and Search Rankings

While AMP mobile pages is not an explicit factor in search rankings, Google’s update does prioritize web pages with minimal load times.

As a result, improving mobile page speed may show an improvement for a site’s overall rankings in mobile searches.

Accelerated mobile pages consists of modified HTML, JavaScript and cache libraries, which decreases load time for mobile pages, even if they contain video, audio, infographics or PDF documents.

Lighter coding enables the content to be stored within Google AMP Cache. The cache version enables content to be preloaded and instantly delivered to users.

Faster-loading websites are not only better for the user experience and SEO, speed can also impact your business’s bottom line.

Google-sponsored research shows an average 2X increase in time spent on a page, leading e-commerce sites to see an average of 20% increase in sales.

In another industry survey, the majority of users indicated they were more inclined to click on an AMP link.

Many businesses have seen positive results by using Google accelerated mobile pages.

Furniture retailer Zitmaxx Wonen reduced their typical load time to three seconds and conversion rates rose to 50.2%.

Overall revenue from the mobile site also increased by 99%.

In addition, Pinterest rebuilt pages for performance, which resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate.

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

  • Improves server performance

AMP strips away components which are available in standard HTML and JavaScript coding, enabling faster loading speed and improving server performance.

The Google accelerated mobile pages framework is made up of three parts:

    • AMP HTML: A leaner version of regular HTML with only certain tags allowed to be used. HTML elements such as forms are not allowed and are required to use a streamlined CSS.
    • AMP JS: AMP restricts the use of JavaScript to AMP-approved scripts. Instead AMP provides a library of components, which are easy to apply and enable you to create animations, load dynamic content and modify layout
    • AMP CDN: Also known as AMP Cache, the proxy-based content delivery network (CDN) caches AMP content for fast delivery. AMP CDN caches all valid AMP content.
  • Stylizing pages is limited

Accelerated mobile pages does limit certain web design elements that are available to developers, to ensure optimal performance.

The following touches on some of these established limitations.

Cascading Style Sheets (CSS) is used to style web pages written in markup language including font, color, spacing, formatting and layout.

Since the goal of AMP mobile pages is to create a uniform style for all sites, CSS is still important. However, some functionalities are removed to improve the loading speed.

These CSS limitations include:

  • Inline Style Attributes: Styles must be indicated in the header of the page using a custom AMP tag.
  • Important: It is important that Google AMP pages be able to enforce its sizing regulations on a webpage, and therefore usage of this is not allowed
  • <link rel=“stylesheet”>: against policy but custom fonts are allowed
  • * (universal selector): The universal selector is banned as it can evade other selector restrictions.
  • :not(): This can be used to imitate selectors.
  • Pseudo-Selectors: Tag names cannot start with amp-.
  • -amp- and -i-amp- tag names:  reserved for internal use only.
  • Behavior, -moz- binding: Not supported by Google AMP.

HTML tags are limited to a set of tags specific to the accelerated mobile pages framework, which creates some restrictions on HTML options.

Examples of code restrictions include: frame, embed and object.

JavaScript is used to create interactive elements such as quizzes, polls and light boxes.

In AMP, JavaScript is severely limited and does not allow custom or third-party code, JavaScript ads or JavaScript analytics packages.

Due to the restrictions that AMP places on JavaScript, you may want to consider if your site will require any functionality that relies heavily on JavaScript code.

In the following examples, you can see that this Audi dealer uses a live chat box within their mobile site:

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

 

And this as well…

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

Because implementing live chat boxes is typically accomplished using JavaScript, this is a great example of when the AMP pages framework may not be the best choice for your website.

  • Use a plugin when using a CMS such as WordPress

The ease of incorporating AMP pages on your site will vary depending on your content management system (CMS) and whether or not you elect to incorporate a plugin to assist with the implementation.

Plugins are easy to install and can quickly integrate into your site design to ensure AMP compatibility.

WordPress is the most widely used CMS in the market, and there are a number of plugins available to install.

First, you need to install the base WordPress AMP plugin, which will allow your posts to be AMP-compatible.  

Once you have the AMP plugin installed, you can layer on additional plugins in order to gain greater functionality.

  • WordPress AMP plugin can conflict with existing plugins

The base WordPress AMP plugin provides basic functionalities and ensures your posts are all AMP-compatible.

However, if your site uses other plugins for additional functionalities, conflicts between plugins can occur.

Generally, the plugin provider will work to find solutions to the conflicts, but this process can take some time.

In some cases, you may need to remove the conflicting plugin and find an alternative.

Be sure to research cross-plugin compatibility prior to installing any new plugins.

  • AMP can create duplicate content issues

With Google AMP pages, you need to maintain at least two versions of each page—the AMP version and the original.

The pages have the same content but the layout is different and the pages are displayed according to the device used to access the page.

The Google AMP versions are delivered to the user from the Google Accelerated Mobile Pages cache and have a different URL, which is how duplicate content issues arise.

Ideally, these two pages will have equivalent content, except the user accesses the same content faster, and with a better user experience, when accessing the AMP version.

Duplicate content is caused because the search engine is not sure which URL to show. This can lead to SEO issues and people linking to the wrong pages.

  • You can apply responsive page elements within AMP

Responsive web design is a method of creating web pages which are fluid, respond to user needs, and are flexible.

Responsive page elements are designed to dynamically change, based on the device being used to access the page.

You can read more about implementing responsive elements within an AMP page on the official AMP site.

Conclusion

While Google continues to make a push to establish the Google accelerated mobile pages framework as the standard for delivering mobile content, there is still a lot to consider prior to implementing AMP mobile pages on your site.

Remember that while AMP pages are great for serving up basic content, such as articles, videos, and images, AMP has a lot of limitations for creating more advanced and unique web content.

Before you decide to incorporate Google’s Accelerated Mobile Pages technology within your site, be sure you understand the aforementioned implications and determine whether or not AMP is the right mobile solution for you.


About the author

Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

Haku Kapule is a contributing editor at 365 Business Tips, a new blog that prides itself on presenting the best advice and practices for small and medium-sized businesses everywhere. He’s passionate about finding and offering useful tips to small business owners. He is an expert in digital PR and marketing strategy and has assisted with the increase of digital presence and customer support for small and large companies alike.

Moss Clement is a blogger and B2B freelance writer who blogs at www.mossmedia.biz. He is working with B2B marketers and individuals like you by providing high-quality blog content writing, ghostwriting, and other writing services that are tailored to the needs of your target audience.

Connect with me on Twitter, LinkedIn,

10 thoughts on “Google Accelerated Mobile Pages: 7 Tips to Consider before Making the Jump

  1. Hi Haku,

    Thank you so much for this informative material about Google accelerated mobile pages. It’s a good thing to know the pros and cons of this tool. Even though Google is pushing for it to be a standard for content delivery, there are some downside to it that needs much consideration. I happy that you brought out this points.

  2. What a treasure here Haku. I would dig the increased speed. Noted a night-day difference with my blog when I got serious about speeding things up. I have also never seen a page 1 site that didn’t load really quickly. Gotta keep it in mind.

  3. Hi Haku,

    Great post. You have shared very good information regarding Google accelerated mobile pages. It is always good to learn important things from experts like yourself. I am glad I landed on your post.

    Thanks for sharing, have a good day. 🙂

  4. Hi Haku,

    It is paramount to have a responsive website. A fast paced website for mobile users will do a world of good for your business since more than 50% of internet users prefer their mobile over their PCs. It is good to know the benefits and disadvantages of Google accelerated mobile pages.

    Thanks for sharing, have a good day. 🙂

  5. The main interested to read these blogs come over them because of the mobile web, as we know mobile web is constantly enhancing and Google is always experimenting with new ways to speed up the content delivery management system and performance across all device. 40% of people will wait no more than 3 seconds before abandoning a website. When I was checking the desktop version and AMP version of the next web I was astonished. This article has cleared my doubts and enhance my interest in AMP for WordPress. Thanks for the article we would always definitely keep an eye on the mobile pages not only optimizing our site and as well as for well maintained for mobile in the past.

  6. Hi Moss,

    These days developers are more focused on designing mobile first templates. There is no doubt that smartphone users are growing like anything and it is a good thing to get Google accelerated mobile page for your blog or business website.

    I believe AMP’s are still beta. There is a need to work a lot on the codes to fix issues.

    Glad you have shared these.

    1. Hi Gaurav,
      You’re correct, smartphone users are growing by the day. Study has proven that mobile internet users have surpassed desktop users, so it makes sense why Google is pushing for AMP pages.

      This article was actually written by Haku. He will respond to you later. Thank you, Gaurav do coming by and commenting.

  7. Hi Moss and Haku,

    This is an awesome post Haku! Thank you so much for explaining AMP. I’ve read about it but I could never understand what I was reading.

    Now that you’ve explained it, I totally get it. I would love the faster load times and increase in ranking and whatnot but I don’t want to lose the bells and whistles I’ve got installed on my website. 🙂

    Thank you so much for this well-explained blog post! It was so nice to e-meet you!

    Have a great rest of the week, guys!

    Cori

    1. Hi Cori,

      Actually, Haku did well with the details of Google AMP. Many who are not aware of these facts can easily jump in based in the fact that “it is a Google product” and will be awesome, but that’s not the case here. Yes, it is great for speed and the likes, but there are disadvantages in using the software as well.

      Thank you, Cori.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: