How To Use Varnish and Cloudflare for Maximum Caching?

Last Updated on May 16, 2022 by freewarespace

The first impression of a good WordPress site is that its site’s landing page should load quickly. Then, the loading times of rest of interlinked pages should be fast. For a website to load fast it should have different layered approaches to caching.How to improve page load times of website?

1. The first layer is the presence of content delivery network (CDN).
2. The second layer of creating the faster website is to install a free TLS/SSL certificate signed by CloudFlare on your origin server.
3. It is completely free of cost.
4. Enable Varnish cache and enable Varnish cache settings for individual domains.
5. Most of times sites in the web browser wats for around 1.6 seconds for favicon to load. It is a good idea to add the favicon to reduce this waiting time of web browser in visitor’s computer.
6. Enable HTTP/2on CloudFlare to work with Varnish cache.
7. Use HTTPS protocol on your website.

How to enable Varnish cache on your origin server?

• Log in to cPanel
• Provide User Name and Password
• Go to WEB ACCELERATOR in paper_lantern theme.
• Click on MANAGE VARNISH
• From MANAGE VARNISH SETTINGS scroll down to CACHE SETTINGS FOR INDIVIDUAL DOMAINS.
• Enable it on your DOMAIN
• It might take 30 minutes to enable Varnish cache on your website.

What is Varnish Cache?:

• Varnish Cache speeds up website rendering time to three to five times.
• It caches static and dynamic contents of WordPress website.
• Dynamic contents of a website include images, CSS (Cascade style sheets), plain HTML.
• Varnish Cache is a web application accelerator.
• It works as caching HTTP reverse proxy.
• It is installed on your origin server. (e.g. cPanel)
• If your network speed of hosting server is fast then it works really fast.
• It can deliver the high level of content through regular off-the-shelf hardware.

How to enable HTTP/2 on your website?

• Set up Free CloudFlare CDN for your website
• Install a free TLS certificate (SSL) signed by CloudFlare on your origin server.
• Login to CloudFlare and then click on your website name in its dashboard.
• Go to NETWORK and then HTTP/2 and enable it. Most of the times it is enabled by default if not enable it there.

What is HTTP/2?

• It is the prominent revision of World Wide Web (WWW)
• It improves the way HTTP requests and responses are sent through low-latency transport of web contents.
• It increases page load times of website.
• It creates per-domain multiplexing of retrieving resources.
• HTTP header compression.
• It provides server push by removing latency times on web browser.
• It works nicely when Varnish cache is enabled on the origin server.

How to add the favicon to the website?

• Log in to WordPress Admin
• Put Username or Email Address and password.
• From sidebar of WordPress Admin choose APPEARANCE
• Then CUSTOMISE. I USE Twenty Twelve theme.
• Then go to SITE IDENTITY
• Then go to SITE ICON. It is favicon.
• Here upload your favicon and save website.

After enabling CloudFlare, SSL and HTTP/2 on my site, I saw the mobile speed of the website is 77 and desktop is 81. After implementation of Varnish cache, now the mobile score of website 79 and desktop score of the website is 91. This is from Google PageSpeed insight.I introduced CloudFlare CDN as one cache layer for the website and then Varnish Cache as another layer of caching of contents. This makes the website faster. In this way, original server or the host of the website is being kept secure and the handling of large data traffic rests with reverse proxy Varnish and content distribution network CloudFlare.