If you have the thirst for optimization when you’re developing a website, and you wish to increase the score GTmetrix, PageSpeed Insights, and other similar services give to your website, keep reading.
Maybe you’re here because you just searched for website optimization or you’ve searched one of the problems or suggestions that one of the above services addressed. I have done many searches on these topics, and in many cases, I ended up implementing my own solutions. Let’s go over some of the solutions that I’ve discovered.
We understand a paradigm as an “example serving as a model” . Usually, when learning web development, we see different examples of code that work the same way. That method works for everyone, but if you wish to delve deeper (no, I’m not talking about the deep web) and expand your skillset, you’ll find that maybe the most widely taught and learned work methods are not always the best.
I’m not discrediting these methods, but sometimes they are just not enough. So let’s explore some alternatives.
How can we change the paradigm?
I remember in my early days as a web developer, I started with handwritten CSS and JS, or as some call it: craft code. That feeling when you finish a project such as creating a form and giving it a handsome style was so great, but the bad news was that it took too much time to do it. Learning the usage of frameworks can help save many hours of work on a website.
But the usage of frameworks out-of-the-box still operates on the standard paradigm associated with that type of project. This is not the same for the framework itself that comes with everything ready to use in just a few files.
The possibilities seem endless when you see all the great things that you can do with frameworks, but there is a silent enemy: unnecessary extra or unused code. As you may know, frameworks come with ready-to-use features, and these features are not weight free, especially if it is a big and complex framework. Do you really need all the features included? I doubt it, so here’s where the change begins.
Divide and conquer
Let me clarify this philosophy.
During the development of your web project, you need to have a readable and modular code to make modifications easily. This is useful for maintenance as well as initial development. As humans, we work better with indented, correctly spaced and logically named code. Browser’s engine doesn’t care how readable your code is, they work better with fewer files, and even more with minified (or compressed) files.
That means you want to: divide and conquer. Browsers: the opposite to divide and conquer. Contradictory, huh?
We are not compatible, so we need to find a way to live in peace.
You get thousands of code lines that you don’t really need, and the code is not minified if you don’t select the correct files (in the case of CSS/JS frameworks) and some other things that you might need to optimize. Is there a solution? Hell yes! Is it easy? That depends on you.
In plain text files, even 10 kB is a lot of space.
How to Reduce HTTP Requests
Here’s where your thirst for optimization will determine whether or not you want to do this yourself. There are a lot of technologies out there that help you with optimization, but they don’t come with the starter pack of web development because these tools do not run on your browser or even on your server (unless you deploy on your web server).
Imagine that you use Bootstrap, along with a lot of jQuery plugins. You can achieve a high level of functionality and style thanks to the framework and the plugins, but you’ll notice that using a lot of plugins is not always a good idea because your site takes too much time to load. The direct problem is not the usage of multiple plugins, it’s the way they’re loading.
To understand this concept, try this experiment:
Take 1000 non-empty files and copy them to a USB drive and take note of the time that the files spent copying. Now, create a container file that contains all the 1000 files, use WinRAR or ZIP without compression ratio (to maintain the same file size) and copy that file to your USB drive. You’ll notice that 2nd case will take less time to finish.
Yes, 1000 is a ridiculous number, but it’s just to amplify the effect.
This happens because the files are loaded through a sort of queue (unless you set the async attribute), and there’s a little time between each file to be loaded. Now it’s making sense, right?
Radio Edit: Join your files into one.
Extended Mix: You need to make sure that during the development you can see multiple files, correctly indented and everything that we as humans can understand, but in your production site you use all the files unified and minified.
Have you heard of tasks automators? This is a good place to implement them. Technologies as NodeJS give you a bunch of tools to build your own task workflow. You just need to work in an organized manner to keep your head in order, because it can easily become confusing.
Create tasks to auto-minify and auto-join files into one. Make sure they are containing only the code you need and exclude the extra features that you’re not using. Make sure the files are as small as possible; as I mentioned above, 10kB of text is a lot.
As you can see, this is not a common way to work. It requires more effort and dedication. You will notice that your site
<head> tag will contain fewer lines, but on the development side, you’ll see all the files you used to load on the
<head> but now that part is not visible.
My method requires a little bit more work, but trust me, stay organized and the little bit of extra work will be worth it.