Caching a Dynamic Website. Does it Make a Difference for Loading Speed?
Did you know!
- You can significantly speed up a dynamic Website´s load time with caching.
- For a static Website, browsers cache the content on the client´s computer, in memory and on disk. Wikipedia…
What is Web Caching?
Web caching is caching of Web documents to improve performance, reduce bandwidth consumption and server load. Web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met. Web caching can significantly enhance the user´s Web browsing experience.
To emphasize, this article discusses Web caching for a dynamic Website and specifically for a WordPress Website. By default, each time a user visits your dynamic Website, WordPress will go through sometimes a lengthy process to build and display everything you see on your screen. First, WordPress PHP core code makes numerous calls to the database and finally outputs the HTML page for the browser to display. By integrating a cache mechanism, the dynamic Web pages are converted into static files and stored, so a visitor downloads the static files rather than interacting with the database every time.
Does Web caching speeds up your Dynamic Website´s load time? ABSOLUTELY…
How does Caching work?
Dynamic Websites are continually updating their pages with fresh content. There are checks in place to ensure that the content displayed for the user is current. Caching mechanism must be equipped with an expiration that would delete the cache when content has been changed. The real value of caching is that it serves static copies of files your Website would otherwise serve dynamically. Caching is an excellent way of decreasing the stress on the server by running more static files and less queries.
The following image shows how caching works from the user perspective.
Different ways to cache a Dynamic Website
There are several ways to cache your dynamic Website. In general, you could either use an external extension (add-on or plugin), add the code to the .htaccess file (do it yourself caching), or use the control panel especially for Windows IIS server.
Below are few references:
- .htaccess Rules for Website Speed Optimization
- How to Leverage Browser Caching in WordPress via .htaccess
- Leveraging Browser Caching in WordPress via .htaccess
- Speed up Website by Compressing and Caching your content with .htaccess
- Configure IIS 7 Output Caching
What about Bandwidth?
No question that Web caching saves bandwidth usage, especially when the cache is stored locally on the user´s computer. Also Etag allows cache to be more efficient, and saves bandwidth, as the Web server does not need to send a full response if the content has not changed.
Why Website Speed is Important?
Your blog’s loading speed affects more than just user experience but it is now a factor used by Google´s ranking algorithm. The reasoning according to the official Google Webmaster Central Blog, is to provide the most relevant search results from Websites that offer the best user experience. Website speed is something that we cannot ignore.
Caching a WordPress Website
Why the need for a cache plugin?
Despite its wide adoption across the Web as a blogging and a CMS platform, WordPress is memory hungry. This high memory usage becomes apparent when your blog goes down due to server overload from the high number of visitors.
Caching dramatically eases the load on your server by presenting static files to users instead of making numerous calls back and forth to the database. A cache plugin stores the dynamically generated page as a static page. This static page is then served to the visitor. There are several plugins to choose from including WP Super Cache, Hyper Cache, and W3 Total Cache. This tutorial have done an excellent job comparing them.
W3 Total Cache
The plugin of my choice is W3 Total Cache as it combines not only page caching, but also browser caching, database caching, object caching, compression, minification and CDN integration. CDN basically caches your Website´s static files on servers all over the world and then serves them from the node closest to the user.
W3 Total Cache is the most complete WordPress performance optimization plugin. It improves user experience by improving server performance, caching every aspect of the Website, reducing download time of Web pages and delivers almost instant second page views. Many popular blogs rely on the W3 Total Cache plugin for better Website performance.
Setting up W3 Total Cache Plugin for This Blog
I will not go into details how to setup the W3 Total Cache for a WordPress Blog. The most important thing, after you install and setup this plugin is to thoroughly test your blog to make sure that everything works as it should.
The following table lists this blog´s W3 Total cache settings. All Files are in PDF, Adobe Reader software is required which could be downloaded from here.
| External PDF file |
|---|
| General Settings |
| Page Cache Settings |
| Minify Settings |
| Database Cache Settings |
| Object Cache Settings |
| Browser Cache Settings |
| Content Delivery Network Settings |
| Frequently Asked Questions |
| About |
Below are 2 references, from the same author, on how to install and setup the W3 Total Cache plugin for WordPress:
About the W3 Total Cache settings for this blog:
- I did not minify my external JavaScripts and CSS files, since it messed up my blog. So I decided not to use it. For this blog, minifying the external JavaScript and CSS is not worthed because I have 5-6 very small external files to start with.
- My blog is already compressed. See my previous post. Therefore, I kept the HTTP compression feature disabled. In any case W3 Total Cache, according to the plugin author, cannot control compression and headers and a few other things on IIS servers.
- I kept the CDN feature disabled. This is something to explore but probably the cost to benefit ratio for this blog might not justify it. I don´t have the traffic that justifies it.
- W3 Total Cache has a very nice feature called Cache Preload. With Cache Preload, you can automatically fill the cache, using an XML sitemap. This means serving pre-cached pages to all visitors, even if the page has not been visited recently. By default the plugin creates the cached pages only when someone visits them.
Verify that W3 Total Cache is Installed
For tangible download speed metrics, consider the following 2 tools I used below. Also in the source code for each Web page you will see something similar (depending on your settings) at the bottom of the page, as shown in the image below:
YSlow and Page Speed Before and After Caching
The following table shows Yahoo! Yslow and Google Page Speed results before and after caching has been applied to this blog.
| Yahoo! YSlow | Google Page Speed | |
|---|---|---|
| BEFORE Caching | Grade A – Score=93 see PDF file. |
Score = 80/100 see PDF file. |
| AFTER Caching | Grade A – Score=93 see PDF file. |
Score = 81/100 see PDF file. |
From YSlow and Page Speed perspective, caching this Blog added NO value. But what about loading speed?
Does Caching Speed up Load Time of a Dynamic Website?
To answer this question, I used 2 online tools: WebWait and WebPagetest. I tested this blog´s main page download time BEFORE and AFTER applying W3 Total Cache Plugin. The results are shown in the following 5 images:
Webwait – Baseline. My Blog download speed BEFORE caching.
Average load time after 30 runs = 18.37 sec
Webwait – Test results. My Blog´s download speed AFTER caching.
Average load time after 30 runs = 1.78 sec (90.3% improvement. About 10.5 times faster.)
WebPagetest Complete Data – Baseline. My Blog´s download speed BEFORE caching.
Average load time after 10 runs = 20.4 sec
WebPagetest Complete Data – My Blog´s download speed AFTER caching.
Average load time after 10 runs = 4.15 sec (79.6% improvement. About 5 times faster.)
WebPagetest Complete Data – My Blog´s download speed AFTER caching, second run.
Average load time after 10 runs = 3.80 sec (81.3% improvement. About 5.5 times faster.)
From the results above, the improvement of this blog´s download speed is IMPRESSIVE. This is a surprising fact that caching did make such a significant difference even though the blog´s YSlow and Page Speed scores has not improved. The fact is that Web caching will definitely improve Website load speed.
References
- WebWait – Website timer
- WebPagetest – Website Download Speed Tool
- Website Speed and Performance
- Yahoo! Best Practices for Speeding Up Your Website
- W3 Total Cache Plugin
- ETag
- Caching Tutorial
- W3 Total Cache Plugin
- CDN
- Cache Control
- Cache it! Solve PHP Performance Problems
- Web Cache
- Cacheability Query
Related Reading
- 14 Tips for Maximum WordPress Performance & Speed
- 18+ Essential Tips to Dramatically Improve Website Speed
- How to Delete and Limit Post Revisions in WordPress
- HTTP Compression. Does it Make a Difference for Website Speed?
The Irony! The day after I managed to dramatically improve this blog´s download speed, I started getting 20-30 spam comments per day compared to 3-4 spam comments per week before. You could say there is one advantage of having a slow loading blog.
Message From twitter:
@abichedid kifak ? ;) saw your post on caching, and I was wondering if DB + Object caching has to be enabled or not ? And what advantages ?
Hi Zizo:
About W3 Total cache Plugin (http://wordpress.org/extend/plugins/w3-total-cache/)
Yes both DB and Object caching have to be ENABLED. Remember the objective of caching is to increase Web page loading speed (i.e. decrease the page loading time) for best user experience.
Read General Settings for W3 Total Cache.
DB caching – Reduces post, page and feed creation time: Database Cache Settings
Object caching – to further reduce execution time for common operations (especially for highly dynamic websites): Object Cache Settings
As for this Blog, I no longer use any caching plugin since I made ‘theme switching” available for my visitors. Visitors of this blog have the option to switch between 4 different themes. Theme switching does not work with a caching plugin. Now I resort to other coding means to increase page loading speed (see my previous tutorial:14 Tips for Maximum WordPress Performance & Speed)
But I do like W3 Total Cache and I strongly support using it, unfortunately in my case I have to choose between ‘Theme Switching’ and ‘W3 Total Cache’, so I chose the former.
Hope this helps.
I have wanted to post something like this on my site and you have given me an idea. Cheers.
can anyone tell me if i use this plugin could i banned from google adsense?
Are you really serious?
The answer is NO.
Please somebody tell me that How can I set the cache type(1min cache,5min cache,….) to the whole page or to a part??
I specially wanted to leave this comment to tell you thank you for this helpful post.