How to Minify Javascript and CSS | SEO Site Audit Fixes

There are many Site Audit Improvements to boost your SEO onpage optimization to do. In this article you will learn about minifying external media, and how to do it on your own websites external resources (like JavaScript and CSS)

Minifying Javascript and CSS files can contribute to help your website load faster. SEMRush has a great site audit tool, but no matter which tool, most of the site issues will be related to common causes.  In this article I’ll show you how to get your JavaScript and CSS files minified for better load time and performance.

If you are a SEMRush user, you will probably recognize the Site audit section we use as a base guideline. If you are not a user of this amazing product, you are already losing. Sign up and use it – it’s totally worth it! However you can use whichever tool works best for you. The fixes for unminified Javascript and unminified CSS fixes should be similar regardless of what is providing you the information.

WordPress Disclaimer
If you made the mistake of making your entire website built on wordpress – this article might not be for you unless you are a wordpress Guru. WordPress works with custom plugins and builders but this article is more of a general fix for it.

However, there are other solutions on how to get this fixed in your WordPress website, but it’s actually a lot easier if you have full control of your website – which is one of the main things we focus on when we build your website and host it

To fix these type of warnings, you need to make sure you have at least a few of the following:

  • First make a backup of your website.
  • Knowledge on how to update your website.
  • Access to update your website
  • Some basic knowledge of HTML and web design
  • NOT using WordPress. WordPress is great for blogs, but this is a reason wordpress sucks to have as a main website.  

 

First, back up your website!

We cannot stress this enough: Please back everything up before you make any changes – ever – who cares how good you are.
So…..back up your website 😀

Enough BS…. Get Started

Is this important?

We believe it is important – especially if you have a heavy website that needs to load or perform faster. It can have a more negative impacts on your actual live users (humans, remember those?) People are impatient and spoiled with the internet now and they can find information about anything at their fingertips – so don’t make them wait!

Considering all the ranking factors in SEO, and how many are unknown, it’s best to follow the ones we do know to increase the odds and minimize efforts. Having a sexy load time on your website makes Google happy. Will this get you on page 1? Fuck no….but it’s good principle and any little bit of extra effort really hits it in the long run.


What is minifying? 

When developers write JavaScript or CSS code, there are spaces and newlines for readability. However, these spaces are counted as bytes and grows the file in size. Minifying would be the process of removing those spaces

First step is to identify where the issues are coming from. If your tool does not report to you which pages are causing the issues, it might be harder to trace out the issues unless you know your website very well. But if you are working with a larger website and are not properly reusing headers and footers on your website – then you might be in for some serious repetitive work 😀

sem rush site optimization

 

What you see above is a list of all the website page URLS that contain unminified JS/CSS. This will be the guide we use to make the changes.

 

In this example, here are a few of the files detected:

  • /js/jquery.fancybox-media.js
  • /js/script.js
  • /js/owl.js
  • /css/style.css
  • /css/responsive.css

 

Don’t let the large number of files scare you, that just means there are multiple pages with the same issue. If your website is designed and coded well, fix one and fix them all!

 

Your Website and Files

A website is pretty much a bunch of files inside a folder that get rendered and served to your browser by a web server.
For example – the file /js/script.js would simply be a file named script.js inside the “js” folder of your main website folder.

Lets take a look at this code of the main page of the website shown above. In the header section below, we can see the CSS files that are being used. Cross reference those with the ones that are actually listed
html head code sample

Additionally, take a look at the “Footer” section of your website. Here you will find most of the Javascript files that are included. Same here, you will cross reference with the list of files reported, or just minify them all – who cares.
footer html code sample

 

How to minify the CSS and Javascript files

Aww… you thought you were done? Nope…

Now we need to actually minify the files, also change the HTML code to use the new minified file instead of the previous versions of it.

So far, we have a CSS folder, and a folder named JS. My recommendation is to create a new file in the same folder as the one you are replacing. If you are minifying a file called “style.css” you should rename the minified copy to “style.min.css” inside the corresponding js and css folders (or whichever folder names you are using in your website)
Then place the new minified file there with the same filename. This will result in only having to add mini/ to the current path of your JS and CSS files.

In this example I will focus on one file (css/style.css), you can do the same for all the other files you will need to clean this up. You can replace the style.css with the actual filename and folder names for your website configuration

Previous: /css/style.css

Updated: /css/style.min.css

To minify the files, it’s pretty simple We’ll use “css/style.css” as a sample in this case.

  • First open the file for the corresponding page you are fixing
  • Right click → Select All and copy
  • Go to https://www.minifier.org/
  • Paste the code into the text area
  • Then hit the blue “minify” button
    minify sample code
  • Select all the updated code from the textarea as shown below
  • Create a new file inside the css folder with the same filename (style.min.css)
  • Paste the minified code into this file, and click Save
  • Upload this file into the css/ folder with new name of style.min.css 
  • Update your HTML code from “css/style.css” to “css/style.min.css”

 

NOTE

I would recommend doing one file at a time, uploading the changes, and then testing before pushing the code to your website. If you do not have a testing environment, or low traffic, you can just upload it to the main website, but make sure everything still works. If you experience any errors, revert the changes, and try again.

Conclusion

That pretty much sums it up. This should eliminate some of the load drag from your website.

If you need any help with this please feel free to shoot us an email from our contact page https://miamiweblab.com/contact/

Share: Facebook, Skype, Google+ Tags: Business, Corporate, Agency

Leave a comment