Speed Up WordPress Websites by Optimizing JavaScript and CSS

JavaScript and CSS slow down the page loading because they have to be loaded and executed. Additionally, a lot of JavaScript can have a very negative impact on the performance and responsiveness of the website. Learn how we optimize CSS and JavaScript in WordPress to help speed up your websites. 

Load Less JavaScript and CSS

Consider your choice of plugins and themes

Some plugins and themes in WordPress use a lot of JavaScript and load lots of CSS, so you should reconsider using them and try to find alternatives. Many of them load Javascript and CSS even on pages that are not affected by the plugin/theme at all, and thus increase the loading time even where it is not necessary.

Think About the Necessary Functionality

When working with WordPress, we always make sure to load only what is needed (CSS styles, JavaScript) to prepare the page for faster loading. For example, we remove unnecessary CSS and JS files.

Use CSS Instead of JS for Interactive Features

If you’re programming content for WordPress, it’s a good idea to think about whether JavaScript is really necessary for everything you’re using JavaScript for. A lot of functionality that used to require JavaScript can now be achieved with modern CSS with much less impact on performance. We took advantage of this for example when creating a page for i4comfort or when creating a Custom Menu For Engeto Without The Use Of JavaScript. The website contains a lot of visual effects, which we included so that they don’t slow down the page. You can read more in the article Creating a Website for i4comfort

Code Handling JS and CSS

Always think about where your CSS and JavaScript is needed. It’s a good idea to divide large CSS files into several smaller ones and load them as needed. We can do the same with JavaScript code.

We mostly use Sage to create themes, which makes such management easier and takes into consideration its importance. 

Read more about Why You Want a website created on Sage?

Optimize CSS and JavaScript With Minification

Minification removes everything that is not necessary from the files (linebreaks, spaces, shortens variable names, etc…). Text files with CSS and JS are modified to take up less space and load faster.

Difference between original and minified code
Difference between original and minified code

There are many good WordPress plugins and themes that minify the code. In our plugins and themes, we minify the code while keeping the original files, which are easier to modify

How To Do It?

Your JavaScript and CSS can be minified using online tools such as Closure Compiler or Minify Code. JavaScript and CSS that you create for your plugins or insert in customizer can also be minified in this way.

A better alternative for this is to configure the build of your plugin/theme.  It is possible to use and set up Webpack or tools like node-minify. This allows you to automatically minify your files, but it requires quite a lot of time and energy, especially if you choose Webpack. That’s why it’s better to go for a pre-made solution for your plugin or theme in the form of a starter project, such as Roots Sage for a theme. However, for large projects that you are already working on and it is not easy to migrate them, you need to get help from the tools mentioned above.

How to Use Minification Without Developer Experience?

To optimize all the CSS and JS files that your site uses, you can use the Fast Velocity Minify plugin. This plugin generates minified CSS and JS files on the first uncached loading of the page which are then loaded in place of the original files on upcoming requests. You can significantly speed up CSS and JavaScript loading this way for plugins and themes that don’t use minified JavaScript and CSS.

Less is More

To speed up your website and thus increase your traffic, remember that less is really more in this case. If your site is overloaded with a lot of unnecessary functionality, it’s clear that this will have an impact on performance. 

There are many ways to speed up your website and increase traffic. You can divide longer pages into smaller ones, reduce the amount of unnecessary images, or aim for simpler code. We’ve also written about this in a more detailed article, 6 Ways to Improve the Speed and Performance of Your WordPress Website.

If you have any questions or need help with speeding up or optimizing your site, we’re here for you, don’t hesitate to get in touch