10 tips to speed up WordPress or WooCommerce in 2020

Tool

To compare results before and after, you can use PageSpeed Insights

Backend optimizations

Backend optimizations include time to execute PHP code, server response time and DB queries. Therefore, everything on the server side.

1. PHP7

If your administration is slow and pages are blank during the load, this might solve your problem, especially if you use low quality themes with lots of plugins from ThemeForest

PHP version 7 brings significant acceleration to your website. Moving to PHP7 is easy – if you have cPanel you can do it yourself using “Select PHP Version” or you can ask your hosting provider to do that instead of you.

2. Disable and delete revisions

If you have large database, revisions can cause problems. Disabling is very easy.

Go to your wp-config.php and add:

define('AUTOSAVE_INTERVAL', 300 );
define('WP_POST_REVISIONS', false );

Remove old revisions by executing query:

DELETE FROM wp_posts WHERE post_type = "revision";

You can also use a plugin for this.

3. Disable and remove plugins

Deleting plugins that are not important for your web can increase your website speed.

Sometimes, plugins have bugs. E.g. Some versions of Contact Form 7 Mailchimp call Mailchimp server on each reload which decreases loading time by 1.5 sec!

You have to also be careful with complex plugins like WPML

4. Cleanup DB

Database sometimes contains unnecessary tables and rows. Plugin WP-Optimize can help you with cleanup process. Before performing cleanup, you should make DB backup. After you finish, you can deactivate and delete WP-Optimize.

5. Cache

WP has great caching solutions. Although there are many caching mechanisms, basically the first request to some page (e.g. homepage) will create a static HTML version. Every following request will be served instantly with static version with no queries to the DB. Static version has own expiry and after expiration, there will be created new version. Every change on the web (e.g. adding new product) will automatically clear cache.

You have to be careful with caching because sometimes you might have parts that are dynamic. For example – cart content, number of currently active users, etc. You can handle this problem by JavaScript, using dynamic caching but sometimes you will have to disable caching for all logged in users.

Frontend optimizations

Frontend optimizations are related to everything that is executed on visitor’s device.

6. HTTP/2 protocol

Instead of fetching resources one by one (javascript file, css file, images, …), you can fetch everything at once.

Simply, ask your hosting provider to enable HTTP/2.

You can test if your website is already using HTTP/2 using HTTP/2 testing tool

7. CSS merge and minification

All CSS should be loaded in a single request. The same goes for JavaScript. In order to prevent blocking of website rendering, you should move JS to the end of your HTML document or load JS asynchronously.

CSS, JS, and HTML should be minified.

For all of that, you can use plugin Autoptimize which will do everything for you.

8. Lazy Load

Images should be loaded right before they enter the screen. It’s a bad idea to load images in the footer if the user never scrolls to the bottom of the page.

Lazy Load technique is pretty easy if you use the Autoptimize plugin from the previous step.

9. Optimize photos

You can compress photos without loss of quality! To achieve that, you can use plugin like Smush which will automatically compress all sizes. Additionally, you’ll save some disk space.

Today, we have very efficient image formats like webp. Sometimes, you can have even 10x smaller images with identical quality! For this optimization, you can use WebP Express plugin.

10. Enable gzip compression and define expiration

This will drastically decrease the size of your text files Simply add following commands to your .htaccess:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

By defining expiration, you’ll say: “If user has already loaded logo in last year, fetch logo from user’s computer”.

Add to your .htaccess:

<IfModule mod_expires.c>
AddType application/font-woff2 woff2
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType application/javascript "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType application/font-woff2 "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

That was 10 things that anyone could do using plugins or by adding just a few lines of code.

For those who want to know more – explore Critical CSS technique, analyze your code and redirects, all advice on PageSpeed insights tools, Google AMP, etc.