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?

Well…

Sort of.

The domino effect

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:

  1. Google rolls out ‘Page Speed’ update. Only the very slowest mobile pages are affected. You remain comfortably where you normally rank.
  2. In the heat of the moment, all your competitors have accelerated their mobile page speed to make sure they’re not caught out. You might not lose your position, though; after all, speed is one small factor among many.
  3. Users get accustomed to faster pages. Gradually, they become less patient with your load time because it’s slow compared to others.
  4. Engagement metrics on your mobile site begin to drop. Google sees more users ‘pogoing’ from your site back to their SERPs. It doesn’t look good.
  5. Your mobile positions start to drop as a result.

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.

1. Switch to AMP

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.

How to make an AMP page

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:

Rule Description
A top-level <html amp> tag Identifies the page as AMP content
Contains an 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!

2. Defer the parsing of scripts

“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 with scripts

Top-heavy JavaScript loading (or “parsing”) is a trap that a lot of websites fall into.

If you’re unfamiliar with how JavaScript parsing works — and why it might slow websites down — allow me to explain.

Typically, the rule of thumb is to place JavaScript within the <head> tag of a page. Pages are loaded from top to bottom, so placing JavaScript in the <head> tag ensures that it’s parsed before other elements of the page, like images and copy.

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.

Recommended diagnostic tools

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.

  • PageSpeed Insights — A go-to for SEOs and developers. It’s a page analysis tool from Google that crawls any URL you want it to and comes back with a bunch of recommendations to help you speed up your page. It’ll also give you a score between 1-100, so you have a rough idea of where you are and where you want to be.
  • GTMetrix — This essentially does the same thing as PageSpeed Insights, but this tool is from an independent provider, making it ideal for cross-referencing.
  • Developer Tools Waterfall Visualisation — Developer Tools has a pretty useful waterfall visualisation of on-page elements that allows you to see which scripts are taking the longest to load on your page. It looks a little bit like this:

Image courtesy of Google Developers.

Practical Ecommerce put together a fantastic guide on how to use this, which you can read here.

How to defer the parsing of scripts

There are a few different ways that you can defer the parsing of scripts on your mobile pages:

  • Use plugins — If you’re using WordPress, plugins are your best friend. You can easily defer scripts with plugins like WP Deferred JavaScript or Speed Booster.
  • Load JavaScript in the <foot> tag — If you have JavaScript that isn’t needed straight away, you can place it in the <foot> tag rather than the <head> so that it is loaded last.
  • Try “lazy loading” — “Lazy loading” is where you structure a page in such a way that the browser only renders JavaScript when it’s needed. While this doesn’t reduce the overall payload of the scripts on page, it does mean that the initial parts of your page are rendered much earlier than they would if JavaScript was rendered synchronously. Just be careful not to lazy load the wrong elements of your page as it could hurt rather than help SEO.

Ditch the desktop stuff

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.

Dump unnecessary images

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.

Serve scaled images

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.

The future is fast

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.

Matt Fielding