Editor’s Note: the following guest post was written by Martin Adelstein, Creative Head at Definition studios .
At Definition studios, we use AMP to improve our clients’ site’s speed and user experience, as well as shorten our own development time. One of the best things about AMP is that it’s easier to use than you might think.
How we discovered AMP
We discovered AMP while investigating new concepts on how to develop lightweight sites more quickly. We realized that a lot of our WordPress based sites didn’t have great performance, with bloatware themes and excessive plugins making unnecessary JavaScript and CSS requests. We toyed around with the AMP plugin, engaged in various performance tests and worked on our own themes and custom client solutions with the help of various AMP components.
Our early developments and experiments
One of our first projects with AMP was msm.digital. We did find some aspects challenging, with framework limitations and JavaScript restrictions in particular taking up some development time. It took a significant amount of time and resources to get this project to a stage we were completely happy with – although it was a worthwhile effort.
Our second AMP project was for a renowned international industrial brand, Cobiax. They trusted us to develop their new website. After engaging with them on the benefits of AMP and delivering a high performance sample, the end result worked out great.
Both of these early projects had tight deadlines and challenges in terms of interactivity. We found AMP components to be a great way of utilizing our engineering and development resources to develop them, which now showcase the very best of software engineering best practices.
Developing with the WordPress plugin
Before adopting AMP for our client websites, we had been testing out the AMP plugin since its beta release. We had been following progress and taking note of considerable changes made to the plugin, including advancements that made it easier to use our own custom WordPress themes in AMP.
Building themes with AMP fallbacks was at times challenging, but once we got familiar with `amp-bind` to toggle classes, `amp-position` observer to navigate to positions within a page, and `amp-sidebar` for a pop-in sidebar, we were able to reuse and master these with ease – no custom JavaScript required.
After spending some time developing our custom themes to ensure they work successfully in AMP, we now develop with AMP in mind for all our projects, reusing templates and custom-styled components that work great for mobile and desktop. Indeed, one of our WordPress projects with the AMP plugin (leaseback.de) has only an `index.php` as a template file, nothing more. Developing with the AMP plugin can be easier than you might think.
Besides our client custom-built theme solutions, we also develop with AMP-based layout components as Gutenberg blocks with the possibility to customize them while preserving our AMP performance budget.
Everyone can get AMP up and running on WordPress – the plugin makes it actually very easy. It’s not entirely without quirks, but it’s much easier to get up to speed with AMP than with other frameworks. Quite frankly, we have never regarded the 75KB CSS limitation as being extremely challenging, in particular as the AMP plugin includes built-in CSS tree-shaking, removing unused rules while inlining all CSS.
Overall, the AMP plugin is a great help. We love it. It helps us get WordPress’ sometimes quirky style of injecting superfluous CSS and JS out of our way.
Ongoing development with our AMP-enabled sites
We develop most of our websites with AMP. Where applicable, we make use of various components while mixing some functionality with the various Gutenberg blocks, which, like AMP, have improved extensively in the past couple of years.
We plan on delivering some additional AMP projects in 2021, and for those looking for advice on implementing AMP, all we can say is you need to be very curious and prepared to play around with the components to go the extra mile for your clients. These components provide a great head start that allows you to avoid having to build custom features or functionality. With AMP, you’re simply customising features and tools already engineered for performance.
For our current and future projects, we use AMP for prototyping ideas and validating designs, with a Node/Webpack based workflow for non-WordPress projects. We’ll continue to use Pug and SCSS as metalanguages for markup and styling, which ensures fewer debugging issues.
Feedback and client satisfaction
We’re proud to take our clients on a journey of where they were to where they are now. This usually involves before implementing AMP, which in some cases requires us to remind or educate users on the framework itself. We’re open to all feedback from our clients and we regularly do performance testing and ongoing reviews using tools such as PageSpeed Insights or web.dev.
We usually get great feedback when our clients can visualise the performance benefits, which result in better search performance and more time spent on site. The sites are easier to use, quicker to deploy, and better to handle.
Our wish for AMP going forward
We have a lot of things planned with AMP! Since our customers love WordPress, we sometimes use it as a headless container CMS for content and delivering Gutenberg markup to a static Site Generator via REST or GraphQL. We’re curious to see where that takes us in the content of using such technologies with AMP.
We’re also excited to see new AMP components. We are still wrapping our heads around how to implement a spy-scroller or a scroll-based animation, and there are definitely opportunities for improved high-level interactivity.
Finally, as WordPress experts, we sometimes need to break validation for some pages. We are aware of upcoming changes to the plugin that will allow for easier integration of Bento AMP and we’re excited to see Bento roll out.
Martin Adelstein is the Creative Head at Definition studios. Email him at martin@definition.studio or follow him on Twitter at @D3FNTN.