I always advise the run the test 3 separate times as the website will be under different loads so do the test 3 times and average it.
On the results there are 4 sections you want to look at.
This shows the timeline of how your website loads on a simulated mobile network.
Time to Interactive is the most important result here. That is how long until a visitor can use the page. This is where you measure the results of your speed work.
Google will tell you what you can work on to improve speed. Compressing images, etc. We’ll go into this more in a second.
You get diagnostic results that Google noticed while testing your page
Congratulations!! These are things you got right already!
So what are the items I can change to get more speed?
There are lots of things you can do to make a real difference.
To get more speed, you want less round-trips, and smaller files.
Serve files faster
This one seem obvious doesn’t it?
What I’m actually talking about here is using a Content Delivery Network (CDN). Amazon S3 and Google’s Cloud are two such CDNs you can use to deliver images for you so your webserver doesn’t have to do all that extra work.
CDNs also replicate the data within their network, so that it can get delivered more local to visitors for an extra boost.
As of this writing, Google’s Cloud Storage is $0.026 per GB of multi-regional storage. The transmission service (someone downloads an image) is $0.01/GB if it’s within the same continent.
Which means the average person probably is going to spend $2-3/month and it takes a large load off of your server.
A CDN works great for things that doesn’t change very often. Images, JS, and CSS are common examples.
All of those css and js loading contribute to your website speed so this is an easy way to get some speed on your site for pennies.
Compress your images
In this post, I took each image and visited https://resizeimage.net . You just upload the image on the site in Step #1. Unless you need to change dimensions or such, you can just jump to Step #7 and choose Normal Compression. Hit the Resize button and you then have your results such as this:
The above example is Normal Compression on a jpg file. A 2.74% reduction.
I then compressed the very image above as a png which compressed from 3.7KB to 1.8KB for a 51.4% compression.
So of the existing formations (JPG/GIF/PNG) I go with PNG for this reason. PNG is far smaller by for the same images.
Minify your CSS and JS
The concept is that you make the files as small as possible and they get there faster. Especially if you’re not on broadband at the moment or 4G.
When a file is minimized, the comments, extra spaces, and such are removed in order to make the file as compact as possible.
To minify your css, you can visit https://cssminifier.com/ . Just copy your css into the left box, and then hit the Minify button. Now you have the minimized css in the right box.
Your visitor’s web browser downloads the main page, and then it has to go get the images, css, and js files. Each request takes a little bit of overhead.
If you can put together your CSS files into one big css file, the browser can download that a bit faster than many smaller files.
This one actually helps more than you’d expect for being so simple.
It definitely helps your Pagespeed Insights score as reducing the number of round-trips or requests for images, css, and js, is one of the scoring items.
This one is something you host may have to help you with. The web server itself can serve compressed data which means there is that much less html and css and js to transfer to your visitors. Almost all browsers support compression already.
To see if you have it enabled, check https://checkgzipcompression.com/ . Put in your URL of your page, and if it’s compressed you’re good to go. If not, check with your webhosting provider about enabling it on the server.
As you can see, that’s 74.5% less data that had to get sent to the client because it was compressed. From a mobile-first standpoint having compression turned on for a webserver is huge.
Eliminate Render-Blocking Resources
This one isn’t easy to implement many times, but you inline the necessary js and css, and defer the other js and css until the end of the html page.
Putting it all together
If you do the above items you can easily hit a score of 80 on Google Insights which really does a great job of helping to direct you to the things that help your site faster for your visitors.
Keep in mind the algorithms are always being updated so your score of 100 may not be 100 in a couple of months.
So do another PageSpeed test and see how it compares to the first test.
Those are the big ticket items. There are many smaller items that can be done to fine-tune and it depends on what you’re using to build the HTML or if you’re doing it yourself.
In WordPress there are a few plugins that work wonders like Autoptimize which will concatentate your css, js, and even Google fonts for instance.
I should mention that if you have lots of images on a page, there will just be more work for the browser to do and sometimes that’s a side effect of good content.
Don’t avoid images, video, and giving your visitors a quality experience in order to get a marginally better score.
Your foremost is to give your visitors the best experience. Many items you can optimize both put the page up faster and give your visitors a better visit. But the experience is always your end goal.
I’ll address more minute optimizations along with other SEO topics in upcoming posts.