How to optimize Web Vitals on WordPress in 2021
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.
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.
Which hostings I can recommend: Siteground, Bluehost, WP engine, Kinsta, WPX. I used these hostings on many sites and they prove me that they are good optimized for WordPress. I use Siteground plans for many of my sites because it has very flexible price options (from $5 for month). But here I want to point you on one interesting thing which I found recently. And this thing is TTFB.back to menu ↑
TTFB of Hosting
Few months ago, one person contacted with me and asked to test their new Hosting Rocket Net. Well, I am always sceptical for such suggestions, I got many of them each month. But this guy wrote to me that they have really fast hosting, faster than any other. Ok. I decided to try and test. And yes, I was really surprised by their TTFB, which sometimes show me 50ms on GTmetrix (for example, Siteground, which is fast hosting, shows me usually near 500ms). TTFB is very affecting total speed and score. If you have TTFB more than 500ms on Gtmetrix, maybe, it’s better to move to another hosting.
How Rocket hosting made such speed? Well, they provide Cloudflare enabled Enterprise functions for all sites. Of course, you can buy own Cloudflare account, but Enterprise starts from $500 per month, Rocket hosting starts from $30 per month.
By the way, with this new hosting, I made 100 score on GTmetrix for Woocommerce pages.
See by yourself if you don’t believe me.
Of course, this is new hosting. It has very good panel and one click wordpress installation + temporal address, but many things still need some small improvement. So, I recommend testing it. Also, here is my deal. If you use our theme and you have bad speed on site, send link to us, we can check it. Then, register on Rocket hosting by our affiliate link, create site there and send us admin access. We will install and test all recommendations from this tutorial for you for free with a guarantee that you will have more than 90 score on gtmetrix on most of the pages.back to menu ↑
Avoid external scripts
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 themback 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 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.
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. Agregate Inline Css and Defer CSS options are optional. You can try to test score of site with two settings.
First setting – enable Aggregate Inline Css but disable Defer Css. Test score. Second option – disable aggregate Inline and enable Defer Css. Defer Css option allows to fight with Render Blocking, read next part…back to menu ↑
How to Eliminate Render Block
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.
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 it blocks rendering. Inside Autoptimize, you can disable jquery from header.
Remove this word from settings
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 tabback to menu ↑
Asynchronious script loading
By our tests, we don’t see big difference in using Async, but it can be useful if you have many script related plugins.back to menu ↑
Starting from November, all test speed tools use Google Lighthouse. And Google reduces score if you have big CLS (Cumulative Layout Shift).
This is the big problem, because ways how we fix Render blocking affect CLS negatively. Let me explain what happens.
When you enable defer parsing for render blocking fix, all your styles go to bottom of page and loaded after page load. This makes part of page as not styled why loading. And this creates layout shift, because elements on loading are shifting after page load. So, fix for one problem creates another problem.
Critical CSS option will reduce layout shifting. All themes, must have this option now. But, on our tests, we found that fixing render blocking issue doesn’t improve score and reduces it instead.
So, the only way now is TEST and COMPARE. Enable defer parsing and critical css on site. Check score. Clean cache, disable defer parsing, clean cache again, check score.
By our tests, sites which have large amount of styles (for example, shops, marketplaces, directories) have better score with defer parsing (even if they have not good CLS). But sites which are related only on posts have better score without defer parsing (even if they have notice about render blocking).
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
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
If you don’t want to edit htaccess, use plugin Speed Up – Browser Caching – plugin will make htaccess rules for you.back to menu ↑
Clean Assets of site
When we make any theme or plugin, we always keep speed in mind and we always load scripts and styles only when they are needed on page. Unfortunately, this is not what all developers do. We found that almost all plugins load some global styles and scripts on site. Even more, WordPress loads such styles (Gutenberg block styles) on all pages, even on those pages where you don’t use Gutenberg at all. So, we need to clean site from such files. This requires very good knowledge of wordpress, because you can delete something important, however, we can give you some advices what we remove in most of cases, so you can remove such files without problems.
You will need plugin Webcraftic Assets manager
Once you install plugin, visit your homepage. Click on Asset Manager in admin bar
Page with all files will be opened
Usually, I disable next
As our theme uses own WOW animation framework, which is working as script, I disable Animation styles of Elementor on whole site
Woocommerce has some Gutenberg blocks, but they are very ugly in design, so, I never use them and disable these files on whole site
If you don’t use Cart of woocommerce, maybe it’s better to disable also wc-cart-fragments and wc-add-to-cart scripts
I also limit two files for WordPress Blocks: wp-embed (responsible for embeding youtube and other services in posts) and wp-block-library. But I do this only for all post types exclude Posts, because i use Gutenberg in postsback to menu ↑
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 ↑
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 ↑
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.
Update. August 2020. From 5.5 version of WordPress, all images have lazy load. It’s working very well under our tests, so, you don’t need to install any additional plugins now
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 Elseback 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 sitesback to menu ↑
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 oftenback 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 preload link parameter in header.
Autoptimize has also option to add preload.
If your theme uses any icon font, check it’s size. We were surprised because fontawesome icons have near 1 mb size, when we created custom icons, they have size only 23kb. So, if your theme or plugin uses full fontawesome icon bundle, ask them to replace icons to custom icons.back to menu ↑
Elementor Site Kit Fix
Recently we found weird issue on our sites. Even in fact that our theme has optimized font loading, we see that we have several additonal fonts which are loaded on site. After many tests we found that problem is in Elementor. They added new function – Global Site kit, it’s cool feature but way how it’s implemented is absolutely unacceptable. It loads Roboto and Roboto Slab fonts and many colors settings on pages of your site. Problem is that this feature is enabled by default and most of users don’t know about it.
Here how to fix.
Open any of page in Elementor. Then, click on hamburger icon
Then, choose Site settings and Font settings. Click on blue Pencil icon on each font and then, click on Return icon to clean font settings (it’s in Typography line)
Clear all fonts and Update settings.back to menu ↑
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.