How to Use Optimize Scripts & Styles for WordPress

The main culprits that slow down websites are the CSS and JS scripts present on your site. Each one requires resources to load and appear properly which can prevent a page from loading. This is why you must optimize your scripts and styles in WordPress.

The first way you can do this is by learning how to write code in an optimized manner, but that is a far more in-depth solution than the other method; using a plugin. Several plugins for WordPress can scan and optimize any scripts on your website.

This is a much easier solution than going back in and rewriting the code yourself, but it is worth pointing out that learning that technique would be far more valuable in the long run and would save you from using a plugin in the first place.

Today, I will demonstrate how to use the Optimize Scripts & Styles plugin to improve your site’s performance.

This tutorial is for:
WordPress 6.5.3
Plugin: Optimize Scripts & Styles v1.9.5

Why Do Scripts and Styles Slow Down My Website?

Every element on your web page requires resources, and to get the necessary resources, an HTTP request must be sent out. This takes time, and the more requests that are made, the longer that time takes.

At first, the time difference may be negligible. However, if you have custom CSS or scripts running throughout a page, this can result in a significant slowdown. And as you probably already know, speed is a factor that search engines use to rank your site.

Thus, we need to write scripts and styles in an optimized format to reduce the number of HTTP requests they make.

Many plugins, and especially themes, often mention how their code has been optimized to improve load times. This is the same as that, but instead of a professional doing it, we are going to let a plugin handle that for us.

With all this said, I cannot stress enough that learning to write optimized code can help improve your site.

Test Your Site Before You Begin

Before we jump right into the tutorial, I strongly suggest testing your website to see the before and after effects of the plugin. There are multiple ways you can test your site, but one of the most popular is to use PageSpeed Insights.

This tool allows you to enter a website’s URL and view a score for both the mobile and desktop view of your site. It will rank you on performance, accessibility, best practices, and SEO. For reference, my dummy site score for performance was:

Generally speaking, you want this score to be as high as possible. In some cases, it may point out something that is tanking your rankings, so be on the lookout for any advice it offers.

Once you have run the test on your site, remember the score so you can compare it after you optimize everything.

How to Use Optimize Scripts & Styles in WordPress

The Optimize Scripts & Styles plugin for WordPress does exactly what its name suggests, optimizes any code on your site. This can help you reduce the number of files and the size of those files to speed up your website.

Now, it is worth mentioning that the benefits of using this plugin can vary wildly because some sites just don’t have a lot of scripts. Thus, there is not much to optimize, which can result in negligible optimization.

Luckily, using the plugin is extremely simple. It just involves installing and configuring it for use. Thus, for your part, you’ll just be toggling some switches in the settings.

Step 1: Install Optimize Scripts & Styles

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Search for Optimize Scripts & Styles in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the Optimize Scripts & Styles plugin and click on the “Install Now” button and activate the plugin for use.

Step 2: Configure the Plugin

Now that the plugin has been activated, we need to configure it. Click on Settings and select the Optimization option.

The settings are broken up into four distinct sections. These include General, Debug, Remove, and Ignore.

The first thing you’ll need to choose is an optimization behavior. The default option is to Minify, but you can also choose Concentrate. Minify will try to reduce the file size, whereas Concentrate will try to combine files so fewer are requested.

Both are valid, but I would stick with the default Minify option. You can also choose the cache lifespan below this option.

Further down, you will find a series of switches that you can use to enable options. The first two are the most important because they enable the optimization of Scripts and Styles respectively. These two switches should be on.

The other options are far more specific, and the best options depend on your website environment.

The Debug section consists of two options. The first is to disable the cache, which should only be done for testing purposes. Leaving this on for a prolonged period will slow down your website.

The other option is to display the debug, which is useful when something is not working correctly. These should be left off when going through the initial setup, but they can be useful when something unexpected happens.

The Remove section is for advanced users. It is best avoided by beginners. It gives you the ability to remove junk scripts in your theme, but just to be clear, they are not deleted. Instead, the plugin just makes sure they do not load.

And lastly, the Ignore section allows you to ignore or exclude certain scripts. This is often the best option for custom scripts you have entered yourself, as the plugin may cause them to stop working when attempting to optimize them.

Click on the “Save Changes” button at the bottom to finish.

Compare Your Results

Now that you have set up the plugin, if you took my advice at the start and checked your site score before setting up the plugin, it is now time to do the same test with it active. In my case, the Performance jumped up to a 100 on both views:

While this is great, it is worth noting that some of my other scores fell. In particular, my Best Practices went from 100 to 75 because the plugin impacted my HTTPS request. And my Accessibility fell from a 100 to a 95.

With some more precise configuration for your site, these problems can be resolved, or you may have gotten different results entirely. Be sure to let me know in the comment section.

Make Sure to Optimize Your Website

When it comes to isolating the most important aspect of a website, speed always ends up as one of the conclusions. Users do not like slow websites, and every second a page takes to load is a second a user may go somewhere else.

Not to mention that speed is a confirmed factor that Google and other search engines use to rank websites. All websites need to be fast. This has become much easier to accomplish today, and tools like Optimize Scripts & Styles for WordPress can help.

In most cases, these tools are extremely easy to implement at any skill level. Thus, there’s no reason why a website should remain unoptimized nowadays.

I hope you found this tutorial helpful in learning to use Optimize Scripts & Styles in WordPress.

Did your site’s performance get a boost with the plugin setup? How easy did you find using the plugin?

The post How to Use Optimize Scripts & Styles for WordPress appeared first on GreenGeeks.