If you check your site speed with Google PageSpeed Insights you might get the advice to minify your Javascript (JS) and Cascading Style Sheets (CSS) files. Your JS files contain the code for the interactive elements of your website. And in your CSS files you specify the design of your pages. Minifying those files will decrease your page load time, thereby providing a better user experience.

We received a question about minification of JS and CSS files at Ask Yoast. Besides that, we also get the following question quite often when performing one of our SEO reviews:

“Why and how should I minify my JS and CSS files?”

Check out the video or read the answer below!

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO for WordPress pluginBuy now » Info

Minify your JS and CSS files

“JavaScript (JS) is the stuff that makes your web page interactive and CSS is the stuff that makes your web page look good. Basically, these two things are code that you send to the browser, and that the browser needs to render.

A browser, like any other computer program, doesn’t care what the language that it receives, looks like. It doesn’t need the spacing and the comments and all other stuff, that your developer needs to make sense of it all. He needs the structure to get through the code, however the browser has no benefit from that.

Stripping all of that down, actually makes the file that you send to the user a lot smaller. Because when you minify it, you remove all the extra spaces, all the line breaks and all the comments. Stripping all that, can save up to 30-40%, or even 50% of file size in some cases. There really is no benefit of sending that stuff to the end-users, so minifying saves time and money for everyone. 

That’s why you should do it. Good luck!”

If you’re on WordPress, there’s a vast amount of plugins that can help you minify your HTML, CSS and JS files. We generally recommend WPRocket for this and some further improvements to speed up your site.

Ask Yoast

In the series Ask Yoast we do our best to answer your SEO question! Need some help with your site’s SEO? Send your question to ask@yoast.com. You might get a personal answer on video!

Read more: ‘DIY: optimize your browser cache’ »

This site offers natural healing techniques and coaching based on traditional ayurvedic medicine.

Urban Legend web was contracted to create the front-end and back-end using a WordPress framework.

For the front-end, a child of the ‘cardinal’ theme was used to provide a basis for the PHP, HTML, CSS, and Javascript used for the theme files, layout, style, and user interaction respectively.

For the backend, theme files were edited in PHP to provide user options for content management and editing.

Davis Ogilvie - http://do.co.nz

For this project I was under contract to a Christchurch agency, PublicaDDM.
My role was working within the WordPress framework to set up the frontend theme, as per supplied files. That involved creating and editing CSS, HTML, and Javascript to meet the project requirement. The layout is responsive. My role also involved setting up the backend content management system, using PHP.

I’ve been snuffling around in my archives, dusting off long-forgotten back-up CDs and such, and found an interesting  wee toy I’d almost forgotten writing.

It’s a basic palette picker, written as a web-page, which allows the user to choose a web-page colour scheme from the 216 basic colours.

There are four colour-able areas. You fill them by clicking a colour from the panel on the left, and then in one of the colour-able areas. A cookie will save the scheme you decided on, and CSS codes for the color are given.

I did say it’s basic : I wrote it in 2002, using Javascript,  before the days of JQuery. The code is embedded rather than linked, so it’s easy to see ( and modify if you choose ).

Who knows, it may be useful, but probably more likely a 5-minute diversion. Have at it!