Tutorial to set up caching of static WordPress page assets using free CDN for faster page load times.
Benefits:
- Serve content from CDN close to user.
- Use browser cache.
- Offload origin web server.
Watch on Youtube.
More WordPress speed optimization video tutorials.
Instructions: Setup CDN cache for static files of WordPress
- In Cloudflare navigate to “Caching” → “Configuration” page.
- Select “Standard” value for “Caching Level” field.
- Set “1 Year” for “Browser Cache TTL” field if your existing cache headers are low.
That is how to set up static file caching for WordPress websites on free Cloudflare CDN servers.
Two types of cache can be defined in Cloudflare:
- Cache on CDN.
- Define Browser cache time.
We need to use both of them for static file caching.
Here is the explanation:
| Browser Cache | CDN Cache | |
|---|---|---|
| Static files (page assets) | ✔ | ✔ |
| Dynamic WordPress Pages | ❌ | ✔ |
Static files (page assets): use CDN + Browser Cache for 1 year.
Because static assets do not change. New files will have different name or will use query string with version number.
Dynamic WordPress Pages (document): use only CDN cache for 1 day.
Content can be updated but Page permalink will not change. You can clear CDN cache but you cannot clear browser cache of every user.
Using CDN cache for static assets and dynamic pages I get 97% cache hit rate for WordPRess website.
Caching setup on CDN for dynamic WordPress pages explained here.
FAQ
What are static page assets?
Static files are real files that are served without processing from the web server. They are images, CSS stylesheet files, JavaScript files, font files, PDF, ZIP etc.
What is difference between Page and Page Assets?
Page is a single document, HTML page. It contains unformatted text.
Page assets are files used inside HTML page. Page assets add style, functionality and media (images, audio, video) to the page.
What is query string in static files?
Query string is an additional variable added to request URL. It is used to load different version of the file.
For example in “main.css?ver=123” URL query string is “?ver=123”
When WordPress version updates new query string variable will be appended to static files. Then Cloudflare will load, cache and serve new version of that static file.
“Standard” option for “Cache level” uses query string to cache separate version of static files.
Conclusion
Caching static files on CDN helps to load web pages faster from any location.
Using Browser cache helps to speed up site navigation and repeat views. Additionally it reduces total download size by using local browser cache.
What is next:
- On Free Cloudflare account: Cache dynamic WordPress pages, prevent spam, block useless crawlers, apply SSL.
- Learn how to improve PageSpeed Insights score for WordPress website.
- Download WordPress speed optimization checklist.