Google AMP - fast & furious

author: RafaƂ Radziszewski / last edit: 12-12-2017

Introduction

While surfing the Internet (e.g. Google.com or Facebook App) on your mobile it is possible that you jumped into that little gray lightning icon. It is a small one so it's also possible you missed it or just didn't pay much attention.

While entered that page, it is very possible that you noticed the biggest advantage of Google AMP. That page has been loaded immediately, there was no (or almost no) loading visible.

That's Google AMP, it's a quite new one on the market and it's free to implement.

But like everything that's nice, it has some restrictions.

#1 No Javascripts, sorry.

You can't have any custom JS running on your site. You can't load any of 3rd party libraries. You actually can't load any code with script tag or link tag, you're not allowed to use those.

That's one of the reasons why the AMP sites are that fast.

However...

AMP itself delivers some of frequently-used JavaScript-based components, e.g. amp-live-list.

Check https://ampbyexample.com/#components for a list and demos.

#2 Only 50KB of CSS, placed in head.

What can I say is... bye bye bootstrap.min.css!

You will not use minified version of whole Bootstrap 3 anymore. That's no-go, because it's size is around 120KB - it already exceeds our limit a lot.

What you can do about Bootstrap is to extract only the parts you need...

What you can also do is to read my separate article about Bootstrap & AMP combo to find out how does it look like to work with those two.

Bootstrap 4?

When writing it, the new version of Bootstrap is still in beta.

Initially I had Bootstrap 4 flex-based grid included into my site.

Unfortunately I realized that the v4 compiled grid is two times bigger than the v3 one. So for now I'm quickly back to the old one.

Maybe a standalone grid?

Why not. The column grid is very often the biggest reason people picks Bootstrap.

Someone thought the same and created the standalone version of the grid.

I did not test it, but feel free to try! It's here: https://github.com/Hilzu/bootstrap-grid

Remember about minifying CSS

Gulp, Webpack, whatever. I consider minifying as a must have for AMP.

If you hadn't had a chance yet, I'd really recommend switching from standard CSS to SCSS.

It gives you readability, all kind of stuff like imports, variables etc.

Be careful while importing the CSS files in SCSS!

You may know it or not, but the way you import CSS files inside SCSS is important.

The thing is that you can build the import path with the file extension or without it and in each scenario the result is different.

Method #1 - with ".css" extension

This method inserts only an import reference to a CSS file:

// style.scss
@import 'bootstrap.min.css';

// result in style.css
@import url(bootstrap.min.css);

Method #2 - without extension

When importing without extension, the CSS file's contents are directly pasted into our newly generated styles:

// style.scss
@import 'bootstrap.min';

// result in style.css
/*!
 |  * Bootstrap v3.3.7 (http://getbootstrap.com)
 |  * Copyright 2011-2016 Twitter, Inc.
 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 ...
 ...
 ...

#3 Consider having a separate mobile page

Remember about the limitations: no custom JavaScripts and small amount of CSS. Not every site is capable to live in these conditions.

My site is capable of staying as one responsive (desktop and mobile) app, because it's small and simple.

But for example, if you're developing a big site - let's say - with a lot of Ajax thingies, you could consider moving only a part of the project to AMP.

We've done something like that in the company. Our client desired a shop with "news module".

The final agreement was about creating a small, separate, AMP-based site that shows the news, some useful shop statistics and is extremely fast.

So before implementing AMP sit down and spend some time with the Google AMP Docs. Like always everything depends on the project aim.

Google Analytics in AMP

You know that little copy-paste script that contains your GA ID, right?

As stands above, you can't include any JS. So basically you cannot just paste that code in your AMP site.

Don't worry - it's possible, you just need to do it an AMP-way. I'll leave you with that: https://developers.google.com/analytics/devguides/collection/amp-analytics/

It's growing stronger and the 3rd parties are working on it

The AMP technology raised in the beginning of 2016. Since then it grew a lot.

I can remember how many lightning icons I saw in Google results about half a year ago and how many I am seeing now. The difference is very visible.

That probably means there's something interesting in it!

What does Wikipedia say?

In February 2017, a year after the public launch of AMP, Adobe reported AMP pages accounted for 7% of all web traffic for top publishers in the United States.

In May 2017, Google reported 900,000 web domains were publishing AMP pages with more than two billion AMP pages published globally.

In June 2017 Twitter started linking to AMP pages from its iOS and Android apps.

https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages

My first time with AMP was somewhere in the middle of 2017, when I was told to do some quick layout fixes and implementations in one of my company's project.

This blog/site (rafalradziszewski-pl) is my second approach.

About those 3rd parties

Just now, at 13:51 of my time, just when writing this paragraph I ran into panic.

Oh hell, Disqus!

There's a Disqus script on my site - that commenting system script I wanted to use below every article.

Disqus is Javascript and AMP doesn't like Javascript! What to do, what to do...

Let's calm down and google it: "disqus amp".

Phew. That's it. It's possible, the developer has prepared a solution for that. Isn't it nice?

It appears that we need to place the script execution somewhere outside (separate URL) and then use the special amp-iframe tag to grab it from there.

https://github.com/disqus/disqus-install-examples/tree/master/google-amp

Summary

These were the main things and problems I faced. Keeping those in mind should lead you through the AMP development without problems.

Good to read

How to avoid common mistakes when publishing Accelerated Mobile Pages

AMP Components list, demos, examples

Read more!