Improve Your Website Loading Speed For Your Visitors

Everything is about speed nowadays.

Rush rush rush.

Your site has great content and good things come to those who wait.

But if you want to get ahead of your competition by having the fastest site, then this article is going to be for you.

I’m going to give just a little background on why speed is important for having Google smile down on your site.

Then I’m going to give you how to implement the major items such as compression, image optimization, and reducing round-trip for your visitors.

Make sure to save your before and after of your speed tests and I think you’ll be amazed what is possible with covering the big-ticket items.

The only thing you need to have in place before applying these tips is your website and the will to rank better.  If you don’t have one yet, this is a great time to set your website up.

Google is now Mobile-first

What that means is that having a fast-loading website (well under 2 seconds, with being under 1 second optimal) is mandatory.

In January 2018, Google publicly stated that website speed was going to become a ranking factory. In July 2018 it took effect. You can read more in the Google article.

How important is being fast and how much time do you have to put the page in front of your visitor?

Looking at the chart, Google wants you really towards the fast end of the curve.

Remember, this is mobile-oriented and on phones people may not have the best connection so aim for the best and in less than ideal situation it’ll still be quick enough.

So you want more speed? Let’s make it happen!

Step 1: Head over to Google’s PageSpeed Insights for their review using the Lighthouse toolset at https://developers.google.com/speed/pagespeed/insights/ .

Put in your url.  You’ll get two scores, one for Desktop, one for Mobile.

A score of 50 is the 75th percentile.  100 is the best possible score which represents the 98th percentile.

To read more about the scores pieces, v3 of the Lighthouse scores has its own page: https://developers.google.com/web/tools/lighthouse/v3/scoring.

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.

Lab Data

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.

Opportunities

Google will tell you what you can work on to improve speed.  Compressing images, etc.  We’ll go into this more in a second.

Diagnostics

You get diagnostic results that Google noticed while testing your page

Passed audits

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.

A web browser will get the main page, and then go back and forth retrieving each image, javascript, css, and frame.

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.

Similarly, https://javascript-minifier.com/ will minimize your javascript.

Concatentate CSS and JS Files

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.

Enable Compression

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

What this one means is that javascript or css may be necessary just to display the content.  The content can’t be displayed until the javascript is then loading which means it takes longer for your visitors to start seeing something on their screen.

For javascript such as Google Analytics, move those to the very bottom of your html.

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.

Inline means that you have on the page actual <style></style> and <script type=”text/javascript”></script> right in the page instead of including a seprate css or js file.

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 on-page SEO topics in upcoming posts.