How optimize speed of wordpress

Speed of sites on wordpress is one of the weak side of wordpress, because default wordpress cache system is very simple and not effective. But power of wordpress is in it’s community and number of awesome free plugins. Today I will tell you how you can get A grade on gtmetrix, google page speed, increase your page speed. These rules are working great in 95% of cases and don’t require too much actions from your site.

How to test speed of site

Currently, there are two basic instruments which I use to test speed of site.

First is gtmetrix and second is LightHouse from Google (aka Measure ). There are big difference between two services. Gtmetrix calculates real speed of site and show you weak sides. Measure service calculates different metrics which is important to Google, so, sometimes you can have good speed of site bud bad score on Measure. Anyway, both tools can show you what to optimize on your site.

Also, note, score – is just score, you should think about speed of site and how your site is comfortable for users, which are more important than score. Also, some users send me their links and ask why they can’t get good speed on site. There are few things which can make any site very slow and it’s not possible to optimize them.

First of all, I want to tell you that if you have slow hosting you can’t get good speed for your site even you are a magic master of caching. How to check your hosting? I want to give you advice. Go to your admin panel of wordpress and activate default theme and deactivate all plugins except required plugins. If it loads not quickly – you need to change your hosting or update hosting plan.

Also, sometimes, it’s important to have server localization close to your destination. For example, if site is for USA, make sure that your server is located near USA (or in USA). Because I have some cases, when hosting is good, but because of it’s location, it works very slow in my country.

Currently, I tried most of popular hostings, like Siteground, BlueHost, WPEngine. All are ok, but I like Siteground more because it has inner cache system even for shared hosting + Memcache. I think it’s only one hosting which allows memcache functions on simple shared packages.

Ok, you have good hosting and site is still very slow. Next step is to check your external scripts. My head is exploaded sometimes when I check some sites. 5 different ads scripts, 3 different statistic and metrics, several notificators like Onesignal, several external share scripts.

You must know one thing – external scripts are not possible to cache or optimize, so, you can’t have good score for such sites. Try to find balance, don’t use several statistic plugins, don’t use external share scripts.

And the last thing to check on your site is number of modules which you use on site and number of plugins.

I found that many our theme’s buyers install ALL bonus plugins which we provide. Why? Don’t do this. Keep active only those plugins which you really know and which you really use on site. Delete all other. Also, don’t try to use too much blocks on Page and too much widgets. If you place 500 products on homepage doesn’t mean that user will scroll all of them. Check sites like Amazon, Etsy. They have millions of products, but only 4-6 blocks on homepage. Don’t overload your users, show them only those blocks which can be useful for them

back to menu ↑

Setup database and file cache with cache plugins

I think I tried near 10 different cache plugins for wordpress. Some of them were awesome in past, but now is outdated. Currently, I think that most stable plugin is. Wp Super cache. It’s free and easy to setup. I never touches any configurations, usually I just install and activate cache in settings. Of course, there are many other plugins. I like W3 Total cache, but it can’t be not user friendly as it has many options which are hard to understand for novices. Wp rocket is very popular amoung PRO plugins. However, if you don’t know what to choose, use Wp super cache.

back to menu ↑

Setup for static file cache and minification

WP super cache is plugin for caching mostly database requests but you must also enable file minification. What is this?

Any site on wordpress loads many scripts, because all themes and all plugins can load their styles and scripts for proper work

All of these scripts is separate request in browser. Most of wordpress sites can have 30-50 requests and this is too high. So, we must to merge them into one and optimize such scripts. This is why we need plugin to Minify and merge them

Previously, I use Better WordPress minify plugin. But it’s outdated and not supported, so, currently I use Autoptimize which has some very important settings which you will need.

This plugin has one problem on some hostings, it doesn’t clean own files and your disk can be full after some time. So, I also install Autoclean cache of Autoptimize but be carefull, I found that this plugin makes Infinite Page reload sometimes. So, install it and check your homepage.

Usually, I keep all settings by default in Autoptimize, but I change and enable only two sections – Javascript and Css. Let’s check most important settings in plugin

I enable second and third option. Second option will merge all files in one file. Third option is important for me. Many plugins and themes use wp_add_inline_script function to add conditional peaces of code on site. I found that if you don’t have enabled third option, such code will be loaded before other script and drops error. So, I enable this option.

Next options are Css options

And again, I enable Agregate option to merge all files. But I disable Inline CSS option. This is because I use next option for Inline and Defer Css. This option is very important because it allows you to fight with Render Blocking, read next part…

back to menu ↑

How to Eliminate Render Block

This is most common problem on all sites. When wordpress loads all files, it loads javascripts in footer and all CSS in head section. Everything which is loaded in Head section of site will block rendering. It means that browser must load ALL files in head section BEFORE it starts to render page and this will drastically reduce speed of site in first seconds, because user will not see site before browser loads all styles. It’s not problem if site has small amount of css. But usually, there are many styles.

This is important especially for google. Because this styles block access to page for google bots in first seconds and bot must spend more sources to load files and analyze page. This is why “Eliminate render blocking” error is marked as First High Priority on all google test tools

We made some experiments. We totally disabled all caching and optimizations on site and checked site without Defer style option in Autoptimize. Here is results

So, we have 30-33 score for perfomance (other scores don’t affect speed)

Now, we enabled Defer and Inline Css option

Immidiatelly, we got + almost 20 points.

Ok, why this option is not so popular on sites and you still see problem? It’s simple. When you enable this option, all styles will be placed in footer. Yes, site will be loaded faster but in few seconds, you will see next problem

Do you see this weird unstyled flashing issue in first second? it’s because site is loading, but without styles. How to fix this? Well, you can add critical css files in next field.

How to get critical css? There are few methods. You can go to special site place link of your homepage, generate styles and copy them. But this way has one problem – it generates critical css for one page. But your inner pages may have another styles. Autoptimize plugin has support for Paid service critical.css which generates critical css for each page.

If you are user of our Re:hub themes, you don’t need to fill critical css and don’t need to buy extra service. Go to theme option – global enable – and enable option for critical css. Our theme will generate special styles for theme which will make styles only for top part of site, so, it’s even better than paid services like criticalcss
back to menu ↑

Eliminate Render Blocking Jquery

As you may know, WordPress loads Jquery library by default as it’s used by many plugins and themes. Bad thing is that it’s loading in header and block rendering. Inside Autoptimize, you can disable jquery from header.

Remove this word from settings

But be careful. Some themes load inline javascripts which are related on jquery and this can break whole site.

Sometimes this code can help to fix this. Use it in functions.php of your child theme (but remove <?php in start of code)

back to menu ↑

Problem with Google fonts

There is one more problem which depends on Render block. It’s Font problem. When you load google fonts (which are in use on most of sites), they can block page. Fortunately, Autoptimize has special option to fix this. Find it in Extra tab

back to menu ↑

Leverage browser caching

Next step is setting correct expiration data for static resources. By default, maybe you don’t need to do this now if you use Autoptimize, but if you have such problem in recommendation on Gtmetrix, here is my special settings for .htaccess

If you have enabled Seo by Yoast plugin, you can edit this file without ftp. Go to Seo – Tools – File Editor

In most cases you have some code in .htaccess which allows wordpress use permalinks. Leave it as is and add such code AFTER existing code in file. This is very important, otherwise, site can be broken.

Copy code from gist and add it in End of htaccess

https://gist.github.com/wpsoul/67a0676decc61506589f37fbb5a9f9c0

back to menu ↑

Image optimization

Heavy images is another most common speed problem on sites. Cool full width photos, videos, overlayed images with alpha channel are very popular and they allow to make WOW effect on your site. But in the same time they are very heavy. How to fix this?

back to menu ↑

WebP images

When you need images with alpha channel you use PNG format. But WebP is new better format which is recommended by google. We made some tests on our demo and we found that images in WebP format has 6 times less size than the same image in PNG. When you use JPG format, it has no big sense to use WEBP format, but it has sense to change images to webp when you need image with alpha channel.

Currently, wordpress doesn’t allow to upload webp images, so, you must install plugin WP Enable WebP or similar to allow this. You can convert your regular png images to webp images on many sites. My favorite is Ezgif You can even convert video with alpha chanel to webp format (it has sense for small videos, but not for big sized)

back to menu ↑

Lazyload images

This is must have on all sites. Simple script can load images only when visitor scroll to image. This will save tons of traffic and gives you many points on speed test. You can try different plugins for this, for example, BJ lazy load. But we recommend to use themes which have this option in core, because core lazy load is more compatible.

If you use Re:Hub theme, make sure that you have enabled Lazy load in theme option – global enable/disable. It’s enabled by default.
Don’t use Jetpack Lazy load (Photon) and Page speed modules on your Hosting. They have many incompatibilities with cache plugins

Even in fact that theme has lazy load for post modules, you need to install also Lazy load for inner posts, widgets, etc. We found that BJ Lazy Load plugin can do this job very well, but you need to add special class to settings so plugin will skip images with them

back to menu ↑

Image optimization in WordPress

It’s always better to load on site only optimized images. If you save them in any photo editor, make sure that you have near 65-70% of output quality. Don’t set 100% quality for photos, users will not see difference but size will be 2-3 times more than 70% quality.

You can also try EWWW Image Optimizer plugin which reduces your existing image size. It works on all new uploads, but also you can optimize all existing images. For this, go to Settings – EWWW Image Optimizer. At the top of page you will find link Bulk Optimize. Click on it and then begin Optimize Media Library and Optimize Everything Else

back to menu ↑

Do you need CDN?

Gtmetrix recommends you to use CDN. But fact is that CDN just makes more problems than solve them on small and new sites. This is because CDN is different server than your site, so, again, you can have unexpected delays in image loading, blocking issues, etc

But CDN is must have if you have really big site with more than 10 000 posts or products, because it allows you to keep your server free from such amount of files. So, my recommendation – use it on sites with big database and ignore on new sites and small sites

back to menu ↑

Extra features

We found that you can save few resources if you deactivate Emodji script and string numeration in files which is enabled by default in WordPress. You can do this in Extra tab in Autoptimize. Don’t use this if you need Emodji or you update site often

back to menu ↑

Fix Fontawesome and other Icon fonts

Many sites uses icon fonts, like fontawesome. There is one problem with them – Size. It’s really huge file size and google can recommend you to preload fonts. If you see this, you must find links on your fonts and add link parameter in header.

For example, for Rehub theme, I use next links in Theme option – general – Js code for header

https://gist.github.com/wpsoul/821e55ee523478781d9cfb76c86924f5

Place your domain instead https://recash.wpsoul.net

Also, maybe you don’t use all icons on site, so, you need to use only links on icon fonts which is used on site and which is recommended by google in Google speed reports

back to menu ↑

Conclusion

These are the main things that you can do with site. Usually, after all steps you will get A grade. Of course, there are many possible reasons why you can’t get it and they are individual for each site. If you want – you can hire me to check your settings and optimize your site. Check contacts to send me email

These methods are good for most hostings, shared and VPS. If you have high load project, you maybe need some another methods with server optimization. For example, settings for nginx + memcache.

Tags:

Subscribe
Notify of
guest
85 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] Also, we have great article how to increase speed of site with cache functions […]

Chaz
Chaz
4 years ago

Great post. Best edit to .htaccess I have found on the net.

Divaksh Jain
4 years ago

I can’t find option for the fontawesome, it is not there. Is there anything wrong with me? O.o

Rohit Singh
4 years ago

Thanks for this wonderful post I think that we must take steps to make our wordpress blog fast to load as possible because Google now considers blog speed as one of the major ranking factor.

Shahrukh
3 years ago

Awesome guide. I agree with you about the Google’s PageSpeed and I think GTmetrix is good enough, for me at least.

tongercore
tongercore
3 years ago

What about AMP, does Rehub supports the mobile standard of AMP?

Blog Khuyen Mai
3 years ago

Thank you. Your theme is nice

Bui
Bui
3 years ago

Website is running very slowly, I’m using it on vps

Maya
2 years ago

I tried EWWW Image Optimizer plugin and after installing it was showing fatal error. Is it happening due too conflict with other plugin? I had WP-Optimize plugin before I installed EWWW Image Optimizer.

Binh
2 years ago

Can next update of rehub is a light weight theme ? I only need a simple theme with content egg templates and top pages. It would be great if rehub have an option for choosing a light weight child theme ?

Binh
2 years ago
Reply to  wpsouladmin

I have already used it. Really awesome theme, thanks so much.

prat
2 years ago

how to manage cookie free domains notification in GTmetrix?

wpsouladmin
2 years ago
Reply to  prat

You must use CDN for this and special settings for domain. Ask your hoster how to do this

Bao Nhu
2 years ago

I used Litespeed Cache, it so good

Abhijeet
2 years ago

I am not a much coding person so I use WProcket results are good loads around 2 sec

Tinh Dau Haku
1 year ago
Reply to  Abhijeet

Yes, WP Rocket is simple and easy to use, I’m using it on my business site 🙂

A gia re
2 years ago

Thank you for sharing code. Litespeed is so good

Jeremy
2 years ago

Question, just i just copy and paste the htaccess and replace the one that is already in place?

paul
paul
2 years ago
Reply to  wpsouladmin

Hello wpsouladmin,

I’ve 500 Internal Server Error after insert your code to htaccess

What I need to do?

ps using your rehub theme

Helen
2 years ago

It’s really a nice theme. Thanks you

David vil
2 years ago

Is it true that some wordpress themes can’t optimize because of their JavaScript and Css?

Giang Hannah
2 years ago

Great code, my wordpress site speed better

o to tuan
2 years ago

Nice post. It’s show me how to make my site faster.

Fatoro
2 years ago

I use all the requirements of you, but my web only reached 5s. And how can you optimize the speed?

Fatoro
2 years ago
Reply to  wpsouladmin

Glad to hear your response very soon.
Currently, my web has 31 plugins, so is not much you?
We are using the RehuB theme and running the affiliate. Does this slow down the page load process?
Thank you very much!

wpsouladmin
2 years ago
Reply to  Fatoro

yes, 31 is too much. But it’s depending on plugins. Some can be very small, some can be very huge, anyway, 31 is too much

loot deals
2 years ago

Great information. we can easily reduce the website loading speed by using the low plugins.

Shop Nhat Chaly
1 year ago

Thank you for sharing, my website is better now

Ma Giam Gia
1 year ago

Awesome guide. Thank you!

Khuyen Mai Hang Ngay

Great post .Thank for your sharing

Gtiki
1 year ago

Nice post, Great code, my wordpress site speed better, thanks

Smith
1 year ago

The hosting plays an important role also, is it right?

catkara89
catkara89
1 year ago

Hi shazam,
Related to the “Remove Query Strings From Static Resources” plugin. Do it makes website become slow and CPU, Physical Memory Usage of hosting full? I have checked Review about this plugin and some comments not good about it.

Blog Review
1 year ago

Hi, I’m using LiteSpeedCache. Do you think this is a good choice? I’ve used W3 Total Cache and Super Cache but it doesn’t work too much for me.

Blog Review
1 year ago
Reply to  wpsouladmin

Thank you so much. With me this is the best choice compared to the others.

Nguyễn Hồng Nhung

Nice post and Great Code, my blog speed better. Thanks your share

DWAIPAYAN BANERJEE
DWAIPAYAN BANERJEE
1 year ago

Hello,
In our site we are facing Slow page loading and site performance on https://gtmetrix.com is not so good as Page is loading on 8-9 seconds with page request 132.

We have added Wp-rocket but not getting any speed improvement.

Currently we are facing the following issues With Yslow Score-61%
1)Make fewer HTTP requests
2)Add Expires headers
3) Use cookie-free domains
4)Reduce the number of DOM elements.

Also Page Speed Score-58%
1)Serve scaled images
2)Optimize images
3)Defer parsing of JavaScript
4)Avoid bad requests
5)Leverage browser caching

How to improve the Overall Page Score?

Thanks,
Dwaipayan

elizon.vn
8 months ago

google updates web speed part in google SEACH consel , SO i see my web
web has dropped sharply

Aliakbar
6 months ago

wow, Tour speed guide is actually very worthy than what i found on other websites. The major speed issue is with render-blocking, deferring CSS and also parallel we need to make sure the WordPress loading and visuals are not affected, I have tried so many WP speed optimizaTION PLUGINS, but in most of them, there is issues for Fonts, layouts, and CSS. Now as you have explained it briefly, this would be very easy for us,. Thank you again for sharing such a valuable and also you have created the Best theme in the world; Rehub, From directory to Ecommerce,… Read more »

Annie
6 months ago

Hi there, great post – just wondering if the Critical CSS option is no longer available in the Rehub theme? I can’t find it. Also do you still recommend Autoptimize after years?

Enrico
6 months ago
Reply to  wpsouladmin

Using Version 2.0 of Rehub framework and can’t find the option for critical css either.

Enrico
6 months ago
Reply to  wpsouladmin

OK..But how do I update – Tried to reupload the current theme but it won’t let me and in the plugins section there is no way to update the rehub framework plugin. Sry for the dummy question

Enrico
6 months ago
Reply to  Enrico

alright after installing the envato marketplace plugin and getting a token i was able to update thx!

Aliakbar
6 months ago

Hello, Enable critical CSS option not showing in REHUB theme optins> Global enable/disable
Please see it, as i am using caching plugin and my site is having a loading issue for just a sec,,, as showin in your image.
I am using REDEAL version./
please check it.

george
george
4 months ago

Hi, I tried using Rehub’s critical css and I still saw css flashes, and some pages weren’t loading. Is there any way to perfect it?

Sunny Kumar
3 months ago

I’ve also published a similar post on website speed optimization, where I share few more settings to speed up your website speed.

You can read it here: https://theguidex.com/website-speed-optimization/

Gavan P Corry
Gavan P Corry
3 months ago
Reply to  wpsouladmin

What is your solution?

James
James
3 months ago

Hi, because SiteGround has its own optimization plugin.

Can you introduce how to optimize the rehub theme speed with the Siteground host?

Faisal
Faisal
2 months ago

This worked for me. Now my website score for Google Page is 97 for desktop and 75 for mobile which is great! Thank you Sizam!

minled
2 months ago

Thank you, I have checked the speed of my website. It is really different from google speed insight.

WebmasterShare
2 months ago

I am using REHUB theme and my site got 100 point page speed and 99 point for Yslow. See the result here https://gtmetrix.com/reports/webmastershare.com/AyQNqYd0

Check the site here https://webmastershare.com/

Install a lot of plugins, so it’s possible to optimizing rehub theme

mrrr
2 months ago

Thanks for this post I check it every time when you add some extra details. I’ve a little problem with Inline and Defer CSS. I use Rehub (the option is enabled for critical css) with autoptimize and WP fastes Cache plugin. When I set autoptimise as you described seems not loading critical CSS files so even the style – I see just a raw page for 3-4 seconds and after it is ok. If I remove checkbox from Inline and Defer CSS and check back point 3 it is working well again. Do you have any idea what the problem… Read more »

mrrr
2 months ago
Reply to  wpsouladmin

Nice, thank you. In this case I’m looking for an other one. I red that many people use them both but in this case use badly.

CiroApp
2 months ago

Hi guys, this is the results I get with Rehub theme on my website : https://gtmetrix.com/reports/ciroapp.com/nR6Qu91q

I’m using WPRocket with Defer CSS only, Rehub’s critical CSS and CloudFlare for minify CSS, HTML, JS.

I don’t focus on getting the perfect score but more on the loading speed. If you have any advice to improve it, please share it below 😀

The website is actually using the demo “Redirect”, have a look it’s really beautiful : CiroAPP

Seda Dikmen
1 month ago

As soon as I activate Optimize JavaScript, no more images are displayed on my page. What could be the reason for this and how do I solve the problem.

Wredman Sola
1 month ago

By applying everything you listed above I got good results. But, I did one experiment with two types of hosting. free and paid hostings. I got to know that by using this plugins and setting my free hosting performance increases up to 35% that’s great enough!. Even GtMatrix score of free hosting site is comes to 78% from 56%.

Femenino.mx
1 month ago

Hi there! Beautiful blog post on page speed. We were able to take it from 20 to 40 points in less than an hour by following your tips 🙂

Keep the good work coming! And thanks for the information 🙂

Ban sharma
1 month ago

Thanks for sharing this wonderful information. AutOptimize plugin is better than WP fastest cache.

Sunny Bundel
22 days ago

Great post, but I think, you should also mention about the CDN such as cloudfront, as they will help you in increasing your site speed and even reduces various DNS request.

Whats your views on this?

Awist
14 days ago

Thank you very much for clarifying the issue of page loading speed. I have a question, is it possible to optimize a website that is not based on wordpress in a similar way?

Thank you in advance for your answer

Sunny Bundel
10 hours ago

Hey, I wonder how can I remove the leverage browser caching issue with analytics and adsense JS files.

wpsouladmin
3 hours ago
Reply to  Sunny Bundel

You can’t remove this because you can’t control, cache or optimize external scripts

85
0
Would love your thoughts, please comment.x
()
x