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.
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.
Check https://ampbyexample.com/#components for a list and demos.
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.
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.
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
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.
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.
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);
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) ... ... ...
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.
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/
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.
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.
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.
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.
These were the main things and problems I faced. Keeping those in mind should lead you through the AMP development without problems.