Important Update
Ah, SEO. Being ranked high in search engines’ results is important for many website authors as – if SEO is done right – search engines generally drive visitors interested in your content to your website. But people think that SEO is only related to how you manage your content and which keywords you put on your pages. In reality, SEO is really broader than that.
Don’t forget that search engines are powered by bots – hello Wall-E! OK, humans are a part of this process, they adapt algorithms of bots to make them more relevant but ultimately, it’s a bot which will visit your website and it’s also a bot which will be in charge of the ranking of search results, deciding what result deserves the first place – the 2.0 Graal – and what is less or more relevant.
Various studies have shown that people are sensitive about page loading time. If a page takes too long to load, the visitor will be more exigent about your website than the visitor would be on a fast loading website – and even worst, some prefer to leave before even the page is finished loading!
And it turns out bots are good at determining if your website is optimized and will load fast. After all, in order to index your page, bots need to load it! That’s where SEO becomes Technical: let’s enter tech SEO!
Here, I will show you how to optimize your website without touching your design or your features, but only using CSS optimization techniques & enhancing JS performance by compiling your code with automated tools. Sounds like you’re interested so let’s start!
One of the first SEO techniques to apply is to minify CSS. You might think it’s better to focus on JavaScript but CSS code is what brings design to your page and, for example, you can start reading content even if Share buttons aren’t available, that’s not much a problem. But reading content without the website’s design isn’t possible. Looking carefully at the ordering in which resources are loaded and improve loading times of important resources are two tasks commonly associated with CSS mobile optimization.
A CSS minifier is the tool that will help you there. It will take a sane CSS file written by a human and optimize it as much as possible so it means the exact same thing but removing anything that is useless for computers or searches engine bots. For example, developers generally write CSS code with whitespace between each block, each CSS property is on its own line, and includes comments so you know the purpose of CSS code. Just like this:
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
font-family: sans-serif;
}
/* Use the hand cursor with buttons. */
button:hover {
cursor: pointer;
}
However, your web browser doesn’t care at all about your comment. In fact, it has been designed specifically to ignore your comments. Same for all spaces everywhere: it’s symbols like colon, semicolon, or brackets that will tell what CSS line belongs to which HTML tag. So if you remove all of that and applies some tricks specific to CSS, you minify CSS using the tool and obtain something like this:
body{font-family:sans-serif;margin:0}button:hover{cursor:pointer}
Please keep in mind that both CSS codes – even if it doesn’t look similar – mean exactly the same thing to a computer. Yes, I know, it looks weird at a first look but if you take the time to read it carefully, you will see that it’s in fact just your CSS code, compressed.
So now it’s time to have a tool to minify your CSS code. Well, to be honest, in pure theory you could write yourself the hideous code above, but that’s really hard to do it as a human, and even worst, the tool will likely beat you anyway and make a smaller code. After all, the tool uses tricks and tips from the CSS specification – and given how it’s lengthy it’s better to leave this job to the tool.
So the minifier we’re going to use here is CSSNano. As we’re doing SEO, I think using the recommended tool from the most popular search engine – you’ve guessed right, Google – is an appropriate choice.
Time to install it. You will need first to get Node.JS on your computer as this software is written in JavaScript and needs to write files in order to work. Once Node.JS is installed, you have to run the following command in your web application folder:
npm install cssnano --save-dev sudo npm install postcss-cli --global
Then, you need to create a file called postcss.config.js to tell the software to use default values. Here’s the file’s content:
module.exports = {
plugins: [
require('cssnano')({
preset: 'default',
}),
],
};
Now you can minimize CSS right away using this command:
postcss style.css > style.min.css
There you go, you can now compress CSS and you’ve completed one step in this technical SEO guide! Please note you can also use this CSS minifier via Gulp, Grunt and WebPack if you already use it in your project.
Let’s now take a look at the next step of how to enhance your technical SEO when you use JavaScript.
CSS isn’t the only kind of code that uses more space than it’s needed for it to work. We’ve looked first at CSS because it will be the really first thing to load on your website, but that loading spinner is clearly tiring and you don’t want it to run for too long, even if the visitor can start reading.
First, search engine bots will probably take in account two loading times: when you’ve content displayed on the page and when the page is fully loaded – and that assumes the bot is smart, otherwise, it will only consider the latter. While you certainly shouldn’t be obsessed with metrics, you want to get them right.
Second, loading a website affects performance. The fact website isn’t finished loading drains battery which is clearly not cool for your mobile visitors. The browser will repeatedly refresh the display at each time there’s a new element or script loaded and so ultimately you want to be in this state as little as possible. Therefore in order to get the better ranking you probably deserve, it’s important to consider JavaScript code as well.
Getting compact JS isn’t as simple as it is for CSS. Generally, if the tool does anything wrong, in CSS you will notice it right away. For JavaScript, you will need to test again all your application in case minification broke something or also reveals a bug that was latent in your code. JavaScript is a programming language and it allows to add complex features to your website, so we need to be more careful.
But the fact JavaScript is a programming language also allows getting better compression than it’s possible with CSS: the tool can literally rename some things in the code, or change the syntax used to save code size. Even better, the tool can sometimes optimize code, a way to do advanced technical SEO.
OK, I see you now want to optimize your JS code. Google is your friend, right? Well, then your friend has a good utility that can help you with this task. It’s called the Closure Compiler – by the way do not confuse it with Clojure, which is another programming language. Notice it’s named a compiler, not a minifier. That might feel counter-intuitive, especially for C programmers out there. No don’t worry, JavaScript isn’t going to be in machine language because of Closure Compiler.
In order to get the best results – and that’s why I recommend this software – it parses JavaScript and analyzes it as deeply as browsers do to execute the code. Then it tries to compress JS after analysis and it takes this analysis and converts it back into the code, but minified. All these steps allow for the more optimized code. In advanced mode, it’s possible to remove JavaScript code that is never called or to optimize more deeply JavaScript classes.
You may want an example, right? Here’s a snippet of JavaScript code:
function findOption() {
var selectList = document.getElementsByTagName("SELECT");
var select = selectList[0],
optionList = null;
// If the name of the select is disabled, ignore it.
if (select.disabled) {
return null;
}
optionList = select.getElementsByTagName("OPTION");
for (var optionIndex = 0; optionIndex < optionList.length; optionIndex++) {
var option = optionList[i];
if (option.disabled) {
return null;
}
if (option.selected) {
return option.value;
}
}
}
And here’s the minified version from Closure Compiler:
function findOption(){var a=document.getElementsByTagName("SELECT")[0];if(a.disabled)return null;a=a.getElementsByTagName("OPTION");for(var c=0;c<a.length;c++){var b=a[i];if(b.disabled)return null;if(b.selected)return b.value}};
I guess you now want to try it out on your code, right? Unlike CSSNano, Closure Compiler is a Java program, so you’ll need to install Java Runtime Environment 7 on your computer – if you’re lucky, JRE 7 is already installed as other popular applications use it as well. Then, to start using this new tool, you need to download it from this page. Download link is near “Download the Closure Compiler package” title.
Afterward, create a folder for Closure Compiler and extract the zip you just downloaded in this new folder. Then, you can minify JS using the following command:
java -jar compiler.jar --js main.js --js_output_file main.min.js
And now you got your compressed JavaScript file! Please don’t forget to adapt the compiler.jar path and filename in the command.
You might be tempted to delete style.css and main.js to keep only their minified version, style.min.css, and main.min.js, respectively. But it would be really wrong: minified versions are really hard to edit. In fact, it’s even hard to read and understand, as you can see in the examples above. In order to not waste your time, just keep both versions. However, in version control repositories like Mercurial, Git or SVN, it’s generally a bad idea to add minified files in repositories: it tends to be hard to maintain and repositories’ storage systems can’t compress minified files across multiple revisions, so in the end, it will waste MiBs of disk space, which is not what you want.
It would be cool to have a 3rd way to help your technical SEO, wouldn’t it be? Good news for you then: I have a few other tips to give you. Let’s introduce another compression technique that works behind-the-scenes: HTTP compression.
Here, HTTP compression would help to optimize CSS delivery. Basically, server compresses automatically files before sending them over Internet and visitor’s web browser transparently decompresses them before displaying them or parsing them. During the compression process, it will replace the word “background” with a much shorter binary code. In some ways, it does remove duplicate CSS. And it works: a minified CSS file of 20.5 KB only weighs 2.8 KB when compressed by HTTP – that’s a 86% decrease! If only I could compress my bills that way…
So far our technical SEO guide focused on minify CSS and JS. But performance is also dependent of HTTP compression. For example, in CSS syntax – even when it’s minified – when you need to set the background of an HTML element, you need to use the word “background”. And given we often set the background in CSS, you might find many occurrences of this word in your CSS file. This is a waste of space.
The first step to benefit from this improved performance is to check if it’s already enabled on your website. For that, you’ll need the 3rd of the technical SEO tools featured in this article, wget command-line utility. It’s included in all Linux distributions but it’s also available for Windows via Cygwin terminal (recommended) or via GNUWin32 project. Once you have wget, type the following command:
wget --output-document=test.html --server-response --header="Accept-Encoding: br, gzip, deflate" "https://www.example.com/"
Don’t forget to change the website URL with yours.
Check in the output if you see any of the following 3 lines:
Then, it means that HTTP compression is already enabled. I recommend you to use this command to check your website’s homepage, a CSS file hosted on your website, and a JS file also hosted on your website.
However, if HTTP compression is disabled, you need to set up your HTTP server and maybe your PHP server to enable HTTP compression. What exact steps you need to do depends on your current web hosting provider. Generally, checking help support articles from your web host or reading HTTP/PHP server manuals is the best way to find how you can enable HTTP compression on your website.
So, let me summarize. When you own or create a website, you want a technical SEO audit. To help you to not miss any step of this – wonderful – article, here is the technical SEO audit checklist to follow:
Now, if you’ve followed all these steps, your website should perform really better than it used to be and so your ranking will get better as well – give me five Google, I’m faster. And, as an added benefit – the cherry on the cake – users will be happy to see your website loading more quickly!
It’s cool to learn technical SEO, isn’t it?
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
For many users, the Mac's OS X is one amazing user interface but for security researchers, programmers, and system administrators Mac's command-line interface is an...
There is a very interesting similarity between Robotic Process Automation and the BPO sector. Both of them are strictly interested in outsourcing the job. In...