We have previously written several articles with tips to make your WordPress site faster. Most probably, due to the amount of the 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 very simple techniques that you should apply each time when building a new website. In other words, the methods we’ll cover below are not just some recommendations, but rather a necessity for every WordPress site that has to be optimized for speed. This is also a good opportunity to improve your…
We have previously written several articles with tips to make your WordPress site faster. Most probably, due to the amount of the 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 very simple techniques that you should apply each time when building a new website.
In other words, the methods we’ll cover below are not just some recommendations, but rather a necessity for every WordPress site that has to be optimized for speed.
This is also a good opportunity to improve your website today, in case you have never been worried about your website’s speed or didn’t know where to start.
To make this process more interesting, we’ve created 2 demo sites. This way, so you can see the score result and difference between a website with absolutely no optimization and another website on which we’ll apply the methods described below.
Here’s the score on a brand new website using our Foodica theme with no plugins and with only 2 posts:
Honestly, this is a pretty good score, as we can rarely witness websites scoring more than 50/100 on Mobile. In reality, things will be different, as websites usually have more content, more images, and more plugins installed.
Ready? Let’s start!
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 comparing to a regular computer — it’s very important to make your website as fast as possible.
Normally, website optimization is a very thorough 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 simply represents just the design of your website and there are other factors that sometimes may slow down a website. For example, the number of installed plugins and the performance of your hosting.
1. Install & Configure a Caching Plugin
If you don’t have a caching plugin or a hosting that offers such an option, you need to fix this right away.
There are many free 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:
The process of caching is very important, 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 that 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.
On the demo site that we’ll further optimize, we’ve installed about 10 plugins and added new widgets on the homepage. As a result, this affected the PageSpeed score, making it look closer to a real score:
and now let’s look at the results after enabling caching:
The difference in score is very small in this example, but in reality, this makes a very big difference, especially for websites with many visitors.
2. Minify Resources (CSS, JS, HTML)
While a caching plugin will make your website considerably faster, the process of minifying the resources will help with boosting your PageSpeed score. In fact, there won’t be a big difference to the visitors when loading your website. Still, this method should be a “must” in your optimization routine.
Our recommended plugin for minification is Autoptimize.
Now you need to keep in mind to Delete the 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:
Some plugins like WP Rocket or WP Fastest Cache also include minify options, so you can use them instead of installing the Autoptimize plugin.
The verdict? Well, it looks like this step made a big difference for the PageSpeed score:
At this stage, we’d be pretty happy with the score and would focus our attention on much more important stuff. However, some of you wouldn’t agree, so we’ll try a few more tweaks.
3. Lazy Loading Images
Lazy Load is a simple technique to tell browsers to not load all the images in 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.
By having this optimization enabled on your website, pages will load much faster, as normally 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 also enabled another option: Speed up image load times. This is also very useful and we recommend enabling it. This way, it will load images in a “Next-Gen” format which is much faster and will boost the PageSpeed score.
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.
For some reasons, in our example, this step increased the score insignificantly. Most probably this happened because there aren’t so many images in the demo site we’ve created.
However, after adding Lazy Loading Images, the following recommendation was fixed and it no longer appears:
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:
Normally, at this stage, your website should be very well optimized and load fast enough. However, depending on your hosting, plugins and content, it’s possible that you get a different result.
In our case, we have a very good result, 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 exactly if a website is fast or not. That’s why it’s preferred to check the actual loading time with different tools and make sure that the loading time is good.
Bonus: Disable Google Fonts
For many people, the PageSpeed score is more important than the actual aspect of their website, so they will do anything it takes just to increase that score.
Specifically for this purpose, we’ve recently added a new feature to some of our popular themes. It allows disabling Google Fonts from the themes.
How to disable Google Fonts in WPZOOM themes?
1. In order to disable Google Fonts in WPZOOM themes, you have to choose a non-Google Font for the Body option in Customizer > Typography:
2. After that, enable the Sync all fonts option and Save the changes. If you don’t see this option in your theme, you’re probably using an older version or your theme doesn’t support this feature yet. Please get in touch with us if you need this option in your WPZOOM theme.
By disabling the Google Fonts from the theme and enabling Lazy Load Images, the mobile score received a considerable boost and now it is 84/100 and 98/100 on desktop 😲
This is a great result considering that we’ve only applied some simple optimizations to our website.
You can view our demo site used in the tests here: https://demo.wpzoom.com/page-speed-optimized/
However, keep in mind that no one can guarantee that you will get the same results on your website. It’s enough to have poor hosting or a lot of plugins, and in this case different optimizations will probably be necessary.
If you have many videos or ads on your website, it’s also possible that you won’t be able to increase the PageSpeed too much. It’s a bit complicated when external resources (YouTube, AdSense, Pinterest) are involved.
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 TinyPNG. It’s available as both a plugin and an online tool at tinypng.com.
Bonus 3: Disable Emojis
WordPress loads by default some scripts that contain emojis. If you don’t use emojis on your site, then there’s really 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!
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 serving 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 about 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. It’s very probable that the problem is 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.
Before jumping to make a conclusion regarding the results we got, let’s recap the optimizations mentioned in this article:
- WordPress Caching
- Minify CSS, HTML, JS resources
- Lazy Load Images
- Disable Google Fonts
- Optimize Images
There are many other optimizations that can be applied to a WordPress website. Since the purpose of this article is to cover just the basics, we won’t get into the advanced stuff.
Many times, some recommendations provided by the PageSpeed Insights are way too difficult to implement. Take into consideration that the effort of fixing them won’t be worth your time and money.
As you can see in the following image, we’ve got an excellent score for a website using more than 10 plugins. You can view the results online at this address.
It’s important to keep in mind that speed and optimization is something that needs constant attention. Every time you make some changes on 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 a 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.