To understand the process, take a look at the screenshot below:
Each comment and empty line adds to the size of the document, without affecting the way it’s rendered. By removing all comments and empty lines, you can achieve ~50% reduction in the size of the file, without changing the meaning of the code.
You can either minify files manually or use a plugin, such as W3 Total Cache. Using a plugin has both advantages and downsides, though. Advantages count automation of the process and eliminating the need of a child theme. Downsides count possible malfunctions, plugin incompatibility, and slower pages.
OBS! It is recommended to keep a developer-version of minified files with the original comments to make code updates easy. Minification should only be applied to files that are ready for publishing.
Please note! If you are using a custom WordPress theme, where future updates are a part of the contract, you must instruct the developer to minify files before releasing them. If using a mainstream WordPress theme, you must create a child theme, copy all text-based files to the child theme’s folder and apply minification to these files to avoid that future theme updates overwrite them, adding comments and spaces again.
GZIP is enabled by default on most servers and automatically requested by browsers but you still need to take a few steps in order to activate it for your site. The process is exemplified here, using cPanel.
Please follow the following steps to enable GZIP for your site:
- Log into cPanel
- Navigate to the Software tab and click on Optimize Website (encircled).
- Click on Update Settings. That’s it.
Sometimes, you don’t have the option to automate the GZIP compression via cPanel or similar server software. In such cases, you can enable GZIP by adding the following lines of code into the .htaccess file, found in the root directory of your domain on the server: Be aware that .htaccess is a hidden file, meaning that you have to check the option to view hidden files in order to see it in the file tree on the server.
If you host your site on a shared server, it is recommended to contact your web host or read their instructions on manual GZIP implementation before proceeding, as recommended or allowed settings can differ from server to server.
Check Compression of Text-based Resources
After implementing the two-step optimization process, you should check, whether the minification and GZIP compression are successful. You can do this with tools as GTMetrix.com or PageSpeed Insights by Google Developers.
As long as you get results, similar to the ones in the screenshot from GTMetrix below, you are good to go.
Please note that the site from the example scores 99% on the three minification recommendations. This means that there is something that can be optimized a little bit more. If you open the recommendations, you’ll find links to resources that can be optimized further, making it easy to locate them. However, you can also be completely satisfied with a score of 99%, as long as your site scores high on the rest of the recommendations.
OBS! Some scripts are dependent on execution order. Such scripts should not be loaded asynchronously, as scripts using asynchronous loading aren’t executed in specific order.
From optimization point of view, it is not optimal to defer everything or load it asynchronously, simply because different scripts require different treatment in order to not affect page performance negatively.
Once you have identified the scripts, note down their unique names (marked in the screenshot). Then, depending on their importance and function, you can decide, which ones to defer and which ones to load asynchronously.
When ready, save the file, without changing its name, and upload it to the server by replacing the existing one there. Remember to perform a check with the same performance tool you used before to make sure the fix worked. Remember also to check, whether the applied optimization doesn’t mess up with the way your site functions.
NB! Some scripts do not tolerate deferring or asynchronous loading! Test therefore script behavior for each script you are looking to optimize.
CSS is considered to be render-blocking because the browser usually waits for the CSSOM (CSS Object Model) of a page to be built before rendering the page. As a result, the download of any external styles and the execution of inlined and external styles affect page speed negatively.
There are several recommendations, when it comes to optimizing CSS:
- Inline critical CSS. By inlining critical CSS, a roundtrip needed otherwise to download the resources, is avoided. Thus, you can save valuable milliseconds. Just remember that it really has to be critical CSS you inline. Aggregating too much CSS in a HTML file isn’t a good practice and affects page speed negatively.
- Avoid using the @import rule. This rule is used to import styles from one stylesheet to another, especially when using a child theme. It is, however, recommended to handle the import in another way or, optimally, avoid it altogether, as the @import rule adds additional roundtrips to the process of CSS discovery and download.
- Use “media types” and “media queries” to make non-critical or conditional CSS non-render-blocking. By adding a media type or query, specifying when a stylesheet should be requested, you can instruct browsers to treat some CSS resources with lower priority, while prioritizing critical resources. The screenshot below shows an example of using media types to make one CSS resource non-render-blocking (marked as only needed in case of portrait view).