Want to reduce the load time of your HubSpot blog on mobile devices but don't know how? In this blog, Francesco Brizzo, explains accelerated mobile pages (AMP), how they can reduce page load time and how it can be enabled on your HubSpot blog.
Accelerated Mobile Pages. AMP.
Some of you may have heard about it before – and I wouldn’t be surprised – but for those of you who are unfamiliar with AMP, it’s been one of the major trends in digital marketing this year, and people are still talking about it.
But just how does AMP work? What does it mean for your blog?. In this blog I will try will to summarise everything you need to know about AMP (no coding jargons, I promise), as well as why you should try AMP and, for HubSpot users, how to enable HubSpot AMP on your blog.
First, let’s go back to its origins.
AMP is an open-source project that was launched by Google in 2015. AMP allows publishers to create websites and ads that are consistently fast, beautiful and perform incredibly well across devices and distribution platforms. The AMP format enables publishers to take advantage of design and coding principles that improve the experience of users browsing on mobile devices.
We started seeing AMP pages in 2016, but they only really became mainstream in 2017. A standard AMP consists of plain and simple HTML/CSS, enabling web pages to load nearly instantly on mobile.
Initially, the project was focused mainly on the news and publishing sections of a website.
In fact, Google released AMP to compete with Facebook’s Instant Articles, which basically follow the same principles.
However, due to its focus on speed, AMP didn’t (and still doesn’t) support the default JavaScript (which is responsible for the interactive elements on a website). Instead, it manages interactive page elements through custom AMP modules.
Of course, this prevented a lot of people from using AMP on web pages other than those related to news or content. Fortunately, AMP evolved considerably. It started to incorporate new design elements and much of its functionality was extended to other website sections and advertising formats. It also enabled support for in-app coding.
The impact of this was really important and certainly gave a twist to the market. Now, AMP is widely used across a number of websites to increase website speed and provide users – regardless of device – with a fantastic user experience (UX).
On the AMP Project website, you can read a lot of interesting case studies showing how AMP really improved their KPIs.
Of course, you might not want to go all in with AMP – and you might value the interactive design elements of your website. However, there are three reasons why you should have a go and start testing your mobile conversion rates with AMP – at least for your website’s blog and/or news section.
Let’s run through them.
Ensuring your website loads quickly is crucial: even more for mobile users. A slow website results in a frustrating user experience and has a huge impact on your website’s bounce rates. If a web page takes more than 6 seconds to load, its bounce rate will increase by over 100% and the probability of conversion will drop by 95%. (Source: Google/SOASTA, 2017) With AMP, a page will download in approximately 2 seconds, resulting in a smooth and fast experience for your website visitors (and increases the chances of conversion)
We all care about SEO, right? If you do, keep in mind that Google considers site speed as an important ranking factor, and marks AMP pages on its results pages. The faster a page loads, the better it will rank. This has become even more important since the introduction of Google’s “mobile-first index” in 2017. Google’s mobile-first index gives ranking priority to the mobile versions of a website rather than desktop ones.Finally, pages marked with the AMP logo have a greater chance of appearing in search snippets and news carousels.
Yes, the lack of interactive elements might appear harmful, but AMP keeps your audience engaged in a different way. Fast web pages allow website visitors to get to the information they need quickly, and less interactive elements reduce the complexity of your website, making your visitors’ lives easier. Remember, it’s all about speed in the mobile world, so the faster your website, the better the UX.
Now, let’s see how you can enable the Google AMP feature in your HubSpot portal.
Please note, AMP in HubSpot only works for blog posts and it can’t be used on other sections of your website. There are two ways you can add it.
1. Apply AMP across the whole blog
The first option lets you add AMP across your entire HubSpot blog.
Within your HubSpot portal, click on the settings icon located to the top-right of your menu.
When in the menu click on “Website” and then choose “Blog” from the dropdown
In the blog menu, click on the “Google AMP” tab
Enable Google AMP formatted pages by turning the toggle ON
Now, just click on the “Save” button that appears at the bottom of the screen.
That’s it. Once AMP is enabled, HubSpot will validate each blog post (for your blog template) and the next time Google crawls your blog post it will cache the AMP version. If there are errors with the AMP version, Google will send you an email directly to let you know, but HubSpot also provides a useful guide for troubleshooting issues.
After clicking on save, a number of options will appear to customise your pages elements such as logo, font, and font colours.
Once you've finished customising your AMP settings, click “Save”.
2. Apply AMP to specific blog posts
HubSpot also allows you to set AMP for specific blog posts only, which is great if you are undecided or want to A/B test AMP vs a regular page to see which page performs better.
AMP for specific blogs should be enabled right before publishing your blog post. Basically, when you click into the “Publish” or “Schedule” tab from that blog post, you will see a Google AMP box appear (if you cannot see this, it means that you have AMP enabled for your entire blog). Just check the option to enable AMP for that specific blog post.
Lastly, update or publish your changes. Again, HubSpot will validate the blog post and the next time Google crawls it, the AMP version will be cached.
All done! Enjoy your speed.