Table of Contents
Last update on
Getting the best page speeds is not all about caching.
A caching system isn’t enough to decrease loading time for your pages, and optimize them. You need to take care of your images, and your code.
There are several techniques to make WordPress code faster to load, leaner, and more agile.
With this guide, we’ll explain what we mean when we talk about optimizing WordPress code – HTML, CSS, and JavaScript files.
You’ll also get to know the most popular optimization techniques: minification, concatenation, and GZIP compression.
What Does Code Optimization in WordPress Mean?
One of the great advantages of running a WordPress site is the possibility of installing high-quality themes and plugins to customize the content of your website.
However, you should keep an eye out for the quality of the products you install on your website. Not only should they come from reliable sources, but they should also follow WordPress guidelines.
Installing new plugins or themes on your site is a task you shouldn’t take lightly because their code can severely impact the performance of your website.
A lightweight WordPress theme will typically load faster and be more performance-friendly than a theme charged in graphics, widgets, and special effects.
On the same note, keeping only the plugins you really need to run your site is key for maintaining excellent performance.
Remove and delete all the plugin you don’t find efficient, or don’t need anymore.
After carefully considering how many plugins you need on your site, you can continue to the next step: making sure the code at the basis of your WordPress site is optimized.
Your objective should be eliminating unnecessary downloads of resources, minimizing download sizes, and optimizing and compressing your core files (HTML, CSS, and JavaScript to start). It’s also a good way to optimize your Core Web Vitals performance – in particular, you’ll give a boost to the Largest Contentful Paint grade.
You can do this by:
- Compressing files, which means encoding information using fewer bits
- Eliminating unnecessary data
This can be achieved by adopting three techniques:
- Minification
- Concatenation
- GZIP compression.
What is Minification?
Minification is the optimization technique that reduces the size of your files. It can be applied on JavaScript, CSS, and HTML files.
Size reduction is possible because when files are minified, all their unnecessary whitespace, comments, line-breaks, or extra characters are stripped out from the source code.
If you think about it, whitespace and comments are developer conveniences, but they’re not crucial for the final user. Getting rid of them makes the file more difficult to read, but a lot lighter.
Since minified files are more compact, browsers can serve them to the final user more rapidly.
Furthermore, once minified content is generated, it can be used for an infinite number of requests.
For most WordPress sites, minification is not the definitive solution for a faster site since size reduction usually involves a few kilobytes per site. However, this depends on the theme and plugins you’re using. If their code abounds in JavaScript and CSS files, there’s no doubt you’ll notice an improvement after minification.
JavaScript Minification
JavaScript minification strips out JavaScript comments (// …) and all extra spaces from the source code.
Typically, the source code of a Javascript file can look like the example below.
But, when you apply minification to it, the result will look like the code below.
CSS Minification
CSS minification removes extra spaces and comments from CSS files (/* … */).
Here’s what a common CSS file can look like:
Here’s the result of CSS minification:
HTML Minification
HTML files can be minified as well. Minification removes comments (<!– … –>), extra spaces, line-breaks, and similar content.
When you minify this file, here’s an example of what it looks like:
It’s might be less readable, but definitely lighter.
You can find more details in our guide: Minification Explained In Plain English.
Why is Minification Good for Your Site’s Performance?
According to some Google tests, minification can reduce your page size with up to 63% compression savings.
There are several advantages in delivering minified content to final users.
Here are the most important ones:
- Faster loading times – Your users will receive the same service from your website, but faster. This is possible due to the reduced amount of data processed for each request.
- Saving in bandwidth usage – The networks can transmit less data.
- Lower resource usage – This occurs because each request will process a reduced amount of data.
What is File Concatenation?
Along with file minification, you can concatenate CSS or JavaScript files into one.
To put it simply, this technique copies all the text from CSS (or JavaScript) files, then pastes it again to compose a big, unique file.
The goal is ending up with just one file per type, (CSS or JavaScript) but for compatibility reasons, it can sometimes be better to create a few big files, instead of a unique big one.
Is Concatenation Still Beneficial for Your Site?
Before the arrival of the HTTP/2 protocol, concatenation was considered a best practice, and useful to reduce the number of file requests.
According to our experience at WP Rocket, concatenation won’t bring benefits on HTTP/2.
When using WP Rocket, for example, you’ll notice the reminder that recommends not activating file concatenation if your site runs on HTTP/2 such as in the image below.
HTTP/2 is the protocol that modifies the way data is formatted and transferred between the client and server. It’s based on a binary framed layer.
This means that HTTP messages will be divided into independent frames, interleaved, and then reassembled on the other end. This allows the client to run multiple streams of data within the same request.
In this context, file concatenation becomes obsolete.
Compressing Your Files with GZIP Compression
Nowadays, modern browsers can read compressed HTML, CSS, and JavaScript files. To compress them, GZIP compression is the way to go.
With GZIP compression, your files are “zipped” and sent across the internet in much smaller packets. This automatically reduces the time that’s needed to load those assets for the end user.
Read our in-depth guide to understand what GZIP compression for WordPress is, and how it works.
How WP Rocket Can Help Optimize Your Code
There are several tools that can minify and compress your files. For a complete review of minification tools, you can check out our tutorial on the best free CSS and JavaScript minification tools.
If you want to opt for a complete all-in-one solution, WP Rocket is the easiest way to optimize your code in a few clicks.
Our caching and optimization plugin automatically applies GZIP compression and includes several features to minify, combine, and optimize your CSS and JavaScript.
They’re briefly covered below.
GZIP Compression with WP Rocket
Applying GZIP compression to your files with WP Rocket is an automatic process that happens the moment the plugin is activated.
GZIP compression can only work if it’s enabled on a server-level. The necessary compression rules should be placed in your .htaccess file, which is located in the root directory of your site.
Upon its activation, WP Rocket will apply GZIP compression rules in your .htaccess file using the mod_deflate module. This process is automatic on Apache servers so if you’re using one, there’s nothing you need to do. WP Rocket automatically takes care of everything.
On the other hand, if your site runs on an NGINX server, it won’t have an .htaccess file, and WP Rocket won’t be able to apply GZIP compression rules automatically.
If this is the case, you can use this alternate configuration for NGINX provided by one of our customers.
For more details on GZIP compression, and WP Rocket, check out our documentation.
Activating Minification and File Concatenation with WP Rocket
Minification and concatenation options are included in the File Optimization tab on WP Rocket’s dashboard.
You’ll find a section dedicated to minification and concatenation for CSS files, and another for JavaScript files.
If you enable CSS minification, JavaScript minification, or both, you can exclude specific file URIs from the minify process by copying and pasting them into their respective exclusion fields in the settings.
Generally speaking, minification and concatenation shouldn’t create any issues on your website. If they do, it’s usually because the themes or plugins you’re using have not defined correct dependencies for enqueued scripts or stylesheets.
Troubleshooting minification issues can be difficult when you have a lot of files to check. That’s why we’ve got you covered with our troubleshooting guide.
Wrapping Up
Optimizing your WordPress code doesn’t have to give you headaches. If you use the right tool, code optimization can partly be automated. WP Rocket will automatically take care of GZIP file compression, and add the necessary rule to your .htaccess file if your site runs on Apache.
Minification and concatenation can also make your files faster and lighter by removing unnecessary elements. With WP Rocket, you can easily reach great results in a few clicks.
Save yourself time and let WP Rocket do the job for you!
Our tutorials, documentation, and our support team are all at your disposal if you experience any issues, or if you have questions about these features.
