10 tips to speed up WordPress or WooCommerce in 2020
Page load time is essential. When we're talking about webshops, speed can be a crucial factor between buying and leaving. Mobile devices are used in various situations - e.g. when we're waiting for a bus and this is the main reason why mobile users stay shorter. In this “how-to”, we'll go through 10 things that anyone can do.
To compare results before and after, you can use PageSpeed Insights
Backend optimizations include time to execute PHP code, server response time and DB queries. Therefore, everything on the server side.
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.
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.
Frontend optimizations are related to everything that is executed on visitor’s device.
6. HTTP/2 protocol
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
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:
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/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/plain
AddOutputFilterByType DEFLATE text/xml
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:
AddType application/font-woff2 woff2
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 image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType application/font-woff2 "access 1 year"
ExpiresDefault "access 1 month"
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.