{"id":2645,"date":"2021-05-28T14:57:32","date_gmt":"2021-05-28T14:57:32","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2645"},"modified":"2023-02-28T04:45:51","modified_gmt":"2023-02-28T04:45:51","slug":"how-to-minify-css-javascript-files-in-wordpress-3-ways","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/how-to-minify-css-javascript-files-in-wordpress-3-ways\/","title":{"rendered":"How to Minify CSS \/ JavaScript Files in WordPress (3 Ways)"},"content":{"rendered":"

Do you want to minify files on your WordPress site?<\/p>\n

Minifying your WordPress CSS and JavaScript files can make them load faster and speed up your WordPress site.<\/p>\n

In this guide, we will show you how to easily minify CSS\/JavaScript files in WordPress to improve performance and speed.<\/p>\n

What is Minification and When Do You Need it?<\/h4>\n

The term \u2018minify\u2019 is used to describe a method that makes your website file sizes smaller. It does this by removing white spaces, lines, and unnecessary characters from the source code.<\/p>\n

Here is an example of normal CSS code:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n<\/td>\n
\n
\n
body {<\/code><\/div>\n
margin<\/code>:<\/code>20px<\/code>;<\/code><\/div>\n
padding<\/code>:<\/code>20px<\/code>;<\/code><\/div>\n
color<\/code>:<\/code>#333333<\/code>;<\/code><\/div>\n
background<\/code>:<\/code>#f7f7f7<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
h<\/code>1<\/code> {<\/code><\/div>\n
font-size<\/code>:<\/code>32px<\/code>;<\/code><\/div>\n
color<\/code>#222222<\/code>;<\/code><\/div>\n
margin-bottom<\/code>:<\/code>10px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

After minifying the code it will look like this:<\/p>\n

\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n<\/td>\n
\n
\n
body{<\/code>margin<\/code>:<\/code>20px<\/code>;<\/code>padding<\/code>:<\/code>20px<\/code>;<\/code>color<\/code>:<\/code>#333<\/code>;<\/code>background<\/code>:<\/code>#f7f7f7<\/code>}<\/code><\/div>\n
h<\/code>1<\/code>{<\/code>font-size<\/code>:<\/code>32px<\/code>;<\/code>margin-bottom<\/code>:<\/code>10px<\/code>}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

Usually, it is recommended to only minify files that are sent to user\u2019s browsers. This includes HTML,\u00a0CSS, and\u00a0JavaScript\u00a0files.<\/p>\n

You can minify PHP files too, but minifying it will not improve page load speed for your users. That\u2019s because\u00a0PHP\u00a0is a server-side programming language, meaning it runs on servers before anything is sent to the visitor\u2019s web browser.<\/p>\n

The advantage of minifying files is\u00a0improved WordPress speed and performance, since compact files are faster to load.<\/p>\n

However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. Minification only removes a few kilobytes of data on most WordPress sites. You can reduce more page load time by\u00a0optimizing images for the web.<\/p>\n

If you are trying to achieve 100\/100 score on Google Pagespeed or\u00a0GTMetrix tool, then minifying CSS and JavaScript will significantly improve your score.<\/p>\n

Having said that, let\u2019s take a look at how to easily minify CSS\/JavaScript on your WordPress site.<\/p>\n

We\u2019ll go over 3 different options you can choose from:<\/p>\n