How to Minify While Keeping Css Easy to Edit
Reducing HTML, CSS and JavaScript is one of many small levers to optimise the loading speed of your website. If you lot look at various pages on the spider web today, you quickly realise that they are in no way comparable to the websites of 10 years ago. In the early days, simple HTML code and a little text was enough. Today, however, websites consist of all-encompassing code, often including HTML, CSS and JavaScript. This is due on the one hand to the range of functions that are at present available for websites, but also to the increasingly all-encompassing designs and templates that are used in web blueprint.
It is not uncommon for HTML, CSS or JavaScript files to exist hundreds of kilobytes in size. In society to process all this code in the files and brandish the website, the web browser sends numerous requests (then-called HTTP requests) to the server.
WordPress in particular is not known for its inherent load time optimization tools. Therefore, you should regularly check the operation of your WordPress website.
The more "requests" are sent, the longer the loading fourth dimension. To keep the number of requests as low as possible, and thus too the loading time of the website, you should compress the files and merge them if necessary.
What does minify mean?
Minification means that all elements created for the readability of the code (i.e. line breaks, spaces, indentations, unnecessary semicolons and comments) are removed from the file in society to reduce the file size. This besides includes the conversion of more circuitous expressions into simpler expressions. Even the identifiers of variables tin can exist shortened, for example by replacing the variable numberOfButtons with n. The effect of minification varies greatly, of form, depending on how many of these elements were included when writing the code, but the file size is commonly reduced by a value between 20 and 40 percent, which tin can exist relevant for your search engine rankings in any case. Minifying always makes sense and rarely leads to issues.
What does compress mean?
Code is compressed by using gzip coding on the server side.
gzip at Raidboxes
At Raidboxes , Brotli is used instead of gzip. What the departure is, we explain in our article.
Here, strings that have already appeared in advance are replaced past a arrow. These pointers consist of much less content than the actual string. This is considering is no longer a cord for the browser, but a reference to the previous cord. The header of the HTTP response will then contain "content-encoding: gzip". The issue of the pinch is extreme; y'all can reduce the file size to near xx percent of its original size.
Reduce loading times
If you accept e'er used a tool similar PageSpeed Insights from Google, you volition certainly know this optimization suggestion: "Minify CSS".
This mensurate is recommended by PageSpeed Insights if the requests to retrieve the CSS files strongly influence the loading fourth dimension of the website. A detailed explanation and explanations of other messages in the tool tin be establish in the article "Google Pagespeed - The virtually important error messages".
I would similar to show you how reducing CSS can influence the loading fourth dimension of your website using a waterfall diagram from my blog bloggiraffe.de. The examples are merely minor sections, merely they clearly show how the loading time tin can be reduced.
Example 1 - Uncompressed:
Instance 2 – Compressed (reduced):
Already when looking at the main domain you can see that I could reduce the loading time from 1233 milliseconds to 860 milliseconds. The loading times of the individual files could also be minimally reduced in some cases.
What happens when CSS and JavaScript files are merged?
Equally already briefly mentioned in the article, when merging CSS and JS files, individual files are combined into a unmarried file.
This ways that the browser - through which you remember a particular website - has to transport fewer requests to the server in society to be able to brandish the website and load whatsoever necessary scripts.
Merging files
The more than "requests" are sent, the longer the loading time. To go on the number of requests and thus the loading time of the website as low as possible, y'all should merge the files.
An everyday example for understanding
Imagine you go to the supermarket and you take 10 products on your shopping list. Only these are located in different aisles and shelves.
Consequence: Information technology takes an incredible corporeality of time until you lot have found every single product and put it into the shopping cart.
Solution: Y'all tell the supermarket in advance which products you need. The supermarket provides you with your products on a shelf so that you lot only accept to put them in the shopping trolley and pay at the checkout.
Result: By grouping all products within one shelf, you but have to walk one style through the supermarket and thus save an incredible amount of time. It works in a similar way with the combination of individual codes and scripts on your website. So that you can see how the whole matter works in do, I would like to show y'all some pocket-size examples.
Saving information not only helps optimise operation.
A witting employ of resource also contributes to making your website more sustainable. You can read more about this at postson the topics of How greenish is WordPress? and Sustainable spider web design.
With some setups - i.east. combinations of plug-ins and themes - merging CSS files and especially JavaScript files can unfortunately also atomic number 82 to problems. The LCP value or other Web Vitals values tin too be negatively affected by this. Whether merging has a positive upshot on your site or leads to bug is something y'all just have to test in the terminate. Don't worry, you tin reverse the setting at any time.
HTML
HTML (Hypertext Markup Language) is necessary for the basic structure of a website. And so the texts, links or even images are output via this.
For instance, a standard HTML code looks similar this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta proper noun="Beispiel-Lawmaking" content="width=device-width, initial-scale=1.0"> <championship>HTML Code zur Komprimierung</championship> </head> <body> <p>Dieser HMTL-Code soll komprimiert werden.</p> </torso> </html>
Minified:
<!doctype html><html><head><meta charset="utf-8"><meta proper noun="Beispiel-Code" content="width=device-width, initial-scale=i.0"><title>HTML Lawmaking zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></trunk></html>
CSS
CSS (Cascading Manner Sheets) is not a real programming language. However, the so-called style sheet language is used to change the advent of individual website elements.
For case, a standard CSS code looks similar this:
/* Add your CSS customizations below this line */ .postal service-content a:not([class*="push"]){ colour:#ff8c00; } .post-content a:not([class*="push button"]):hover { text-decoration: underline; colour: #ff8c00; } .widget-surface area a { color: #ff8c00; } .widget-surface area a:hover { text-decoration: underline; color: #ff8c00; } .master-navigation { font-size: 20px; } characterization.wp-comment-cookies-consent { float: none; } Minified:
/* Add together your CSS customizations beneath this line */.mail-content a:not([form*="button"]){ color:#ff8c00;}.post-content a:non([class*="push button"]):hover { text-decoration: underline; colour: #ff8c00;}.widget-area a { colour: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.chief-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;} JavaScript
JavaScript is a pure scripting linguistic communication originally developed for the output of dynamic HTML in web browsers(wikipedia.org).
A standard JavaScript lawmaking ( wiki.selfhtml.org ) looks like this, for example:
function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; warning("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; } var los = document.getElementById('los'); los.addEventListener ('click', Quadrat, true); Minified:
function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); With the aid of the above examples, you tin see very clearly how the minification of HTML, CSS and JavaScript code works. Advanced and professional users tin can besides comport out this compression manually using a tool such as linkcode-generator.de. Special "minify plugins" or minifiers tin can do this work for you. This not only saves time, but likewise works fully automatically.
four Minify Plugins for WordPress
In the following list, I have listed 5 popular minification plugins that take the work out of compressing HTML, CSS and JavaScript.
Plugins and the enshroud
You should articulate the enshroud of your site after installing new plugins or making changes to the settings.
#1 Autoptimize
The WordPress pluginAutoptimize offers you lot the elementary optimization of your website. With just a few elementary steps, you can compress HTML, CSS and JavaScript files and thus speed up the loading fourth dimension of your website.
Autoptimize moves scripts to the footer, for example, and delays the loading of files such as HTML, CSS and JavaScript, or many other files such as Google Fonts.
Autoptimize for Raidboxes
For a long fourth dimension, Autoptimize was not compatible with other caches, including the Raidboxes server enshroud. This problem has at present been solved - Autoptimize tin once again be used together with Raidboxes without hesitation.
One time you accept the plugin installed in WordPress, yous volition notice several tabs in the settings like "JS, CSS, HTML", "Images" and "Extras". The individual possibilities and options are very well described here and are also very easy to understand for laymen.
In the tab "JS, CSS & HTML" you can choose between unlike optimization options for the files JavaScript, CSS and HTML. The "Images" tab allows you to automatically optimise images and delay the loading of image files.
Under the menu item "Extras", further auto-optimizations can be made, for case for Google Fonts, for emojis and for loading files via third-political party domains.
The most important functions of Autoptimize:
- Minimization / caching of HTML, CSS and JavaScript files
- optimization of images
- Remove Google fonts
- Remove emojis
- Synchronize JavaScript
- Compatible with a variety of caching plugins
#2 WP Super Minify
With the pluginWP Super Minify CSS and JavaScript files tin can exist reduced in size and cached. The accelerated loading of these files is then made possible via the Minify PHP framework.
What is special about this pluginis that it is open source software. The source lawmaking of the tool is therefore open up and can be farther adult by anybody.
There are non many options in the WP Super Minify settings. You lot can simply run into the settings for the pinch of JavaScript and CSS.
Central features of WP Super Minify Plugins:
- Compression / reduction of CSS and JavaScript files
- Minify PHP Framework
#3 Fast Velocity Minify
The pluginFast Velocity Minify enables load time optimization for avant-garde users. On the one hand, it reduces HTTP requests by merging CSS and JavaScript files, and on the other hand, it minimises the files with PHP Minify.
After installing the Minify plugin, you lot will find numerous setting options in the WordPress backend, which may be a flake overwhelming for some. The good matter is that many default settings are already predefined, then that information technology is sufficient for not-professionals to activate the plugin.
For avant-garde users, the pluginFast Velocity Minify offers many gimmicks and optimization options.
In addition, this plugin also offers a Pro version. In this version, y'all have functions for excluding various CSS and JavaScript files.
The main features of Fast Velocity Minify:
- Compression / reduction of HTML, CSS and JavaScript files
- PHP Minify
- Exclude files and scripts
- static cache files
- WP-CLI Support
- Compatible with a diverseness of caching plugins
#4 WP Speed of Light
The pluginWP Speed of Light is besides a WordPress plugin, which combines HTML, CSS and JavaScript files. The powerful pluginalso has cache and Gzip compression, a database cleaning system and also htacces optimization.
In the free version of WP Speed of Light, all standard features for optimising your website are available. In the plugin settings, you tin can select the individual groups (HTML, CSS, JavaScript) that you want to minimise and combine.
In addition, the Pro version of the plugins has a few more than features, such as the exclusion or moving of scripts.
WP Speed of Calorie-free offers also the pure compression of files many more functions, which y'all tin can apply in an easy way via the clearly arranged backend.
The most important functions of the plugins:
- Pinch of HTML, CSS and JavaScript files
- Cache and gzip compression
- Group tools
- Database cleaning
- Paradigm optimization
The plugins in direct comparison
| Merge + Minify + Refresh | WP Super Minify | Fast Velocity Minify | Autoptimize | WP Speed of Light | |
| Gratis of charge | yes | yes | aye | yes | yes |
| Suitable for | Beginner | Beginner | Advanced + Professionals | Beginner + Avant-garde | Beginner + Advanced |
| HTML pinch | no | no | yeah | yes | yep |
| CSS compression | yes | yes | yes | yes | aye |
| JavaScript pinch | aye | yes | yes | yeah | yes |
| Rating | 4/5 | 3/5 | iv/5 | v/5 | 4/5 |
Last thoughts
Reducing HTML, CSS or JavaScript files tin increment the loading time of your website by a few milliseconds. WordPress offers a number of very useful and complimentary plugins for this purpose.
Even if this aligning spiral is just a pocket-sized office of your on-page optimization, it should always exist checked again. This way you tin can brand sure that the loading time of your website is not negatively afflicted by the above mentioned files.
Source: https://raidboxes.io/en/blog/hosting-performance/reduce-minify-css-html-javascript/