Optimizing a site’s loading speed is no piece of cake; especially if you want it to be pretty, shiny, animated and gushing with color. In other words, when our site is overloaded with Java Script and CSS sheets.
If you’ve ever touched Pagespeed Insights or a tool like GTMetrix, you surely already know that you need to get rid of unnecessary CSS and JS code from your site to speed it up.
Spis treści
Why do we actually need CSS and JS
First, a quick introduction for those not on the topic:
Java Script (JS) – a scripting programming language. Without going into details: Java Script included in the site’s code, or included as name.js files, is responsible for – to put it ugly – the visual and usability bytes on the site. Scrolling, logging, animations, pop-ups, analytics – all of this can be done through JS scripts.
CSS – cascading style sheets – a type of language used to control the appearance of individual page elements. Like any language, it allows you to write pretty neat, sensible code, or a blown-up meaningless tangle contained in 20 different .css files
A moderate amount of CSS and JS code is, of course, not only acceptable from an SEO point of view, but even necessary for 99% of websites to function. The problem arises when the code starts to grow for no reason. Each additional line of JS or another CSS rule is more data to download. Each subsequent file is another query to the server. Each external file is another server to be queried.
Solving the problem [zobacz memy]
Step 1: Remove plug-ins and what is unnecessary
A standard scenario repeated at the beginning of the journey for many of my clients:
- website on wordpress
- 40 plugs, approx. 4 needed, the rest is garbage
- 30-40 worksheets and .js files attached to each subpage
Here is the result of an analysis of the website of one of Poland’s leading electronics distributors:
This page has 42 external Javascript scripts. Try combining them into one. This page has 35 external stylesheets. Try combining them into one.
Agencies creating sites with builders and solving every task with ready-made plugins really don’t give a damn, but loading such immeasurable amounts of junk into a site’s code is wrong in so many ways that I don’t know where to start.
Therefore, I will not start. Let me be brief: remove everything you don’t need. This is the first and easiest step.
Step 2: Merge and minify the code
If your JS or CSS code is spread across 15 separate files, be sure to merge everything you can into fewer files. Theoretically, there will be the same amount of code to download, but there will be far fewer queries to the server.
It is also a good idea to minify the code, that is, reduce its volume by removing unnecessary characters, comments, indentation, etc.
Do it with your head
Of course, no one in their right mind would do this by hand (well, except maybe in exceptional cases). The matter is simple if you use a popular CMS – for example, for WordPress, a properly configured plug-in like W3 Total Cache works perfectly for merging and minifying. If you are operating on another (even a custom system) then there is no problem – the solutions are endless:
You can also minify other files, most notably the HTML code itself, which I recommend especially for clutterers like me. Order in the code without any effort.
Step 3: Coverage function in Chrome DevTools
If you want to do SEO, you need to know DevTools in the Chrome browser.
If you want to do good SEO, you need to know the hidden functions in DevTools.
Paulo Coelho
One of the hidden (or at least not particularly exposed) features of Chrome’s tools is Coverage. It shows what percentage of loaded JS scripts and CSS sheets are actually used.
As I write these words, Coverage is still a feature hidden under “More Tools.” However, I have no doubt that in some time it will move to the main resource of tools, because, most simply, it is much needed by webmasters.
Coverage makes it very easy to see which code snippets are actually being used on our site and discard code that doesn’t make sense to load.
With Coverage, we get information:
- what percentage of declared rules, functions or variables are actually called when the site is fully loaded
- For each file, the red color indicates the fragments that have not been used.
How to fire up the Coverage feature
- go in Chrome to the page you want to examine
- fire up DevTools (F12 or Ctrl+Shift+i or right on any item and “Examine”)
- Ctr + Shift + P fire up the command line and type Coverage*.
- We start the registration by clicking on the black dot:
- refresh the page
*instead of the command line, we can also click on the 3 dot icon -> More tools -> Coverage
As you can see, the room for savings is large, and these types of results are the norm:
However, it is important to note that even if a particular code has not been used on the analyzed pages, it does not mean that we can immediately delete it. Who knows when you’ll suddenly discover a predilection for using, for example. <blockquote> and you will start to push this element wherever you can, without semantic justification (as I did, in this paragraph).
Coverage’s biggest sin
A fatal misunderstanding is the fact that Coverage recording is restarted after moving to the next subpage.
In the first versions (Canary) the problem did not exist and Coverage collected data as long as the data logging button was pressed(relevant post on Stack Overflow).
I understand that the tool is still in its early stages, but since it has found its way into the stable version of Chrome, it would be nice if it could be used to its full potential.
Either way, the bug will probably be fixed in some future version of Chrome.
Alternatives to Coverage
- Unused CSS – paid tool
- Purge CSS
- PurifyCSS Online
- for JS alternatives I do not know
… and on top of that, none of them are perfect.
Still not all clear?
If, despite such a brilliant guide, cleaning your site from unnecessary code is still a black magic, I invite you to contact me. Let’s see what I can do for your site.
