The-Write-Guy

How to Minify CSS and JavaScript in WordPress – Increase Website Performance

How to Minify JavaScript in Wordpress - Increase Website Performance

Hey Guys,

For today, the trigger word is Website Performance… Website Performance. Where do I even start with this one? We know by now that there are several little things to consider if you want your website to get a sweet ranking in Google. This could range from making the best use of keywords right, to adding external links , right up to optimizing images and leveraging browser caching.

If you don’t understand any of what I just explained, do not worry. Because I’m about to simplify shit real quick.

First off, to minify is to reduce. And in this case, we are simply trying to reduce the amount/size of the Javascript language for better website optimization. For those of you that manage websites, I am sure you have learned of one of Google’s tools: the Page Speed Insights. All you have to do is type in the name of your website and click ‘Analyse’. The analyser will then give your website functionality a percentage rating on both desktop and phone devices.

If you do not have a 100% rating, Google PageSpeed Insights usually classifies the problems in any one of four of the below headings:

How to Minify JavaScript in WordPress - Increase Website Performance

 

If you click the ‘Show how to Fix’ button, you will get a pull-down list of the errors under each heading.

 

 

Your objective is to do the necessary changes so that when you re-run your website in the analyser, those errors will be gone and your website optimization will be improved.

We will be working on solving the first issue on this list,  which is Eliminating Render Blocking JavaScript etc etc. Retyping the whole thing is a little unnecessary… I think :D.

 

How to MINIFY CSS (Cascading style sheets) and JAVASCRIPT.

  1. On your dashboard, scroll down to Appearance and click Editor.
  2. You will then be taken to a page that contains your website theme’s CSS. Simply put, CSS is a language that determines how your website will look. For example, where your headers and footers will be and the layout of your menu among other things.
  3. Copy everything and paste in a Notepad or MS Word document. Save it. This is because you may need to go back to the original CSS just in case you make a mistake while following the next couple of steps below.
  4. Now, all you have to do is highlight and copy everything from ‘Table of Contents’  ONLY, down to the very bottom of the page. See the image below.
  5. How to Minify CSS and JavaScript in WordPress - Increase Website Performance

 

4. Open https://cssminifier.com/ , paste the copied text in the ‘Input CSS’ box and click ‘Minify’.

5. Your screen should now look like the below snapshot:

6. Now then, Copy the newly minified  code in the ‘Minified Output’ box.

7. Back in your Editor dashboard, Paste and replace the previous CSS, starting from the ‘Table of Contents’ line.

8. Click ‘Update File.’

 

And that, is how you minify CSS in Worpress :). I have added a very good video below that will help you understand the process much better.

And that brings us again to the end of this tutorial. Do let me know if the tutorial was of any help and if you also have any questions, please feel free to ask me in the comments below. Also make sure to see my other articles on this website for great content on online entrepreneurship and learning material from Wealthy Affiliate.

Thank you :).

Leave a Reply

Your email address will not be published. Required fields are marked *