WordPress is the most popular CMS in the world and consist of a lot of scripts and plugins. It should work fast to be in good positions in the search engines.
Furthermore, Google announced at July 9, 2018 that using page speed in mobile search ranking is now rolling out for all users.
Scripts run optimization
WordPress uses PHP for scripting. So the three main steps should be done:
-
Enable PHP code cache
PHP caching could increase response time by about 50%. There are detailed steps how to check and configure PHP script caching.
-
Switch to the latest PHP version
Performance increase and other optimizations are made in 7.x versions of PHP. So, it’s recommended to use 7.2.10 version or later. If some scripts get inappropriate behavior just switch to 7.1.22 version – it’s the most stable.
-
Ensure that PHP debugger is disabled
Sometimes it’s still enabled. And it really slowdowns the performance. It can be disabled via editing php.ini file. In most cases, find section [xdebug] and inside it put a semicolon (comment) before ‘zend_extension’ key.
INTERESTING!Did you know that you can use familiar MS Word or Google Docs to create site’s content via WordPress’s plugin for importing from .DOCX just by one click?Read More
Content caching and optimization
One of the most effective ways to optimize sites’ load time is to cache unchanged (or rarely changing) parts to prevent them from reassembling.
The easiest way to manage that is to use a special plugin. There are many plugins that cover that needs. Below is shown a comparison of the most popular and free of them and choosing the best for our needs.
Required minimum features to be on top:
-
Server cache
-
Page load time
It’s the most critical parameter. Less time means better performance. If it’s big so it’s needed to increase hardware speed that cost money instead of choosing a better plugin.
-
Caching method
Load already prepared HTML, JS, CSS directly instead of generating them again.
-
Client cache
- Enable client browser’s cache to reduce requests to our site.
-
Optimize
-
Combine
Decrease requests to each JS, CSS from our site to increase load speed by joining them into a single one of each type.
-
Inline
It’s recommended to inline CSS into HTML to decrease request count.
-
Postpone
Load JS in the background to allow the user to see pages faster. One of the important feature according to Google Page Speed Test as it influences on render-blocking round trips count. Fewer round trips result in faster pages.
-
Minify
Remove unneeded spaces, comments etc. from HTML, JS, and CSS for minimizing size so increase load speed.
-
Compress
Decrease requested HTML, JS, CSS sizes by compressing them by Zip algorithm (GZip) to be downloaded faster.
-
Manage
Plugins Comparison
A special discovery was made to compare the plugins. Each plugin was installed and tested on the same page with plugin’s maximum performance settings. The results are arranged by the assigned total score.
According to test results, a role was assigned to each plugin. It useful to match plugin target functions.
Download Detailed Dynamic Comparison Table
Using a single plugin
The simplest way is to choose the all-in-one plugin to minimize configuration effort. So the fastest plugins that cover almost all requirements are Breeze, W3 Total Cache, and WordPress Cache and CDN Plugin.
And the most effective way is to use bundles (several plugins combinations). As there is no unique free plugin that covers all requirements and has high page load speed. There were tested several combinations that introduced below.
Using bundle: LiteSpeed Cache + Hyper Cache Extended + Autoptimize + Speed Up – Browser Caching
This bundle uses the optimization power of LiteSpeed Cache, one of the best caching speed from Hyper Cache Extended, brilliant CSS optimization from Autoptimize and ‘Speed Up – Browser Caching’ for client’s cache control and compressing. So, the resulting score is 94%. It’s the fastest and optimized combination.
LiteSpeed Cache’s related settings:
-
General
- Enable LiteSpeed Cache: Disable
-
Optimize
- CSS Minify: Off
- CSS Combine: Off
- JS Minify: On
- JS Combine: On
- HTML Minify: On
- Inline CSS Minify: On
- Inline JS Minify: On
- Load CSS Asynchronously: Off
- Generate Critical CSS: Off
- Generate Critical CSS In Background: Off
- Inline CSS Async Lib: Off
- Load JS Deferred: On
- Exclude JQuery: On
- Remove Comments: On
-
Tuning
- Combined CSS Priority: Off
- Combined JS Priority: Off
-
Advanced
- Browser Cache: Off
- Check Advanced Cache: Off
Hyper Cache Extended’s related settings:
-
Compression
- Enable compression: On
- Disk space usage: On
Autoptimize’s related settings:
-
HTML Options
-
JavaScript Options
- Optimize JavaScript Code: Off
-
CSS Options
- Optimize CSS Code: On
- Aggregate CSS-files: On
- Also aggregate inline CSS: On
- Generate data – URIs for images: On
- Inline all CSS: On
-
Misc Options
- Save aggregated script/css as static files: On
And Speed Up – Browser Caching has no settings – it does all by default.
Using bundle: WordPress Cache and CDN Plugin + Autoptimize
This combination eliminates the disadvantage of ‘WordPress Cache and CDN Plugin’ in JS postponing and uses the power of client cache and compression features. Finally, the resulting score is 90%. So it’s a very fast and handy set.
To use Autoptimize power, all related settings in WordPress Cache and CDN Plugin are disabled:
-
Cache & Database\Caching
- Compress cache: On
- Merge scripts: Off
- Merge css: Off
- Minify HTML: Off
- Enable Gzip Compression: On
- Leverage browser caching: On
And the settings of Autoptimize are:
-
HTML Options
-
JavaScript Options
- Optimize JavaScript Code: On
-
CSS Options
- Optimize CSS Code: On
- Aggregate CSS-files: On
- Also aggregate inline CSS: On
- Generate data – URIs for images: On
- Inline all CSS: On
-
Misc Options
- Save aggregated script/css as static files: On
Using bundle: Autoptimize + Cache Enabler + Speed Up – Browser Caching
That combination has achieved 88% score in testing results that higher than any other single plugin. As a result, we have high speed, simple and powerful solution.
The settings of Cache Enabler are:
-
Cache Behavior
- Pre-compression of cached pages: On
- Cache Minification: Disabled
The settings of Autoptimize are the same as in the previous bundle.
And Speed Up – Browser Caching has no settings – it does all by default.
Using bundle: LiteSpeed Cache + WP Fastest Cache
This combination has achieved only 79% score because of having not so good page load time instead of above bundles. But it still better by page load time that W3 Total Cache.
Settings were tuned in such way that LiteSpeed Cache was used as content optimizer:
-
General
- Enable LiteSpeed Cache: Disable
-
Optimize
- CSS Minify: On
- CSS Combine: On
- JS Minify: On
- JS Combine: On
- HTML Minify: On
- Inline CSS Minify: On
- Inline JS Minify: On
- Load CSS Asynchronously: Off
- Generate Critical CSS: Off
- Generate Critical CSS In Background: Off
- Inline CSS Async Lib: Off
- Load JS Deferred: On
- Exclude JQuery: On
- Remove Comments: On
-
Tuning
- Combined CSS Priority: Off
- Combined JS Priority: Off
-
Advanced
- Browser Cache: Off
- Check Advanced Cache: Off
And WP Fastest Cache options are set only as a cache provider:
-
Settings
- Cache System: On
- Minify HTML: Off
- Minify HTML Plus: Off
- Minify Css: Off
- Minify Css Plus: Off
- Combine Css: Off
- Minify Js: Off
- Combine Js: Off
- Combine Js Plus: Off
- Gzip: On
- Browser Caching: On
- Render Blocking Js: Off
Using other potential bundles
The result detailed dynamic table helps to choose and compare plugins according to needs. Tested plugin combinations (bundles) are listed there as well.
Note: Some plugins may be incompatible with each other.
Note: Always check JS correct working of postponing optimization options – some plugins might be tuned up and some might not work properly. Such plugins are commented in the results table.
Image compression
Images should be as smaller as possible to reduce response time.
Options above can be used in any combination.
-
Use image optimization plugin
It’s the easiest way. And most of such plugins are very simple instead of caching plugins. For instance, EWWW Image Optimizer, Imagify Image Optimizer, and Smush Image Compression and Optimization.
-
Use image optimization online services
There are a lot of such services. Just type ‘optimize image’ or ‘compress image’ in the browser and choose any from the top. E.g. Optimizilla, ShortPixel, OptimizePNG. They get any images and return optimized. Just replace it on the site.
-
Get optimized images from Google Page Speed Test
Finally, Google Page Speed Test provides optimized images after measure so it can be replaced in our sites. As sometimes, special services’ optimized images are still too large for Google.
Measuring
The result optimizations easily can be checked at Google Page Speed Test that shows any disadvantage in simple view and provides recommendation and explanation.
Furthermore, site’s speed can be directly measured by Google Chrome browser. Press F12, go to Network tab and press Ctrl+F5 to refresh page and track information. Here it’s possible to catch the response time of each page, content organization and media files.
More information can be discovered in the original post about WordPress site response time optimization with detailed caching plugin comparison and on the main site.
Seraphinite Solutions at WordPress.com 