3 minutes
Amp It Up
Lúcio, a character from Overwatch
has this skill where he speeds himself and everyone around him up, Google AMP tries to do this as well.
But while the speed goes up, there are some down sides as well.
AMP aims for mobile websites where lower speeds and bandwidths makes websites feel slow which raises the website’s bounce rate.
While there are certain restrictions to AMP, like
- no JavaScript (which might be confusing at first)
- stylings in the page’s head or inline
- no more than 50kB of styling
it also introduces some other problems to the (new) battlefield of “my customer is able to measure my website’s speed, halp”.
As I mentioned above
No external JavaScript might be the biggest concern around here, I have to state what Paul Bakaus said in his 7 Ways Amp Makes Your Pages Fast video, saying (similar) ‘AMP needs zero round trips to load the page’, while Google generally rates pages as “good” which need 4 or less.
This does not necessarily mean that pages with 4 or 6 round trips are (remarkably) slower - they technically are but it depends on the page size how much of a (marginal) boost a reduction would give - but that you could improve on your coding and designing habits and techniques.
“Renderblocking Stylesheets” - JavaScript in the “above the fold” content
Do not worry, I also wondered what they could mean by that.
First of all, CSS
(heets) are blocking all rendering.
While CSS files tend to get massive and splitting things up into several files makes it even worse, because rendering
of the page is blocked until all stylesheets are delivered and calculated, it seems to become a practice to simply
overwrite styles (from themes, content management systems etc.) instead of removing or changing them (!important
).
The same can be said about JavaScript.
While you are able to wait for document.ready
and run asynchronous js, the synchronized parts you only need to
display the page slow down (by blocking until interpreted) the rendering process, so that - still - no use has
seen any content.
A word towards not using JavaScript can be found on Steve Souders Blog (2012).
A few tips
on how to increase website performance on your own might come in handy, like enabling server side compression and browser caching, as well as, and this is the first and most easy thing of all these, minifying CSS and uglifying javascript code.
And even consolidating CSS files and using content delivery networks in general (CDN) does help a lot - especially - when it comes to larger websites.
In fact if you are already using a CDN you do not need AMP - except for the cost, maybe?
A good read about how CDN work can be found on incapsula.com.
So…slow it down?
If you should use Google AMP is still up to you, of course.
It has some honorable aspects (for smaller websites maybe?) we developers might want to understand and adapt ourselves to.
But AMP is, just like every other tool, library or framework out there, not the only tool you need to speed up your website and certainly not the only way to go when it comes to building websites in style and with a good usability.