Minify JS/CSS Files

by | Sep 17, 2022

🎯 What’s the goal?
Optimize your website performance so it loads faster.
⚠️ Why does it matter?
Fast loading time improves user experience and is a ranking factor.
🏁 What’s the result?
Your website loading times and performance improved.
⌚ When do you do this?
Whenever your page load times are too high.
βœ… Any special requirements?
This SOP only applies to WordPress Sites.
πŸ™‹β€β™‚οΈWho should do it?
The person responsible for managing your website.

⏳ How long will this take? about 30 minutes

Let’s turbocharge the performance of your website!

Environment setup:

  • We recommend that you use Google Chrome browser to navigate the web,
  • Administrator Access to your WordPress Blog.

This SOP tries to cover the best settings that would work for most websites, but compatibility with every possible website/server setup can’t be achieved. If you’re having trouble setting up your cache plugin contact your web developer or hosting company

Optimize your website by caching with W3 Total Cache Plugin

W3 Total Cache will speed up your website with caching, minify and CDN support.

  • First, go to your WordPress Admin panel (yourwebsitedomain/wp-admin).
  • If you are not logged in automatically, simply log-in as an Administrator:
  • In the menu on the left side, select β€œPlugins”, then β€œAdd new”.
  • Type in β€œW3 total cache” in the search box.
  • You should see the β€œW3 Total Cache” plugin by BoldGrid in the search results.
  • Click on β€œInstall Now”.
  • Then on β€œActivate”.
  • Now choose β€œPerformance” form the left side menu of your WordPress Admin Panel.
  • Choose the β€œDashboard”.
  • Click on β€œcompatibility check”.
  • By viewing the result you will be able to determine which features of the plugin will be compatible with your website.
  • Now go to β€œGeneral Settings” of the Plugin.
  • In the β€œPage Cache” section choose β€œEnable” and β€œDisk: Basic”. You can set β€œDisk: Enhanced” of your compatibility report from the previous step provided you with information that your site is compatible with this feature.
  • In the β€œMinify” section, choose β€œEnable”, Minify mode to β€œAuto”, Minify Cache Method to β€œDisk” and rest of the setting as β€œdefault”.
  • In the β€œDatabase Cache” section, choose β€œEnable”
    Then set β€œDatabase Cache Method” to β€œDisk”.
  • Finally, click on β€œSave Settings & Purge Cache”.

Optimize your website by caching with Autoptimize Plugin

  • First, go to your WordPress Admin panel (yourwebsitedomain/wp-admin).
  • If you are not logged in automatically, simply log-in as an Administrator:
  • In the menu on the left side, select β€œPlugins”, then β€œAdd new”.
  • Type in β€œAutoptimize” in the search box.
  • You should see β€œAutoptimize” Plugin by Frank Goossens in the search results.
  • Click on β€œInstall Now”.
  • Then on β€œActivate”.
  • You should see that β€œAutoptimize” option appeared on the left side menu, under β€œSettings”. Click on it.
  • First, move to β€œJS, CSS & HTML” tab.
  • Check box next to β€œOptimize JavaScript Code?”.
  • Allow CSS optimisation by checking the box next to the β€œOptimize CSS Code?”.
  • Check all the boxes beneath the β€œMisc Options” section.
  • Click on β€œSave Changes and Empty Cache”.

Optimize your website with Swift Performance Lite Plugin

  • First, go to your WordPress Admin panel (yourwebsitedomain/wp-admin).
  • If you are not logged in automatically, simply log-in as an Administrator:
  • In the menu on the left side, select β€œPlugins”, then β€œAdd new”.
  • Type in β€œswift performance” in the search box.
  • You should see β€œSwift Performance Lite” plugin by SWTE in the search results.
  • Click on β€œInstall Now”.
  • Then on β€œActivate”.

Swift Performance will occasionally present you with a paid option features.

  • Click on β€œInstalled Plugins” underneath the β€œPlugins” section from the left side menu.
  • Find Swift Performance Lite Plugin on your list and click on β€œSettings”.
  • On the Plugin’s screen choose the β€œSettings” tab.
  • Click on the β€œOptimization” section.
  • Then, on β€œGeneral”.
  • Activate the slider next to β€œMinify HTML” option.
  • Now move to the β€œCatching” section.
  • Choose β€œGeneral”.
  • Set the slider on next to the β€œEnable Caching” option.
  • Set Catching Mode to β€œDisk Cache with PHP”.
  • Set the slider to on position next to the β€œEarly Loader” option.
  • You should leave the last three settings unchanged.
  • Click on β€œSave Changes”.

Optimize your website using WP Rocket

WP Rocket is a premium cache plugin for WordPress. WordPress experts recognize it as the most powerful caching tool. Thanks to its wide range of options and automatic optimization features, it can be easily used by experienced WordPress users as well as beginners. 

Unfortunately, WP Rocket is a paid-only plugin. There are no free versions of it but it is considered as the best solution. Visit WP Rocket website and decide if you want to use it.

Open your website, navigate through your core pages and make sure everything is still functional. If parts of your website is no longer working, you can revert the changes you made by disabling the whole plugin.

But for now, you should run again the SOP036: β€œCheck your website loading time”

You should already see an improvement in your overall score.

Minify JS/CSS Files

🎯 What’s the goal?Optimize your website performance so it loads faster. ⚠️ Why does it matter?Fast loading time improves user experience and is a ranking factor. 🏁 What’s the result?Your website loading times and performance improved. ⌚ When do you do this?Whenever your page load times are too high. βœ… Any special requirements?This SOP only […]
You May also Like: