Sublim.design

Compress your website files (html, css, js, php) to increase page load speed and improve positioning

Updated on May 30, 2024

Summary

  1. Create fast-loading web pages for better search engine optimization (SEO)
  2. Minifying a web file means reducing its size by deleting unnecessary characters.
  3. How to minimize website files
  4. Compression work at every level
  5. Use PageSpeed Insights to test your website's technical performance

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)

Google uses autonomous scripts, Googlebots, which crawl the web from link to link, looking for new pages or new content. These indexing robots visit millions of sites a day and spend very little time on each URL, hence the importance of responding quickly to Google's indexing requests before it moves on to the next page.

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) :

Code
<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.

Code
<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 on Google will bring up many other results.

Php-minify.com

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!

Pagespeed.web.dev

Back to Top