When the AMP Framework started a few years ago, everyone was excited. It was a way to make pages load faster – almost instantly. It would make pages load with minimal styles and almost no javascript by using a custom script that parses the document, custom html elements and it seemed like this is where the future is headed.
Some sites with beautiful designs were built using AMP and there’s no denying that they were stunning. They provided a fast experience with minimal effort.
These sites achieved the results they did by rebuilding and rethinking how the web should work. They achieved it by thinking from the bottom up. Starting with the content and building around the content adding the things that they needed in order to make the user experience a pleasant one.
How AMP Works
You can read details about the way AMP works in this page, however in order for a site to be able to use AMP, it has to follow some basic rules:
- CSS should not exceed 50 kilobytes
- There should be no JavaScript. Instead of JS the AMP elements and their properties should be used. These then get parsed by the AMP script and interactions get added to them via that script.
- CSS gets added inline in the document.
At the time this article was written, the AMP script was 271KB. Those 271KB contain everything a site would need for any AMP element.
AMP recently introduced the ability to write custom JavaScript in AMP pages:
So in essense when using AMP you have to load a script that limits what you can do, and then it “allows you” with that recent update to write custom JS.
The irony is that you can already write custom JS if you’re not using AMP. That update just gives you back something it took from you.
Can you do better without AMP?
By writing clever vanilla JS code without 3rd-party dependencies like jQuery (commonly used in WordPress themes because it’s already included in WordPress-Core), your website could achieve much more with a lot less code.
You can achieve a lot with 50KB of CSS – as evidenced by all those beautiful AMP sites.
The key is not to try and do everything, but instead focus on the key elements. Instead of doing a fancy animation using Javascript for your dropdown menus, you could do something less resources-intensive using a couple of lines of CSS. It will be smaller in size, it will be lighter for all browsers and everyone will be happy.
If you follow the principles of AMP without actually using AMP you can get a site to load a lot faster than if using AMP, because you won’t have to load that extra 271KB script.
So is AMP useless?
The AMP project is just a tool. Like any other tool it has its pros and cons. There are some use-cases that can benefit from using it. But there’s a right tool for every job, and in most cases this tool will not be it.
That being said, I believe AMP has done a lot of good for the web.
The biggest accomplishment of the AMP project was to force web developers to think outside the box. It showed us that we don’t need to load multiple libraries to do simple tasks. We don’t need a CSS framework to build a website. In many ways it paved the way for a more minimalistic web.
Conclusion
Personally I don’t think I’d use AMP. In its current form it tries to reinvent the wheel. It adds a level of complication to a website/app that is completely unnecessary.
By writing plain HTML, CSS and JS we can accomplish better and faster results without using AMP – as long as we don’t overload our pages with frameworks.
As an example, the Gridd theme for WordPress follows the same principles as AMP: Minimal CSS added inline, a clever layout using CSS Grids and a few lines of Vanilla JavaScript to achieve the interactions required – again added inline since they are less than 5KB.
The Gridd theme is natively compatible with AMP. When you enable the official AMP plugin on your website all scripts that the theme uses get removed and instead native AMP elements get used (an example of this is the menu dropdown buttons). Since it has less than 50KB of CSS everything looks exactly the same, and the AMP elements work identically to the non-AMP ones.
When using AMP, the time it takes for a page to be downloaded and rendered on the browser is actually longer than when not using AMP and the end result is identical.
In most cases you will not need AMP on your website. There are instances that may benefit from it, but our assessment is that AMP is not the future of the web. The future lies in responsible programming. Only add what you need, when you need it. This way we can achieve a more sustainable and accessible web for everyone.
I’ll close this post with a recent tweet from @jensimmons: