Compress your website files (html, css, js, php) to increase page load speed and improve positioning
Updated on July 03, 2024
Summary
The term minify refers to the process of compressing a file to make it lighter and faster to load. In French, it's called minification. Despite ever-higher connection speeds with the massive deployment of fiber and 5G, it remains important, even in 2022, to design dynamic, responsive websites. If they take too long to load, users risk abandoning their requests and going to a competitor's site to look for information.
Create fast-loading web pages for better search engine optimization (SEO)
So, by optimizing the code and all the external resources of a page (style sheets, Javascripts, images, fonts...) we send a positive message to Google, informing it that the site has been well designed and that the user experience, the famous UX, has been respected.
By making this optimization effort, Google will increase the site's rating, Rank. This indicator will enable the page to be better positioned in search results and have a greater chance of being consulted.
Minifying a web file means reducing its size by deleting unnecessary characters.
Minification compression is different from zip compression (or rar, gzip...) , which offers archiving (a single file containing several files) and data compression thanks to a complex algorithm (reduction of the space occupied) without loss of quality. In the case of minification, we speak of reduction , as the system will simply remove all unnecessary characters to reduce the file size: certain spaces, line breaks, tabs, developer comment tags... It is possible to minify several file formats: html, js, css, php, with space savings reaching around 20%.
Example of HTML code before minification (335 characters) :
<html>
<head>
<title>Hello World</title>
<style>
body {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #0088ff;
}
h1 {
position: relative;
with: 100%;
font-site: 32px;
Color: #ffffff;
}
</style>
</head>
<body>
<?php
echo "<h1>/Hello world</h1>";
?>
</body>
</html>
After minification, it looks like this, with a total of only 232 characters. The minified code is more difficult to read and understand, so you need to keep the original files to allow for possible coding interventions.
<html><head><title>Hello World</title>
<style>body{width:100%;margin:0;padding:0;
background-color:#08f}h1{position:relative;
with:100%;font-site:32px;Color:#fff}</style></head>
<body><?php echo"<h1>/Hello world</h1>";?>
</body></html>
How to minimize website files
Numerous online tools are available for compressing files. They are generally free and achieve more or less identical results. The www.php-minify.com site has the particularity of compressing all web file formats: php, html, css and js. Querying
Compression work at every level
GZIP compression, for example, is a server optimization that involves compressing the page server-side, while decompression takes place in the browser, client-side. Particularly efficient, it achieves a compression rate of around 70-90%! Sites generated with Sublim.design use the GZIP compression protocol!
Image compression is also very important. First of all, you need to choose the right format (jpg, gif, svg or webp) to suit your needs. Next, optimize the file size using image processing software such as Photoshop.
... all that will be the subject of another article 😉
Use PageSpeed Insights to test your website's technical performance
PageSpeed Insights, is a tool offered by Google to test the loading speed of your website. Simply enter the URL of a page to access a comprehensive diagnosis of its strengths and areas for improvement. Websites created with Sublim.design often score over 80 out of 100!