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?
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 😀
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:
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
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
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
- 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”
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.
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/