Table of contents
In the first article, we talked about test tools for your website. In this article, we’re going to continue and provide solutions for some of the most common issues when it comes to site speed/loading time.
Cache
There are a lot of plugins that will help you with cache in WordPress. I will go through some of my favorites.
WP Fastest Cache
It’s very simple to use. This is why I like it.
You install the plugin, activate it, enable cache, Gzip compression, Browser caching and you’re set.
Other features:
- it allows you to preload posts, pages, categories
- combine and minify for CSS, combine for JS
- minify HTML
More features are available on the paid version. I’m perfectly ok using the free version and it goes really well with Autoptimize if you want to handle minify and combine separately.
Hyper Cache
It has more or less the same features that you will find in any cache plugin. The main thing is that it has a double cache for desktop and mobile version. This is great!
If you end up using something like wp_is_mobile() in your code, you know that it won’t work correctly when cached. This plugin will solve that issue because it will render each page and cache it individually for mobile and desktop.
The plugin is very well optimized and uses only PHP to do the job and you will be able to use it on a hosting service with low resources.
Cache Enabler – WordPress Cache
This plugin has a different approach when it comes to caching the pages. It will create HTML static files for your pages and store them on the server. When your visitor access the page the server will deliver the static HTML and avoid any backend process that will require extra resources.
One reason to use this plugin is for the integration with “Optimus”.
“Optimus” it’s a plugin that will allow you to deliver .webp images into your pages and “Cache Enabler” will allow you to cache those pages. It will create 2 HTML files for each page: one with the standard images that you have and one with all images replaced to .webp.
Why does it need to do that? Because some browser will not read your .webp files and people will not see any images on those pages. This way “Cache Enabler” will deliver the correct cached version based on the visitor’s browser.
There are a lot of other cache plugins, but these are the top 3 most used by us.
Like any other thing, you might need to test with multiple cache plugins until you find the right one.
Minify/Combine
You will want to minify the CSS and JS files but also combine them into as few files as possible to get rid off those requests.
Some cache plugins already have this option (like WP Fastest Cache does), but I prefer to use a dedicated plugin for that.
Autoptimize
This is my to go plugin when it comes to minify and combine.
Some of the features:
- Optimize JS/CSS
- Aggregate JS/CSS files
- Exclude scripts/style files from Autoptimize. This is very useful because you’ll see that some functionalities might break and you want to remove those scripts from being combined. Same for style.
- Inline and Defer CSS. This will allow you to add “above the fold CSS” until the main optimized CSS is loaded. Is a great way to remove all request and provide some styling for the site until the actual resources are loaded. The content will start to be displayed without having to wait for the actual style file.
- Combine Google Fonts and load them asynchronously
- Remove query strings
This plugin works with every other cache plugin that I worked with. Just make sure you don’t have to minify and combine enabled on the cache plugin. Same for Divi themes. Divi themes will enable minify and combine by default, check if you want that or not.
Image Optimization
Smush Image from WPMU DEV
Very easy to use and it visually it looks very pleasing.
It’s a very good plugin all around, just 2 things that you need to know for the free version:
- it optimizes in batches of 50 files, so if you’re planning to optimize a lot of images you will need to click the button to continue the process after each 50 file.
- it has a limit of 1MB per file
reSmush.it Image Optimizer
Works great and it has a limit of 5MB per file. You can run the process for all the images, no limit on the batch.
Optimus – WordPress Image Optimizer
Apart from the image optimization, this plugin will allow you to deliver WebP images into your page.
It will generate .webp files automatically and will replace those from your page. You need to use it with the “Cache Enabler” plugin that I mentioned above to offer support for old browsers also.
You will need the HQ (paid) version for WebP image conversion.
Another notable mention: EWWW Image Optimizer. I run into issues with it on different servers and I stopped using it.
CDN
If you still don’t know what a CDN is, Cloudflare has a is a very comprehensive explanation for you.
Cloudflare
First of all, it’s free.
You get:
- SSL certificate. Note: This is a “Full” secure connection between your visitor and Cloudflare, and secure connection (but not authenticated) between Cloudflare and your web server. In order to have a “Full Strict”, you need an SSL certificate on your server also.
- Firewall
- Details about traffic and attacks
- Stats about performance and how much bandwidth Clouflare saved you
Cloudflare also has some tools for Auto Minify and Rocket Loder that will combine and minify your CSS and JS. I don’t recommend using them if you’re already doing this on the server side.
In a recent update, they added a similar feature to the delegation. You can add multiple users to your account. In case you have another developer that needs to work and have access to clear the cache or put the whole thing in developer mode, you can do that without sharing your login credentials.
Conclusion
Alongside with Part 1, these 2 articles will help you get started on optimizing your website.
Some aspect might change in the months/years to come, but these are very core and basic things that you will need regardless of the new tweaks added by Google to the algorithm.