SEOs have become the doomsday preppers of the marketing world.
They have a reputation for misinterpreting anything that Google says, taking what should be pretty standard updates and giving them catchy apocalyptic taglines like “SEO is dead” and “Mobilegeddon”.
Back in January, we went to DEFCON 2 when Google announced that it will be making page speed a ranking factor in mobile search. This ‘Speed Update’, they said, would roll out in July.
Cue the mass hysteria.
Google was at pains to iterate that the changes will not be “drastic”. They said that the update “will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries.” They added: “The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.”
Ah. That’s better.
Or is it? After Google’s heartfelt attempt at placating all us anxious marketers, is there still a reason to worry?
This isn’t the first time that Google has dabbled prodding webmasters towards faster sites. We’ve had Accelerated Mobile Pages (AMP) since 2016, and Progressive Web Apps (PWAs) are making onsite navigation faster for users.
The ‘Speed Update’, then, isn’t much of a surprise. We should trust Google when they say that it isn’t a drastic change.
But what no one can fully account for is the domino effect that any update like this has. Let’s follow the chain:
See? It’s not a conspiracy theory: it’s logic. Increasing your site speed might not propel you northward through the SERPs in the short-term, but it does protect you from fighting an uphill battle further down the line.
So, enough of the conspiracy stuff. No tin foil hats or elaborate nuclear bunkers here — just 3 practical ways that you can improve your mobile site speed today for a better tomorrow.
Accelerated Mobile Pages (AMP) is an initiative that Google introduced to web publishers back in 2016. They’re basically streamlined versions of a web page that are held in a web cache for faster delivery.
If you’re not familiar with AMPs, they’re currently displayed as cards in the SERPs when you’re browsing on a mobile device.
AMPs typically ditch unnecessary graphics so they can be quickly downloaded and displayed on a user’s device. That makes them a really useful asset for anyone that wants to speed up pages of their website.
And here’s the best part: making AMP pages is easier than you might think.
The good news is that AMP can be built in HTML. On a basic level, it requires adding three new elements on top of what you’d normally expect to see in an HTML page:
|A top-level <html amp> tag||Identifies the page as AMP content|
|Contains an <script async src=”https://cdn.ampproject.org/v0.js”></script>amp tag inside the <head> tag as early as possible||Includes and loads the AMP JS library.|
|Contain the AMP boilerplate code in the <head> tag.||CSS boilerplate to initially hide the content until AMP JS is loaded.|
Once you’ve done all of that, your page’s HTML will look something like the below:
There are a few more steps that you’ll need to follow to get your AMP page user-ready. Luckily, the AMP project has kindly put together this handy guide to help you on your way.
There are other, faster ways to switch to AMP, though. We use a plugin called AMP for WordPress to turn blog posts like this one into an AMP page at the touch of a button.
Contact your CDN provider to find out if this is an option that’s available to you: it might save you some work!
“Deferring the parsing of scripts” is just a developer’s way of saying: “Stop loading massive scripts before your page has even rendered!” You should memorise this phrase, not only because it makes you sound smarter than you are, but also because it’ll be instrumental in speeding up your website.
The problem is that if you have loads of scripts that you want to parse, it takes an awfully long time to load them all — and because they’re in the <head> tag, nothing else will load until all your complex scripts have been dealt with first.
So while all that’s happening, your user is just staring at this:
You can see the problem here.
To stop all those users bouncing from your site because it’s taking an age to load, you should defer the parsing of these scripts.
Diagnostics tools provide you with a helpful snapshot of where your site speed is before you defer the parsing of scripts so you can measure the impact of doing so.
There are a few diagnostic tools that we would recommend.
Image courtesy of Google Developers.
Practical Ecommerce put together a fantastic guide on how to use this, which you can read here.
There are a few different ways that you can defer the parsing of scripts on your mobile pages:
For all the good that responsive design has brought us, it’s also made us lazy. Instead of creating dedicated mobile pages, we just make sure the desktop version is responsive, that the images don’t look silly, and declare it fit for purpose.
But in the age of mobile-first, this approach is hurting your website’s SEO performance.
A desktop page is much bigger than a mobile one, so it’s understandable that it might need a bit more padding out with pretty imagery to minimise white space.
Even so, you should scrap any images on your desktop version that aren’t necessary in your mobile experience.
Sure, there’s a big benefit to this — fewer images means a page that loads faster. But think about the benefit to the user as well. Big images break up text that the user might be trying to read, so every few paragraphs they’ll have to scroll frantically to the next section.
Mobile users don’t have the same luxuries of space afforded to desktop users, so you need to be smarter to make your mobile pages easy to navigate.
Now, a page without any images looks pretty soulless, so you’ll still need to include one somewhere, most likely in your hero banner.
That said, you should appropriately scale any images you serve on mobile.
The problem with relying on responsive design to scale your images is that the browser will have to download the large file first before displaying a smaller version. A more efficient method would be to scale the image beforehand.
So, rather than the browser taking a 500 x 5000-pixel image and turning it into a 40 x 40 version, you provide the browser with a 40 x 40 version in the first place. That means your page loads quickly — and there’s no impact on image quality.
For more information about serving scaled images for mobile, check out this guide from Hostinger.
Sure, the Speed Update did give the SEO world a bit of a scare.
But the happy truth is that speeding up your mobile site is easier than ever to do. All it takes is a little prioritisation and to show the mobile version of your site a little love.
And hey, if you’re struggling to sell in the benefits of site speed to your boss or the board, check this out: Google has built a tool that helps you estimate the revenue impact of improving your mobile site speed. You can access the tool here.