Making your website faster for SEO

Making your website faster for SEO

SEO is a very, very broad topic. I’m going to touch on one very important part of it that is broadly misunderstood and often implemented in wrong ways.

Today, when we are moving towards 2020, speed is a big factor over the Internet. Google has announced that webpage speed is a relevant ranking factor and it WILL affect your rankings. This is especially true with mobile devices.

In modern times we have so many beautiful website designs and elements on the pages, that keeping it all together is going to require a lot of interaction between your page, browser and the server. Smaller and bigger chunks of code are downloaded and executed as fast as possible. Images, JavaScript and CSS are downloaded and webpages are being rendered at the same time.

All this is pretty, modern and cool, but it is going to make your page slow to fetch and heavy to read with easily up to 100 server requests. And as I stated earlier, this is not good for your ranking.

So how do you make your page faster but still keep the cool elements?

There are several on-page factors and few off-page factors that need to be implemented.

Let’s first look at all the on-page factors;

I assume your site doesn’t have any dead links? Good, because those are a ranking factor. Also try to validate your page with WC3 validator and have it as clean as possible. Few errors are allowed, WC3 is not perfect.

Move JavaScript and CSS that are not important when the page is loading, to the bottom of the page, before the footer. If you have a Google Analytics script on you page, move it too to the bottom, although Google asks you to place it in the header section.

You need to compress your HTML. This means removing unnecessary comments and line breaks. Make it nice and tight; make also sure that your code is solid without any unclosed tags. If you don’t care to do it yourself, here is a free tool that you can use for the job http://www.textfixer.com/html/compress-html-compression.php

The next one is obvious, but often overlooked; compress your images. This is easily done with Photoshop but there are few good and free services available. http://www.imageoptimizer.net/Pages/Home.aspx is one free and reliable tool, just to name one.

Then let’s move to your main CSS files.

If you have any @import commands in your script, you need to remove them. Nowadays it’s very popular to use web fonts, such as font-awesome and fetch those externally with your CSS file.

Don’t do it! Inline all your fonts and if necessary, download the fonts and place them on your server and call them from there.

Cleaning up your CSS is also very important. You need to compress it, very much like you did with your HTML, but you also need to remove unused script from it. Finding unused CSS can be tricky, especially if you are using a template and somebody else did the coding. Modern CSS files are also often very big, so this can be a daunting job.

However there are certain services that you can use to help you get the job done. I recommend using https://unused-css.com/ service which works really well. You can get for free, but need to do the edits to your CSS files by hand, or you can pay a monthly fee and download the ready CSS files.

Please keep in mind that there are many services online but not all are reliable. Always backup your files before you do anything to them!

The last thing you should do, if possible, is to combine some of your CSS files. It is recommended not to use more than 4 external stylesheets to keep your page speed competitive. There are some tools online that help with this, but this is more advanced work and you need to know what files certain page is calling for and you need to change many filenames and header links. I haven’t found any easy tool for this online yet, but I’m sure somebody comes up with this service soon.

As I said earlier, you should move all your CSS and JS files that are not needed when the page loads to the bottom of your page, before the footer. Usually you can’t move your main.css or style.css but if you know what elements are triggered when the page loads, you could inline these elements from the script between your head tags and move the rest to the bottom. In the old times all CSS was inlined like this, there was no external stylesheets and pages loaded faster.

Now let’s move to the off-page optimization

First I should mention that there are some tricks that you can do to speed up your page by modifying your .htaccess file. The .htaccess files lies on your server in your webpage root folder, and if you don’t know what you’re doing, it’s recommended to leave this file alone. This file is usually hidden because if you do modify the file incorrectly, it can shut down your entire site. Suffice to say in this short article that you can create cache control requests to .htaccess file that will enhance the user experience and make some elements load faster. This is especially good for people who visit your site more than once.

Make sure that Gzip is enabled by your server. Gzip works between the browser and the server and compresses the loaded files and can be a big help with page speed. This is very important and you should immediately run a test to see if Gzip is enabled. Go here to run the test: http://checkgzipcompression.com/

Most modern servers have Gzip automatically on, but if not, you can always ask them to turn it on, or move your site within the server to a location which has Gzip compression.

Another good off-page service is Keep Alive. Keep Alive is a service that also operates between your server and browser and speeds things up by resolving connections and not executing unnecessary cryptic commands.

If your server has Keep Alive enabled, good for you, but if not, you can enable it from you .htaccess file by running the command <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

We warned though; depending on your server’s configuration, this might shut down your site temporally. If you do this edit in your .htaccess files, check immediately that your page is still up and running by going to it from your own web browser. If the page is down, move the code from .htaccess and consult your server administrator how to implement Keep Alive for your site.

Something new

There is a new PageSpeed Module developed for Apache servers, which takes care of most of the loading problems with CSS, JavaScript and images. It is open source and has been available for some time, but not many servers use it, because it’s not suitable for all, depending on the configuration. Tests are however running and from what I hear, it is going to be implemented on many servers soon.

You can check the details here: https://developers.google.com/speed/pagespeed/module

Final words

That wraps up this short article. These tweaks can make the difference why you rank better than your competition. It takes some work, but if your income is based even remotely on your webpage performance, it will pay you back quickly.

If you do the above mentioned tweaks, search engines will like your page much more and it will increase your rankings.

Good luck!