{"id":4206085,"date":"2022-03-24T10:20:06","date_gmt":"2022-03-24T09:20:06","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=4206085"},"modified":"2024-07-05T10:54:52","modified_gmt":"2024-07-05T08:54:52","slug":"minify-css-javascript","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/minify-css-javascript\/","title":{"rendered":"How to Minify CSS and JavaScript in WordPress"},"content":{"rendered":"

Are you looking for a way to minify the CSS and JavaScript of your WordPress site? If you recently ran a performance audit on PageSpeed Insights, you may have noticed the following recommendations: \u201cMinify CSS\u201d and \u201cMinify JavaScript\u201d.<\/p>

PageSpeed Insights flags all your content if it considers that your CSS and JS files are larger than they need to be. <\/p>

This article explains what minification of CSS and JavaScript means, why it\u2019s important for performance, and which online tools and plugins you can use to minify your files.<\/p>

What\u2019s Minification?<\/h2>

Minification literally means stripping out unneeded parts of CSS and JavaScript files to make them more compact<\/strong>. When developers write code, they will include line breaks, white space, and comments which make the code easier to read but are not needed by your browser to process the code. This optimization technique is done without altering the main function and behavior of the general code while significantly reducing their file size. <\/p>

The main benefits of minification are reduced bandwidth usage, page size, and loading times.<\/p>

Which resources can you minify? Both JavaScript and Cascading Style Sheet (CSS) are resources that can go through minification. Let\u2019s go over both optimizations. <\/p>

What\u2019s CSS Minification?<\/h3>

CSS minification means minimizing CSS from the original size to its smallest size without affecting its primary functionality and breaking the page’s design. <\/p>

\"Example
Example of minified CSS – Source: WP Rocket
<\/figcaption><\/figure>

What’s Minification in JavaScript?<\/h3>

JavaScript minification is the process to make the JS code more compact to ensure that the files are parsed through and delivered as quickly as possible. <\/p>

\"Example
Example of minified JS – Source: WP Rocket
<\/figcaption><\/figure>

Note: HTML can also be minified. The resulting HTML page will be a smaller version of the original file, and it will remain a perfectly valid code.<\/p>

What\u2019s the Difference Between Minification vs. Compression?<\/h3>

The main difference between minification and compression is how the file size is reduced. Compression (GZIP) means replacing the repetitive code with a pointer that uses fewer spaces than the text. For example, after GZIP compression<\/a>, you won\u2019t see every single <div or {, in your code file. If GZIP discovers some repetitive text or characters, it won\u2019t display all occurrences. <\/p>

\"File
File size comparison GZIP compression vs Minification – Source: CSS tricks<\/a>
<\/figcaption><\/figure>

Compression is the action to archive files in smaller sizes to make faster requests and reduce the data transfer time. Therefore, compressed code must be uncompressed before execution, while minified code is still a valid code that can be run immediately. <\/p>

Important note: with minification and compression, the page will have smaller resources – consisting of less code – but the visitor will see the same content.<\/td><\/tr><\/tbody><\/table><\/figure>

Why CSS and JS Minification is Important<\/h2>

CSS and JS minification are important for reducing file size, improving page performance, and passing the related PageSpeed Insights audits. Let\u2019s go over the main benefits of minification. <\/p>

Minification Helps to Boost Performance<\/h3>

CSS and JS minification improve your WordPress site’s performance on four different levels: <\/p>

  1. Improve Loading Time<\/strong><\/li><\/ol>

    JS and CSS minification increase page performance and improve the loading time of your site. For example, when minifying JavaScript, you get a lower JS file payload that reduces the time spent parsing scripts. This results in faster page loads and a well-improved page experience.<\/p>

    1. Improve Largest Contentful Paint (LCP)<\/strong> <\/li><\/ol>

      Largest Contentful Paint<\/a> (LCP) is a Core Web Vitals<\/a> metric that measures exactly when the largest element of the page becomes visible for the user. Minification can help to fix the causes of a poor LCP. Both techniques are recommended by Web.dev to improve server response times, reduce JS and CSS blocking time, and improve resource load time.\u00a0The other Core Web Vitals metrics are Cumulative Layout Shift<\/a> and Interaction to Next Paint<\/a>.<\/p>

      1. Reduce File Size for a Faster Delivery<\/strong><\/li><\/ol>

        According to CSS tricks<\/a>, Gzipping reduces the file size by about five times as minifying does. Minification is recommended to give a little boost to your site and speed up data delivery. <\/p>

        1. Reduce CDN billed bandwidth usage<\/strong><\/li><\/ol>

          Minification shortens load time and optimizes the script files, reducing CDN bandwidth consumption for your web pages. A CDN usually charges you by the amount of data transferred from the servers to the customer. As a minified code needs less bandwidth, it will lower the monthly cost of a CDN. <\/p>

          Minification Addresses Specific PageSpeed Insights Audits<\/h3>

          When running a performance audit on PageSpeed Insights, you may see some recommendations related to minification. <\/p>

          In our example below, PSI recommends \u201cto minify CSS and JS\u201d to save 2.47 s and 2.4 s. It also flags the URLs that need to be optimized in priority. PageSpeed Insights triggers the rules below because you can reduce the size of your resources through minification:<\/p>

          \"Minification\u2019s
          Minification\u2019s recommendations – Source: PSI
          <\/figcaption><\/figure>

          As seen previously, minification also affects the Largest Contentful Paint (LCP) grade. <\/p>

          \"Core
          Core Web Vitals (LCP) – Source: PSI
          <\/figcaption><\/figure>

          Now that we have explained what minification is essential for performance, let\u2019s go over the techniques to minify CSS and JavaScript on your site. <\/p>

          How to Minify CSS and JavaScript in WordPress<\/h2>

          You can minify CSS and JS by using online and development tools or with the help of a WordPress plugin (as recommended by Google<\/em>).<\/p>

          How to Minify CSS and JS Without a Plugin<\/h3>

          Let\u2019s go over the main techniques to minify JS and CSS. <\/p>

          Online tools<\/strong><\/p>