How To Make Your Mobile Website Faster Using AMP

What do you do when you have to wait 30 minutes to be seated at a restaurant?

You bounce, right?

People visiting your virtual business operate on the same principles. As your website load time goes from taking one second to load to ten, the bounce rate increases by 123%

That means that you’ve lost a customer and a lot of business.

Even a one-second delay can decrease conversions by 7%.

Blame it on our shrinking attention spans, but the reality is that businesses need to deliver a faster web experience, especially when it comes to mobile use. After all, half of all web searches come from mobile devices.

Today’s web users demand a fast experience and businesses need to prioritize mobile-friendly website design above all else.

Chances are your mobile website isn’t performing as it should.

Research from Google shows that 53% of mobile users will leave if a website takes longer than three seconds to load. However, an average mobile landing page takes a whopping 22 seconds to load.

Ultimately, a faster website is going to allow you to deliver a great user experience, increase your engagement, appear higher in the search rankings and grow your business.

Recognizing the importance of delivering a fast mobile experience, Google and Twitter joined forces to create AMP, giving businesses the tools needed to make increasing website load time easier.

What’s AMP?

First of all, there are a lot of things you can do out there to have a mobile friendly website design and increase speed. We will get to that a bit later.

First, however, you may want to begin by testing just how fast your mobile pages are, which you can do using Google Search Console’s mobile friendly test.

As you can see, the average business struggles with page loading speed and mobile website design. Perhaps they’ve prioritized a beautiful, flashy design over fast page load speed and, consequently, mobile friendly website design.

For the record, users much prefer quick website load time over all the bells and whistles.

But, now there’s AMP to come to your rescue.

AMP, which stands for Accelerated Mobile Pages, allows you to create fast-loading mobile web pages. It is an open source initiative brought to you by Google and Twitter.

AMP pages are still regular web pages but they have only the absolute essential code, which allows them to load quickly. For example, limited HTML tags and JAVAscript.

Twitter, LinkedIn and other similar websites are currently linking to their AMP pages. Perhaps you have even noticed AMP pages via the little lightning bolt symbol next to them. Readers can click on the lightening bolt for a faster mobile experience.

AMP is the equivalent of Facebook Instant Articles, but the difference exception is that Facebook Instant Articles can only be read on Facebook whereas Accelerated Pages can be used on any app or browser.

But here’s the caveat. While it is agreed that AMP pages will help you rank higher (Google also prioritizes AMP pages in the mobile news search results) and creates a better user experience, there are a few downsides.

Again, given its limited HTML and JAVAscript, you are limited with what you can do. You can’t add a lot of widgets and forms to those pages. Advertising options are limited. For now, you have to stick with ad banners. You can’t use popups.

You also can’t easily convert subscribers since forms are limited. That said, there are widgets that allow for greater functionality and this could continue to grow over time.

You might want to take a look at this article offering a wider perspective on the pros and cons of AMP to determine if it’s right for you and your business.

In short, if you tend to receive a lot of traffic from mobile, it is a good idea to invest in AMP. Similarly, if you run an E-commerce website, mobile friendly website design and a faster running website are essential to conversions.

As we said before, there are a lot of ways that you can increase page speed. While developers can achieve the same results and a better mobile website design using more intensive measures, AMP pages make the process a lot easier.

It’s really just a case of downloading and activating a plugin or two.

How To Increase Your Website Load Time Using AMP

Using AMP pages means that you have to maintain at least two versions of every page, both the original and the AMP version. The good news is that if you’re on WordPress, it’s a pretty easy process.

1. Download the AMP Plugin

The first step is to download and activate Automattic’s AMP plugin.

If you’re not sure how to install a WordPress plugin, you can read this guide that will show you how to install a WordPress plugin.

After you install the plugin, it will automatically create the AMP version of all of your posts. You will notice that a standard meta tag has been added; this allows Google to see that AMP versions of your pages exist.

The AMP pages are going to look stripped down given the limited code, so you will first want to go to your WordPress dashboard and do a little bit of customizing to make your pages look better.

All you need to do is go to Appearance >> AMP.

You can change the header text colour, the header background and link colour and change the colour scheme from light to dark. Ensure that you save any changes.

The options are limited, but don’t worry – there’s another plugin that we will show you how to download more options to further customize your pages to make them look better.

Now you will want to see what each page of your website looks like in the AMP version after you’ve done a bit of customizing. To do this you simply need to add /amp to the end of any URL on your website.

2. Troubleshooting

Sometimes, you may see a 402 error when viewing the AMP version of the pages. If that’s the case, here is how you can fix the problem:

Go to Settings>>Permalink page (this is in your WordPress admin).

Next, click the ‘Save Changes’ button. That’s all you need to do.

Now back to customizing your AMP pages a bit more via the additional plugin we mentioned above.

3. Download Glue For Yoast SEO & AMP

Yoast developed Glue to add to Automaticc’s plugin. Download and activate as you would with any plugin.

Then go to SEO>>AMP page to configure the settings. After you’ve done that, you can begin playing around with the design options like the colours and fonts to more closely resemble what you already have on your desktop site.

To do this, go to SEO>AMP>DESIGN.

As always, ensure that you save all of your changes.

After a few minutes in the settings, your AMP pages will look pretty close to your desktop.

Here you can also access the Analytics Tab to add your Google Analytics ID. Yes, AMP pages allow you to use Google Analytics.

4. Install Any Additional Plugins For More Options

AMP pages are limited in what you can do, but there are also plugins that have been developed to expand the offerings. If you want to add more options to your AMP pages, like related posts or footer widgets, you can do that now.

Here are some AMP footer widgets to get you started.

However, you have to make sure that you validate your AMP pages after you install these widgets. You can read how to do this in the step below.

5. Use the AMP Validator Tool

Next, you want to ensure that your AMP pages actually work. You can do this using Google’s validation tools – they have a couple to choose from.

You can use Google’s The AMP Validator. All you have to do is copy and paste in your code and you will either get a passing grade or a fail.

Alternatively, you can also use Google Chrome’s AMP Validator plugin. The green AMP icon will tell you if the page has been validated. If not, you will see a red icon indicating that it didn’t work. If you click the red icon, it will show you what the errors are.

6. See How Your AMP Pages Are Doing in Google Search

At some point, you will want to see how your AMP pages are doing in Google Search. You will do this through Google Search Console.

Simply log into your dashboard and then click ‘Search Appearance>>Accelerated Mobile Pages.

Keep in mind that you may not see your results immediately; it takes some time for Google to index your pages.

The Bottom Line

At the end of the day, your business needs to prioritize mobile friendly website design and fast page speed if you want to succeed in the future of the web.

Be sure to prioritize mobile page speed, but there are other ways to design a beautiful website that converts. We’ve covered the topic before, which you can read here.

Yocale, which provides the best scheduling software for businesses, also offers smart tools for business growth, including fully featured reporting to stay on top of the sales numbers that matter most.