Improve SEO making your site faster, get a 99/100 Google PageSpeed Score
Your sites speed is one of the biggest keys to ranking higher in search engines, so let’s dig in and make that site speedy.
As of writing this, my site landing page speed on mobile and desktop is 99/100 🚀. Before my site speed was 63/100 on mobile and 83/100 on desktop 🐢. I’m going to take you through each step I took to hit that 99/100.
The BIGGEST way to speed up your site is to reduced the overall size, and normally the largest part of any site is its images. I can’t emphasise enough how important this is, forget how crisp and clear those images are because it means nothing if the user has to wait for them to load in. You need to find that sweet spot but always remember speed is key, without it every second a user waits, they’re abandoning your site.
Speed over EVERYTHING
I use ImageOptim to optimise my images (this is a mac only app but they recommend other versions here) and it’s absolutely fantastic, easy to use drag-and-drop interface and you can tweak the settings of the overall optimisation.
Here are the settings I use for ImageOptim
This is a super easy win for your site, a simple async added to your script tag will enable it.
<script async src=”script.js”></script>
Don’t forget ALWAYS put scripts just before the end <body> tag so it doesn’t stop the rest of the page from rendering first.
Note: The async attribute should only be used if the src attribute is present.
CSS is treated as a render blocking resource, which means that the browser won’t render any content until it’s finished loading. So this works great if you’re using fonts from something like Google Fonts or Adobe’s TypeKit, you don’t need to be waiting for just fonts to load in.
Here’s the implementation Google recommends:
Now this one is something you will have to experiment with, this is what worked for ME so I wanted to share it so others could try it for themselves.
I originally had the pretty standard way of implementing CSS using the <link>
<link rel=”stylesheet” href=”styles.css”>
But Google Page speed didn’t like waiting for the HTTP request to pull it in and apply to the HTML so I decided to inline all of my minified CSS. So now right in the <head> I placed all my CSS into a <style> which has made the first paint of the site at least half a second faster on slower connections.
I’d only recommend this if you have a relatively small CSS file as making your HTML larger than it needs to be could have negative effects. You could defer the styles like in the point before with some added above the fold CSS trickery.
Forget testing the side loading times at home on that nice internet connection you have, you need to test it on a mobile speed. Chrome dev tools allow you to do this under “Network”.
Set to ‘Slow 3G’ to really test your site speed
Chrome also has an “Audit” feature in the dev tools which can give you some good insights into things like performance, best practices and accessibility as well as a couple of other nifty things.
This isn’t a super in-depth look into EVERYTHING that could speed up your site but I wanted to share the few things that got me to that 99/100.
Thanks for reading, I hope you liked it 🤙 I write about freelancing, front-end development and design.
You can find me on Twitter, Dribbble and Github.
Looking for a Freelance Web Designer & Front-end Developer?
Check out my work.