The Way to Minify/Compress JavaScript Files and CSS Stylesheets
The Way to Minify/Compress JavaScript Files and CSS Stylesheets
The minification or compression procedure is the practice of removing unnecessary characters and white space from JavaScript and CSS stylesheet code to decrease its size, thereby improving your website loading and speed times.
When JavaScript or CSS stylesheet's files are minified, all the comments are eliminated as well as the unneeded white-space.
This minification process for JavaScript files and CSS stylesheets will improve response times and internet performance on your WordPress website, because the dimensions of the downloaded document is reduced.
The document size savings can vary anywhere between 10% and 38%, depending on white-space and non signal associated .
Minify/Compress JavaScript and Stylesheet Files
This one is fairly straight forward... compress your CSS stylesheets and JavaScript files to boost your website's speed.
Even though this is a very simple task to finish, this is for the individual that has an idea for which files they would like to minify.
All you need to do so is to back up your documents before you compress your CSS sytlesheet(s) or JavaScript files.
Especially the CSS stylesheet file, that is produced in a way which is easy to change, this will be a document that you will most likely need to backup before compressing.
Even if you're familiar with changing a stylesheet, you may wish to make a back up file in another title, since after minifying a CSS stylesheet, then it will look like it was processed in a blender.
Below are screenshots of a typical CSS stylesheet and also the same one after it's been minified.
Ahead Minifying or Compressing Our CSS Stylesheet
All the remainder to the right of the image is white-space.
After Minifying Our CSS Stylesheet
This might be tough for the person to trace and comprehend the code, however it is a slice of cake for the browser to read.
Minifying CSS Stylesheets to Reduce File Size
If you would like to go down this road, then you are going to need access to a WordPress website... you'll need to find the CSS stylesheet within your WordPress theme.
It ought to have a similar file name to'style.css', but to make certain, you are able to get your source code and appear at the top of your page and look for a URL that ends with'.css'.
To access your Source Code, right click your mouse, then click on'View Page Source' or whatever wording is employed to see your'Source Code'.
css'.
Once you've done that, it will be time to search for your file within your own WordPress theme and also re-save the file as another name for a backup.
If you are utilizing Dreameweaver or Filezilla to access your Wordress website, I am going to make the assumption that you have some basic understanding for accessing and modifying your site's documents and information... you can follow the identical path as I describe it for the cPanel.
-- -- -- --
Log in to your cPanel, go to your'File Manager' link (under'Files'), open the'File Manager', click on the folder which contains your WordPress website, whether it's'Public_html','www' or any other name.
From your cPanel's left side files, click on'wp-content' >'topics' >'your-theme's-name'... when you click on your theme's name from the left panel, each the files should show.
It's time to look for your stylesheet... it could be from the directory of your theme or possibly in a folder that would most likely be marked'css'.
Once you find your CSS stylesheet, it's time to create a new one using a different name for backup purposes.
I have always used something very similar to'style_raw. Css' to signify that my stylesheet is in its raw or original state prior to compressing.
To be able to make a new file named style_raw. Css or whatever name you've chosen, click on the + sign (top-left) to add a'document' (not folder) and name it'your_chosen_name. Css' and click on the'Create New File' button.
Now that you have your brand new backup CSS document, it is time to go to your original CSS stylesheet, find the'style.css' file or whatever the name of your stylesheet is, only click on the title to highlight it.
Click 'Edit' or'Code Editor' (doesn't really matter which one at this point) in the top (above all the documents ).
Put your cursor anywhere inside the Edit box, then with your keyboard, hit Ctrl + A to highlight the code, then Ctrl + C to copy the code.
Now return to your backup CSS document and hit Ctrl + V on your keyboard, or right click and then Paste the code into your backup file.
-- -- -- --
Time to Compress Your CSS Stylesheet
At this point, you need to be able to visit the Online Minifyer tool to compress your stylesheet.
If you need to recopy the stylesheet that you want to minify, go ahead and do this now, then paste your stylesheet code into the CSS compressor box (link below) and click on the'Minify' button.
When it has done everything, replicate your minified code in the box and then paste it back into your'style.css' stylesheet (or whatever your initial theme's stylesheet title is), then save the document... pretty easy.
You are able to verify it all worked out OK by seeing your Source Code again, locate the URL to your stylesheet and click it.
You need to see one single line moving from the left side to the right side... if not, hit F5 on your keyboard to refresh it.
Here's What the Compress CSS will do for your file:
Removes useless white spaces, indentation characters and line breaks
Strips all remarks
Removes the final semi-colon of a style statement and extra semi-colons
Removes empty CSS declarations
Removes components when utilizing zero worth
Removes the leading 0 if a float value is lesser than one
Changes RGB color values to a briefer hexadecimal format
Hexadecimal colors following the pattern #AABBCC are reduced to #ABC
Keeps one charset each CSS file removing all extra declarations
None values are converted to 0 if safe to do so
NOTE: You can do the same with your WordPress plugin stylesheets if you choose, but keep in mind that each time you upgrade a plugin, the stylesheet will be overwritten, so it kinda seems like a waste of time.
It is possible to discover your plugin stylesheets inside the folder named'plugins' which you will find in the'wp-content' directory.
Well... there are a number of reasons why compressing your javascript files are a good idea:
Quicker download times for your customers.
Reduced bandwidth consumption of your website.
Remarks and white-space aren't required for JavaScript execution; Removing them will reduce file size and speed up script execution times.
Here's the thing... your WordPress theme will most likely have a large number of JavaScript files, but you will not be using them all... you'll be blessed if you're using 1/2 of them.
A number of them are there in the event you decide to use some form of operation with your theme.
If you are not using all the functions on your subject, then your JavaScript will not be triggered, meaning it will not be utilized, which is going to be a lot of minifying for nothing.
In case you decide to move forward anyways, you'll need to locate your JavaScripts... that they will most likely be in a'js' folder inside your subject.
The odds of anyone ever changing a JavaScript file is really slim, aside from the initial author.
So, it will be up to you if you opt to make a backup of your originals using the phrase'raw' or'first' into the document name.
You can copy then paste your JavaScript code to the compressor box with the hyperlink below.
JavaScript Compressor/Minify JS
NOTE: One thing you may find with many JavaScript documents are that they are already compressed by the author, but it's well worth a look to discover.
You may find out by seeing your source code... find a JavaScript file which you want to test, and click on the hyperlink.
If it's in a straight line from left to right, then it's already compressed.
Closing Opinions for Minifying JavaScript and CSS Stylesheet Files
This is a no-brainer... in case you minify your stylesheets or JavaScript files, you'll be saving somewhere between 10% and 38 percent of your document size, meaning faster downloading of your pages.
In Future Articles -- We will be discussing added WordPress Performance problems, so be sure to put your email address in the box below for telling.
You Also Read:- Convert your text to html
The minification or compression procedure is the practice of removing unnecessary characters and white space from JavaScript and CSS stylesheet code to decrease its size, thereby improving your website loading and speed times.
When JavaScript or CSS stylesheet's files are minified, all the comments are eliminated as well as the unneeded white-space.
This minification process for JavaScript files and CSS stylesheets will improve response times and internet performance on your WordPress website, because the dimensions of the downloaded document is reduced.
The document size savings can vary anywhere between 10% and 38%, depending on white-space and non signal associated .
Minify/Compress JavaScript and Stylesheet Files
This one is fairly straight forward... compress your CSS stylesheets and JavaScript files to boost your website's speed.
Even though this is a very simple task to finish, this is for the individual that has an idea for which files they would like to minify.
All you need to do so is to back up your documents before you compress your CSS sytlesheet(s) or JavaScript files.
Especially the CSS stylesheet file, that is produced in a way which is easy to change, this will be a document that you will most likely need to backup before compressing.
Even if you're familiar with changing a stylesheet, you may wish to make a back up file in another title, since after minifying a CSS stylesheet, then it will look like it was processed in a blender.
Below are screenshots of a typical CSS stylesheet and also the same one after it's been minified.
Ahead Minifying or Compressing Our CSS Stylesheet
All the remainder to the right of the image is white-space.
After Minifying Our CSS Stylesheet
This might be tough for the person to trace and comprehend the code, however it is a slice of cake for the browser to read.
Minifying CSS Stylesheets to Reduce File Size
If you would like to go down this road, then you are going to need access to a WordPress website... you'll need to find the CSS stylesheet within your WordPress theme.
It ought to have a similar file name to'style.css', but to make certain, you are able to get your source code and appear at the top of your page and look for a URL that ends with'.css'.
To access your Source Code, right click your mouse, then click on'View Page Source' or whatever wording is employed to see your'Source Code'.
css'.
Once you've done that, it will be time to search for your file within your own WordPress theme and also re-save the file as another name for a backup.
If you are utilizing Dreameweaver or Filezilla to access your Wordress website, I am going to make the assumption that you have some basic understanding for accessing and modifying your site's documents and information... you can follow the identical path as I describe it for the cPanel.
-- -- -- --
Log in to your cPanel, go to your'File Manager' link (under'Files'), open the'File Manager', click on the folder which contains your WordPress website, whether it's'Public_html','www' or any other name.
From your cPanel's left side files, click on'wp-content' >'topics' >'your-theme's-name'... when you click on your theme's name from the left panel, each the files should show.
It's time to look for your stylesheet... it could be from the directory of your theme or possibly in a folder that would most likely be marked'css'.
Once you find your CSS stylesheet, it's time to create a new one using a different name for backup purposes.
I have always used something very similar to'style_raw. Css' to signify that my stylesheet is in its raw or original state prior to compressing.
To be able to make a new file named style_raw. Css or whatever name you've chosen, click on the + sign (top-left) to add a'document' (not folder) and name it'your_chosen_name. Css' and click on the'Create New File' button.
Now that you have your brand new backup CSS document, it is time to go to your original CSS stylesheet, find the'style.css' file or whatever the name of your stylesheet is, only click on the title to highlight it.
Click 'Edit' or'Code Editor' (doesn't really matter which one at this point) in the top (above all the documents ).
Put your cursor anywhere inside the Edit box, then with your keyboard, hit Ctrl + A to highlight the code, then Ctrl + C to copy the code.
Now return to your backup CSS document and hit Ctrl + V on your keyboard, or right click and then Paste the code into your backup file.
-- -- -- --
Time to Compress Your CSS Stylesheet
At this point, you need to be able to visit the Online Minifyer tool to compress your stylesheet.
If you need to recopy the stylesheet that you want to minify, go ahead and do this now, then paste your stylesheet code into the CSS compressor box (link below) and click on the'Minify' button.
When it has done everything, replicate your minified code in the box and then paste it back into your'style.css' stylesheet (or whatever your initial theme's stylesheet title is), then save the document... pretty easy.
You are able to verify it all worked out OK by seeing your Source Code again, locate the URL to your stylesheet and click it.
You need to see one single line moving from the left side to the right side... if not, hit F5 on your keyboard to refresh it.
Here's What the Compress CSS will do for your file:
Removes useless white spaces, indentation characters and line breaks
Strips all remarks
Removes the final semi-colon of a style statement and extra semi-colons
Removes empty CSS declarations
Removes components when utilizing zero worth
Removes the leading 0 if a float value is lesser than one
Changes RGB color values to a briefer hexadecimal format
Hexadecimal colors following the pattern #AABBCC are reduced to #ABC
Keeps one charset each CSS file removing all extra declarations
None values are converted to 0 if safe to do so
NOTE: You can do the same with your WordPress plugin stylesheets if you choose, but keep in mind that each time you upgrade a plugin, the stylesheet will be overwritten, so it kinda seems like a waste of time.
It is possible to discover your plugin stylesheets inside the folder named'plugins' which you will find in the'wp-content' directory.
Well... there are a number of reasons why compressing your javascript files are a good idea:
Quicker download times for your customers.
Reduced bandwidth consumption of your website.
Remarks and white-space aren't required for JavaScript execution; Removing them will reduce file size and speed up script execution times.
Here's the thing... your WordPress theme will most likely have a large number of JavaScript files, but you will not be using them all... you'll be blessed if you're using 1/2 of them.
A number of them are there in the event you decide to use some form of operation with your theme.
If you are not using all the functions on your subject, then your JavaScript will not be triggered, meaning it will not be utilized, which is going to be a lot of minifying for nothing.
In case you decide to move forward anyways, you'll need to locate your JavaScripts... that they will most likely be in a'js' folder inside your subject.
The odds of anyone ever changing a JavaScript file is really slim, aside from the initial author.
So, it will be up to you if you opt to make a backup of your originals using the phrase'raw' or'first' into the document name.
You can copy then paste your JavaScript code to the compressor box with the hyperlink below.
JavaScript Compressor/Minify JS
NOTE: One thing you may find with many JavaScript documents are that they are already compressed by the author, but it's well worth a look to discover.
You may find out by seeing your source code... find a JavaScript file which you want to test, and click on the hyperlink.
If it's in a straight line from left to right, then it's already compressed.
Closing Opinions for Minifying JavaScript and CSS Stylesheet Files
This is a no-brainer... in case you minify your stylesheets or JavaScript files, you'll be saving somewhere between 10% and 38 percent of your document size, meaning faster downloading of your pages.
In Future Articles -- We will be discussing added WordPress Performance problems, so be sure to put your email address in the box below for telling.
You Also Read:- Convert your text to html
I'm grateful you maintain such a top-notch article. BookMyEssay offers top-notch statistics assignment help services, ensuring accurate data analysis, expert guidance, and timely submissions for academic excellence.
ReplyDeleteThe quality of your post really amazed me. Hire Freelancer CMS Developers on Paperub for top-notch website and content management solutions. Find the experts you need today!
ReplyDelete