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.
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.
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.
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:
- WP Rocket (our choice)
- WP Super Cache
- WP Fastest Cache
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.
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
If this is the case for you, uncheck those two optimizations and instead enable this one:
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:
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.
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.
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!
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.
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.
September 27, 2019 2:37 pm
Another rather important point on acceleration is optimization and compression of images on the site. You may manually optimize each picture (through Photoshop for example), or automatically (through special services). Here is an interesting article about it: https://optipic.io/en/blog/how-and-why-to-optimize-iamges-on-the-site/
September 29, 2019 9:59 am
Many thanks for this guide. The score can be further improved by hosting Google Analytics locally. Not only the score will improve but also the loading speed of website because in most cases website host serves GA code faster than Google servers. Also, try out Litespeed Cache. I found it the best but not many know about it. May be because it requires LS Cache in the Web Server, which should be Litespeed. Autooptimize is indeed awesome. I am using it on https://securitygladiators.com/
September 30, 2019 3:00 pm
Wow! This is the article I’ve been waiting for! For beginners like me, it’s an invaluable tool. Thank you so much for this information. I’m working on it right now!
September 30, 2019 3:14 pm
Feel free to share the results and difference in score with us!
September 30, 2019 3:39 pm
It’s really amazing article I was looking to boost my page speed score since last year but not get appropriate results I think you have all the things very deeply but why I am not getting good speed on https://mobilefone.pk/b/ pls give some good recommendations. Thanks
September 30, 2019 3:45 pm
I’ve checked your website, and I don’t see optimizations to be implemented on your website. Also, your theme is very outdated, as latest version of Tribune theme is 4.2.0
September 30, 2019 3:40 pm
Great for beginners! Thank you! What else can we do http://www.dev.citywellbrooklyn.com
September 30, 2019 3:53 pm
I recommend you to compress images shown on the homepage, as this will reduce their size and make the page load faster.
Here’s an example how you can save 300kb on a single image: https://d.pr/i/Ub8W3E
You can manually compress images using https://tinypng.com/ and re-upload them, or use their plugin:
September 30, 2019 7:44 pm
Thanks that you wrote how we beginners can speed up our website. Do you have other recommandations for me other than minimizing my images? My website is http://www.polmone.org
September 30, 2019 8:34 pm
Please check your score now. I’ve found your login details in a support ticket, so I improved some things.
I enabled the Lazy Load Images feature in the Instagram widget from the footer:
I also fixed a problem in the theme with the Google Fonts.
Now the score jumped to 44 on mobile and 93 on desktop.
As you have a Vimeo video embedded on the homepage, it’s difficult to increase the score higher.
Also, it’s possible that your hosting is a little slow:
Lastly, I’ve fixed a problem with the Maps widget from the homepage.
Cheers from Amsterdam ;)
October 1, 2019 3:51 pm
Thank you so much for fixing the problems within my site!!!! I was aware that my host isn’t the fastest, but for now it’s sufficient!
Cheers from Italy! :-)
December 7, 2019 9:48 pm
Hello i think that with a simple template with yours its easy to have high result score…
April 28, 2020 4:55 am
re my site https://www.peterdarcy.com.au/
Speed is good but
Is there a way to inline critical CSS as worried in practice it may create potential issues down the road as critical CSS needs to be regenerated after changes and updates could be can of worms ( as CSS often breaks)
Is converting images to webp worthwhile as WebP is not supported by all browsers, most notably Safari. Are there ways around it – serving WebP only to the browsers that support it, but then again not all proxy servers support it either
Have used your social icons btw thanks
June 15, 2020 7:23 pm
My website speed is really low- 15 as per google page speed insights. This is with the plugins you suggested me to install. Can you pls help increase speed.
January 12, 2021 7:36 am
Hi Pavel, this is a really clear and helpful guide, thank you. I managed to get my score up to 84 mobile and 98 desktop – appreciate the tips! (Though I do use SG and don’t yet have videos on there so maybe that helped)
February 16, 2021 8:07 pm
Thank you for this article.
I have upgraded all items from the article and manually changed all google fonts in the “customize” menu, easy enough.
Went in an hour from: desktop 3 sec, mobile 8 sec, –> desktop 2 sec, mobile 5 sec.
Still work in progress, the lazy loading will probably make a difference too.
Pavel is great. Would recommend him + team to everyone who want to take their website serious.
April 16, 2021 8:07 pm
I’ve reached a 37 score on mobile but it fell to 28 when I installed Jetpack. Any idea why ?