Clear
  • About
  • Services
    • Branding
    • Copywriting
    • Digital Marketing
    • Ecommerce
    • Hosting
    • Packaging
    • Print Design
    • Strategy
    • Support
    • Web Design
  • Portfolio
    • Branding
    • Digital Marketing
    • Ecommerce
    • Packaging
    • Print Design
    • Web Design
  • News
  • Careers
  • Contact
  • Home
  • News
  • Accelerated Mobile Pages (AMP) for the…

Russell, Head of Digital Marketing

22nd August, 2017 • 4 min read

Accelerated Mobile Pages (AMP) for the win

Accelerated Mobile Pages (AMP) are coded so they load much quicker on mobile than the regular pages on your website – something that has lots of benefits in terms of user engagement.

We recently implemented these pages on our own site, and the home page now loads more than four times faster. We interviewed John, one of our developers, to get the lowdown.

Who will see the AMP version of the site?

The AMP site is linked to from Google and served directly from their servers. So if you visit the site from Google and you’re on a mobile device, you’ll see the AMP version. If you type the web address into the navigation bar, you’ll see the regular site.

In the search results, you should see a lightning bolt next to the listing that shows the page is AMP.

How does it work?

Every page on the site has a tag in the code that points to the AMP version. This lets Google know an AMP version exists.

When someone accesses a page from Google search on a mobile, Google serves a version based on the AMP templates instead of the regular ones. The page you see uses the same content from the database, but displays it in a much simpler way that loads faster and uses less data.
What sites is this suitable for?

Most sites get a large share of people visiting via their mobile or tablet these days, so almost any site could benefit from providing a better experience for their audience. We do that already in large part by building responsive sites that look good on any size screen, but AMP is extremely fast - even on older mobiles or a slow data connection.

Initially, we thought it was mainly for articles, blog posts and the like – simplifying the design and removing some of the bells and whistles is fine for websites with an emphasis on the copy.

However, even a portfolio site with lots of effects, animations and images would benefit from an AMP version. Mobile users might not view the site at all if it’s too slow or complicated. An AMP version, although less polished and snazzy, would at least let them read the content immediately and display smaller mobile versions of the images without holding everything else up.

AMP has limited options in terms of code. What compromises did you have to make?

We had to make a much smaller stylesheet and were limited to using only AMP JavaScript plugins for interactive content. That meant things like the navigation bar and contact forms had to be rebuilt.

There’s currently no AMP alternative for the animated filtering effect on the Portfolio page, so the service icons just reload the page with the filter applied. And the videos on our About page had to go.

We kept the Google map in the contact section. Although there’s no strictly AMP way to include it directly, we set up a single full-page map served on our site and displayed it via an (AMP-style) iframe. It’s only loaded when you scroll down to the bottom of the page, so it doesn’t affect the initial load time.
How did you find the process?

There was a big learning curve to begin with. It required re-thinking the way our templates are put together. We also built tools as we went along to make the process easier to implement on other sites going forward.

As for the results - we tried to keep it as close to the responsive mobile version of our site as possible. It's a little different, but not far off. And it’s lightning fast. The AMP version of the home page is 18% of the size of the regular version, and loads more than four times as fast.

All-in-all, AMP allows you to create light, super-fast versions of your pages for mobile. Not many people are using this technology yet, so it’s a great way to get one step ahead of your competitors.

Get in touch for more information.

Want to know more? Get in touch :)

Share this story

Please do not fill in the above field to help us identify genuine requests.

Fancy more of the same in your inbox, sign up to our newsletter


More news

February Digital News Round Up

In this month's DNRU we discuss Facebook's news rights revolt in Australia, the Creme Egg ad that's caused an uproar, What's App's controversial update to their T&Cs and more. 

Match types, they are a’changin’

Google Ads keyword match types are changing, with changes to exact match already and a new version of phrase match on the way. Find out more here.

Google Page Experience & Core Web Vitals - What Are They?

Google announced a change to their algorithm - the Google Page Experience update, measured in part by new Core Web Vitals. Learn what this means here.

Back to top
  • Microsoft Partner
  • Adobe Solution Partner Bronze
  • UX Design Institute Certification | Adobe Certified Expert | Magento Certified Solution Specialist | Magento Certified Front End Developer

Shrewsbury 5 Town Walls, Shrewsbury, Shropshire, SY1 1TW  01743 404 712

Birmingham Edmund House, 12–22 Newhall St, Birmingham B3 3AS  0121 726 6849

© 2021 Clear Legal   Cookies   Privacy Policy   Support   Web Design Shrewsbury