FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View Pricing Plans →

Categories

Documentation

Theme Documentation



Plugin Documentation



Resources

The Ultimate Guide to Making Your WordPress Site Load Faster

We have previously written several articles with tips to make your WordPress site faster. Most probably, due to the amount of details included in them, many of our customers simply ignored those recommendations, finding them too complex.

As Google PageSpeed is a popular topic these days, we’ve decided to write another article with some straightforward techniques that you should apply each time when building a new website.

Increase the PageSpeed Score

In other words, the methods we’ll cover below are not just some recommendations but rather a necessity for every WordPress site that wants to rank as high as possible in search results.

This is also a good opportunity to improve your website today if you have never been worried about your website’s speed or didn’t know where to start.

Difficulty: Beginner


Why is Page Speed so important?

Since more and more Internet users are visiting your website from mobile devices — which sometimes may have a slower connection than a regular computer — it’s essential to make your website as fast as possible.

Typically, website optimization is a comprehensive process and needs individual attention. Nonetheless, we’ll try to give you some simple tips that will make a big difference.

It’s also important to keep in mind that we’re only the authors of the theme your website uses. A theme represents just the design of your website, and other factors sometimes may slow down a website. For example, the number of installed plugins and the performance of your hosting.


3 Steps to Increase the PageSpeed Score

1. Install & Configure a Caching Plugin

If you don’t already have a caching plugin, you need to fix this right away.

There are many caching plugins available, but we’ll recommend the following ones:

After installing a caching plugin of your choice, make sure to find the settings page of that plugin and Enable Caching.

For WP Rocket, no additional configuration is necessary, as, by default, the plugin is configured to enable the WordPress Cache.

The caching process is critical, as this is an easy way to reduce the number of requests to your website’s database. This makes your website significantly faster by serving static versions of your content and pages to visitors. You can read more details about WordPress caching in this article.

Most of the caching plugins have an option to disable the cache for administrators or logged-in users, and we recommend enabling it. This is helpful so you won’t get served a cached version of your website while logged in. This way, you will be able to instantly preview the changes you make on your website instead of having to clear the cache after each small change.

In this article, you can find some common caching issues and solutions on how to fix them.


2. Minify & Combine Assets (CSS & JS Files)

While a caching plugin will make your website considerably faster, minifying the resources will help boost your PageSpeed score. There won’t be a big difference to the visitors when loading your website. Still, this method should be a “must” in your optimization process.

Just like the themes, many plugins include additional CSS & JS (JavaScript) files that are loaded on your website. There is a simple way to combine them into a single file to reduce the number of requests to your website.

Our recommended plugins for minification are WP Rocket and Autoptimize.

If you already have the WP Rocket plugin installed, navigate to the File Optimization tab and enable the following optimizations:

We’ve enabled the following optimizations:

  • Minify CSS Files
  • Combine CSS Files
  • Minify JavaScript Files
  • Load JavaScript deferred
  • Delay JavaScript execution

Depending on what other plugins are installed on your website, it’s possible that enabling the last two JavaScript optimizations might result in breaking some features on your website.

If this is the case for you, uncheck those two optimizations and instead enable this one:

Combine JavaScript Files

Now you need to keep in mind to Clear and Preload Cache from time to time, especially when you make changes on your website or install a new plugin. Otherwise, some parts of your website may not work properly due to some conflicts:


3. Lazy Loading Images

Lazy Load is a simple technique to tell browsers not to load all the images on a page but only the ones visible in the current section. As users will scroll down on the page, the rest of the images will be loaded.

With this optimization enabled on your website, pages will load much faster, as browsers will try to load all the images on a page when the visitor accesses it.

If you have the Jetpack plugin already installed on your website, you can enable Lazy Loading for Images from Jetpack > Settings > Performance:

You may notice in the above screenshot that we’ve enabled another option: Speed up image load times. This will load images in a “Next-Gen” format much faster and boost the PageSpeed score. This is also very useful, and we recommend enabling it.

This feature was previously called Photon, and you can read more details about it here.

If you prefer to use a different plugin to lazy load images, here are some recommendations:

However, you will probably get the best PageSpeed score using the above combination in the Jetpack plugin.

BEFORE CACHING & CSS/JS OPTIMIZATIONS:

We have set up a demo site on which we’ll apply the optimizations described in this article. It uses the Foodica theme and about 10 different plugins. Here’s the score before optimizing the website:

and now let’s look at the results after enabling caching, CSS/JS optimizations, and Lazy Loading for Images:

WITH OPTIMIZATIONS:

It looks like it made a big difference for the PageSpeed score:

If you don’t see any improvements in your score, open your website in an incognito tab and rerun the PageSpeed test.

View Optimized Demo →

Remember that no one can guarantee that you will get the same results on your website. A big difference is made whether your website is hosted on a shared or poor hosting and the number of plugins installed.If you have many videos or ads on your website, it’s also possible that you won’t be able to increase PageSpeed too much. If your website relies on numerous external resources (e.g. YouTube, AdSense, Pinterest), you won’t be able to optimize or control assets loaded by those services.

 

PRO TIP

If you’re using our Social Feed Widget (formerly known as Instagram Widget), make to sure to enable the Lazy Load option in the widget settings:


Bonus: Disable or Host Google Fonts Locally

For many people, the PageSpeed score is more important than the actual aspect of their website, so they will do anything it takes to increase that score.

Specifically for this purpose, we’ve recently added new features to our themes. It allows disabling Google Fonts completely or hosting the fonts locally on your website.


Bonus 2: Optimize Images

If you’re getting a recommendation to optimize images in the PageSpeed report, it means that you will need to make some extra optimizations:

There are many plugins available to help you to optimize your images by compressing them and reducing the file size, but our favorite is Smush IT. This is a free plugin, but there is also a Smush PRO version available as part of the WPMU DEV membership.


Bonus 3: Disable Emojis

WordPress loads, by default, some scripts that contain emojis. If you don’t use emojis on your site, there’s no point in loading them on your website.

Autoptimize has an option for this, which you can find in the Extra tab within their settings. Check the box next to Remove emojis, and you’re good to go!


What’s Next?

Usually, at this stage, your website should be very well optimized and load fast enough. However, depending on your hosting, plugins, and content, you may get a different result.

By using tools like Pingdom or GTMetrix you can check the actual loading time of your website:

We have an excellent result in our case, as the page loads in 1 second. If your website loads in 1-3 seconds too, then you can consider that it’s fast enough, so no more improvements are necessary.

From our experience, the PageSpeed score may not always be relevant to tell us precisely if a website is fast or not. That’s why it’s preferred to check the actual loading time with different tools and ensure that the loading time is good.


Tips & Common Issues

If you’re new to WordPress optimization, here are some useful things you should keep in mind:

  • Don’t run a PageSpeed test immediately after making a change on your website. It’s recommended to clear the cache first and visit your website in an incognito tab, as it’s necessary to preload the cache first. Otherwise, the attempt to calculate the score will be a non-cached version of your website.
  • Check the TTFB (Time To First Byte ) of your hosting. Using tools like ByteCheck, you can easily find out the performance of your hosting.
  • Don’t use too many optimization plugins. Sometimes 1 or 2 plugins are enough to handle important things like caching and minification (WP Super Cache + Autoptimize).
  • Many plugins also use custom fonts or Google Fonts. If you want to disable them completely, make sure to check available options in all plugins you use or contact their developers for more details.

How good is your WordPress Hosting?

If you’ve tried to follow the steps from this article and don’t get a similar score, don’t rush into blaming your theme or plugins. The problem is probably an inefficient and poor hosting provider. If you’re not sure about the performance of your hosting, feel free to ask us about it in the comments below. Or you can try a Google search with “your hosting name + reviews“.

In case you’re looking to change your hosting provider, our recommended WordPress hosting is SiteGround. During the years, many of our customers switched from other hosting companies to SiteGround, and the performance of their website has significantly increased.


The Verdict?

Before jumping to make a conclusion regarding the results we got, let’s recap the optimizations mentioned in this article:

  • WordPress Caching
  • Minify & Combine CSS & JS
  • Lazy Load Images
  • Disable Google Fonts (or host them locally)
  • Optimize Images

Many other optimizations can be applied to a WordPress website. Since this article aims to cover the basics, we won’t get into the advanced stuff.

Many times, some recommendations provided by PageSpeed Insights are way too challenging to implement. Please take into consideration that the effort of fixing them won’t be worth your time and money.

It’s essential to keep in mind that speed and optimization are something that needs constant attention. Every time you make changes to your website or install a new plugin, the PageSpeed score may be affected. In this case, make sure to take the appropriate action when needed.


Need PageSpeed Optimization Advice? Comment below!

If you’ve followed the above optimizations and still have a low score, just comment below and leave a link to your website. Depending on our availability, we’ll give you a recommendation or two to improve your website.

You can also purchase our WordPress Speed Optimization service for $299. We’ll be happy to help with improving your website in less than 48 hours and boost your PageSpeed score.

Last updated on August 2, 2023