How to Speed Up Your Website (Caching Tools)
The cache on your website is basically a temporary storage of your files like images, logos, texts or any other multimedia.
Hello, everyone! How are you feeling today? We hope you’re all safe and doing well, despite everything happening in the world.
So, in today’s article we’re going to be talking about caching your website and more specifically – the tools we recommend. If you don’t know anything about website speed and aren’t even sure how to check it out – I highly suggest you read this other article from our blog first: Why is Your Website Slow. Don’t forget to come back later for even more information 😉
Read more: Why is Your Website Slow
Read more: Why is Your Website Slow?
What we’re going to talk about:
1. What is caching?
The cache on your website is basically a temporary storage of your files like images, logos, texts or any other multimedia. It acts like a memory bank, making it easy to access data locally instead of redownloading it every time you visit a website or open an app.
For example, when a visitor requests a page on your site, a lot has to happen for the page to load. All of the content has to be fetched from the WordPress database, the theme and its settings have to be loaded, and the same has to happen also and for any plugins. This creates work for the server, which naturally takes time.
Caching reduces the work required to load this page by doing the server work once and saving a temporary “finished” copy of the page. This temporary copy can be served to visitors right away and of course the page is loading much faster.
WP Rocket is internationally recognized as being one of the best caching plugins in the WordPress community. It is a paid plugin, which comes with many different caching options, file optimization, media, preloading, database optimizations and more. It’s pretty advanced and we have been able to achieve great results by using it.
Some of the features we want to highlight are:
Cache:
Mobile Cache – allows you to specifically cache your website for visitors who are using a mobile device.
File optimization:
Minifying CSS – removes whitespace and comments to reduce the file size.
Optimizing CSS delivery – eliminates render-blocking CSS.
Minifying JavaScript files – removes whitespace and comments to reduce the file size.
Loading JavaScript deferred – eliminates render-blocking JS.
Delaying JavaScript execution – delays the loading of JS files until user interaction (i.e. scroll, click).
Media:
LazyLoad for media – improves actual and perceived loading time as images, iframes, and videos are loaded only as they enter (or about to enter) the viewport and reduces the number of HTTP requests.
Adding image dimensions – adding missing width and height dimensions to your images. This helps with CLS (Cumulative Layout Shifts).
A quick example to explain this: when you visit a website, the media takes longer to load than the text. As website visitors, we are often impatient and start reading and scrolling through as soon as the first paragraph appears. If the page doesn’t know what space an image is going to take (it doesn’t know its dimensions), it just shows 3 text paragraphs one after the other. The problem is that between paragraph 1 and paragraph 2 there is an image that is still loading. So when it finally loads, it pushes down paragraph 2 aaaand you just missed the sentence you were reading. By specifically saying this image is going to be 100px wide and 100px high, you will see this as a fixed space between the paragraphs, so while it loads, you know you have to scroll down to read paragraph 2 and you don’t miss your sentence 😉
WebP compatibility – webP is a new image format (such as jpg, png, etc.) that was introduced to browsers some time ago. If you are using webP images on your website, WP Rocket will serve them to compatible browsers. If a browser doesn’t support webP, Rocket will serve them as their original file – jpg, png, etc.
Preload:
Preload cache – if enabled, WP Rocket will generate the cache starting with the links on your homepage followed by the sitemaps you specify. It’s compatible with most well-known SEO plugins such as RankMath and YoastSEO, but if it doesn’t detect your sitemap, you can put it as a link.
Preload links – it improves the perceived load time by downloading a page when a user hovers over a link. So, if you hover over this link, WP Rocket will know it has to load our Blog page and it starts preparing the files. So when you actually click on the link, a lot of the work is already done and the page is loaded faster.
Preload fonts – helps browsers discover fonts in CSS files, if those fonts are hosted on your own domain.
Database:
Here you can schedule a periodic automatic database cleanup and optimization by allowing WP Rocket to delete post revisions, auto drafts, trashed posts, spam and trashed comments and transients.
Optimizing your database may cause irreparable problems, so make sure you also have automatic database backups scheduled as well, for example in UpdraftPlus.
Read more: How To Backup Your Website
Add-ons:
WP Rocket also supports one-click services add-ons, such as:
Google Tracking – hosts Google Analytics scripts locally on your server and helps with leveraging browser caching.
Facebook Pixel – hosts FB Pixel locally on your server and helps with leveraging browser caching.
Cloudflare – if you’re already caching your website through Cloudflare, you can integrate it within WP Rocket for easy access to basic settings, such as clearing cache, enabling dev mode, etc.
Most of the settings discussed above can be changed for specific pages as well. Example: if you wish not to delay JS execution only on your Contacts page, you can uncheck this option in the page’s settings.
WP Rocket also has a pretty extensive documentation, with separate articles for almost all of its settings.
Beware though that WP Rocket is a powerful tool and if you haven’t got any experience with caching and file optimization, you can mess up your website pretty badly. We always advise you to contact a professional to help you.
** We have a WP Rocket subscription for unlimited websites, so if you’re interested in using it on your website, please contact us and we will provide and set it up for you at a reasonable price.
WP Fastest Cache has a free and paid version, but if you have a budget for a paid plugin, we recommend choosing WP Rocket. If, however, you prefer not to spend money on this, WP Fastest Cache is tested by us and good enough for being free.
With WP Fastest Cache, most of the settings are held in one list in the Settings tab. In case you are not sure what a specific setting is for, you can click on the information icon tab that will take you to a new page with more detailed explanation about the setting.
For some settings that require further choices, WP Fastest Cache will open a pop-up and ask you which option you prefer. If you want to clear the cache after a new post is published, the plugin will give you the option to clear all the cache or only the cache to a specific page.
If you would like to set cache exclusion rules, you can do it by going to the Exclude tab and choosing from the options.
Read more: Top 5 Free Plugins To Use
This plugin is very useful when you want to strip unused code on specific pages. A quick example from its creators: “For instance, you might use a plugin that generates contact forms and it loads its assets (.CSS and .JS files) in every page of your website instead of doing it only in the /contact page (if that’s the only place where you need it).”
We prefer to use its free version in combination with WP Rocket for ultimate results, but the free version of it covers a lot of WP Rocket’s settings (minifying CSS and JS, preloading files and fonts, eliminating render-blocking resources, etc.), so if you want to test a few things out – you might want to give it a shot too.
This is also a pretty powerful tool, so if you don’t have any experience and want to experiment, we recommend using the Test mode to make sure that nothing breaks.
The last on our list is Cloudflare. It’s a little different from the rest of the plugins, as it serves a slightly different purpose. We also recommend using it in combination with WP Rocket. If you choose not to use Rocket, it’s no problem – there is a stand-alone plugin, which gives you quick access to basic settings, such as clearing cache and enabling dev mode.
Cloudflare is a Content Delivery Network (CDN) and what it does is it caches your website and then serves it from a place that is closest to your website visitor’s location. For example, if your server is located in Bulgaria and a viewer from the USA wants to view your website, the data has a long way to travel, which causes a delay in loading time. So Cloudflare will take your website and serve it from a point in the world that is closest to the viewer’s location – in our example this would be a server in the USA, which makes your website load faster.
Cloudflare actually has a lot more to offer, but for the purpose of today’s article we won’t focus on it. You can read more on their website.
To conclude, I’d like to say that optimizing your website speed is often a complicated process which takes time, knowledge and resources. It’s definitely not a one-time-thing and unless you maintain your website well, soon you’ll be back trying to figure out what went wrong this time. I highly recommend reading our Why is your website slow аrticle as well, because it еxplains in detail the things that slow down your website in general and how to fix them.
Read more: Why is Your Website Slow?
That’s all for today 🙂 Hope this article was interesting and most importantly – helpful. If you have anything else to share, don’t hesitate to leave a comment down below. If you’re interested in working with us on your website’s speed, drop us a line here.
Recent posts
Recent posts
You may also like
More articles in technology
Who wrote this article
Learn more about the author
Mirela Vaseva
Website Creator & Head of QA
/ IT, Software Engineering graduate 💻
/ good music, horror films, detective novels and delectable food 👌
/ YouTube videos junkie 🎥
/ animals, nature, water lover 🐱
Comments
Would you like to share something?
No comment yet, add your voice below!