Date: 22nd August, 2017
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.
