Faster.

Faster!

FASTER!

If you’re a website owner or developer, you might feel like the entire world is pressuring you to speed your website up – especially for mobile users.

Stats like “47% of people expect a web page to load in two seconds or less” and “40% will abandon a web page if it takes more than three seconds to load” are thrown around the internet like hot potatoes.

So how do you put the pedal to the metal and get your site up to racing speed?

Before 2016, you were basically tweaking your site according to Google’s Site Speed guidelines: eliminate or optimize JavaScript, use caching, minify CSS… It was a “find and fix” deal.

In 2016, Google introduced two new options to make your pages load lightning fast. Which one is for your site? Read on and see…

AMP (Accelerated Mobile Pages)

What is it?

AMP (Accelerated Mobile Pages) is a project spearheaded by Google, Twitter and other companies to dramatically speed up page loading on mobile devices.

AMP pages are regular web pages, but stripped down to the minimum possible code – only code that will load FAST. Certain HTML tags can’t be used, some CSS elements can’t be used, and for Javascript you’re limited to a specific library. In addition to loading fast on their own, AMP pages are designed to be easily cached by Google, so that Google can instantly pull the page from its own servers whenever anyone clicks on it in search. (Google’s pretty good at the speed thing.)

Google gives priority to AMP pages in the mobile news search results, and indicates which pages are AMP by putting a little lightning bolt symbol next to them. (This is to indicate to the gentle reader which pages he may prefer clicking on if he wants to be assured a negligible wait time.)

AMP was originally geared for media publishers and blogs, but it’s expanding its umbrella as we speak. See further for a peek into AMP for Ecommerce.

How to build AMP pages

If you’re a developer, Google’s written up a nice technical specifications doc for you over here. If you’re a website or blog owner (but far from a developer), you’ll have to either hire a developer to take care of your AMP concerns – or to use plugins available for your CMS.

If you’re on WordPress, you’re in luck, because WordPress already had a number of reliable AMP resources. Joost de Valk writes out a step-by-step in his setting up WordPress for AMP post. The plugin he recommends is Automattic’s AMP plugin, and Joost has created a plugin called Yoast SEO AMP Glue to take care of the interface between Yoast SEO and the AMP plugin, and other design issues. You can also check out Search Engine Land’s Quick 7 Step Guide to Setting Up AMP for WordPress.

How to validate (Chrome dev tools)

Once you’ve set up your AMP pages, you definitely want to check they work. Because if they don’t follow all the Rules of AMP, Google will just wag its finger and say, “Sorry – no can show!” Not what you want.

Fortunately, Google provides some handy validation tools.

One is the AMP Validator Tool here. Paste in your code and it will tell you if if passes or fails (nice and blunt :).

You can more easily check a full page by appending #development=1 to the end of your URL. With that URL in your browser, open Chrome Developer Tools and check if there are any AMP validation errors.

Or you can use the AMP Validator plugin for Chrome – it’ll show a green AMP icon next to your browser bar when the page is a validated AMP page, and a red AMP icon if there are errors. Click and it will tell you what the errors are.

AMP for Ecommerce

AMP was originally geared for media publishers and blogs, but it’s starting to spread. After all, what industry doesn’t have consumers who want webpages to load fast on their mobile devices? eBay was the AMP ecommerce pioneer, and they’re the spearhead of furthering its ecommerce capabilities.

Statistically, people actually have less patience to wait when it comes to shopping sites than when it does to content sites, as mentioned in the comments section here, so fast ecommerce experiences make a lot of sense to invest in.

Right now, though, ecommerce sites can’t have full functionality (from the browse to the purchase) on AMP. At some point you’ll have to send your customers over to your regular mobile site or PWA (we’ll talk about those soon!) to complete the transaction. Those elements are only a little while in coming, though, so you can certainly reap the benefits if you begin the AMP process now, and add new functionality as it comes in.

Pros and Cons

Why should you use AMP?

1. User experience. Users like fast pages. AMP is super fast. ‘Nuff said.
2. If you’re a news site, you’ll have a chance of making it into Google’s AMP carousel at the top of the search results.
3. If you’re an ecommerce site, fast pages encourage conversions.
4. Other sites, like LinkedIn, Twitter and Flipboard, are starting to link to AMP pages. These sites want to give the best experience to their readers, and the AMP URL is easy to grab off the page.

Why should you NOT use AMP?

1. Because available code is limited, not all ad types will run on AMP pages. Ads are generally limited to ad banners, and sponsorships, popups and interstitial ads are out. Some publishers say they generate half the revenue from their AMP pages than they do from pages on their full mobile websites, although publishers like CNN and the Washington Post say their AMP and regular pages monetize at about the same rates. There’s also a good chance that as AMP moves forward, Google will find ways to enable more ad types (if only to convince the publishers to get on board).
2. If you want to capture subscribers or leads, it’s hard to do it on AMP pages, because form capabilities are very limited.

PWA (Progressive Web Apps)

What is it?

Progressive web apps are mobile websites that have many of the features of a native app. They’re supposed to give you the best of both worlds:

• they can be found in search
• they can be used immediately, without the need for app stores or installation
• there’s just one version to keep track of and support

And at the same time:

• they’re available offline
• they can be pinned to and accessed from the home screen
• they have push notifications built in
• they’re super fast (because they cache as much as possible in your phone’s browser)

Sounds amazing, no?

How to build PWAs

You DO have to be a developer for this one. No plugins are yet available to turn your site into a PWA with a sprinkling of pixie dust. This article provides a great example tutorial on the building of a simple PWA.

Pros and Cons

Why should you make your website a PWA?

1. Your website has dynamic content that changes regularly.
2. You want to engage your user even when they’re offline. PWAs give offline functionality, or at the least, a custom offline page. The Guardian’s PWA tells you it’s unable to connect to the internet – and offers you a crossword to do!
3. You’ve seen a barrier to installation with your current mobile app – and so you want people to see how useful your app is from the first time they come across it, before they need to install it.
4. Site speed is important to you, and you’ve reached the limit with how much you can speed up your regular mobile site.

Why should you NOT make your website a PWA?

1. Not all functionalities (push notifications, offline functionality) are supported by all browsers (notably not by Safari). This may change as PWAs gain in popularity.
2. If your website is relatively static and loads pretty fast as it is, there may be no reason to invest in developing a PWA.

Get moving.

Yes, Google and consumers on the internet are pushing you as a company to give them faster, more holistic experiences on the web. The tools are there – whether in AMP, PWA or a different coding solution.

Pick your method, put your pedal to the metal and… away you go!