Caching HTML can help you reduce the overall page load speed, as the CDN can hold your HTML rather than have to request it from the server each time.
There are pros and cons to doing this, but if you’re a static site that doesn’t change too often, caching your HTML could be the perfect solution to improving page load speeds a bit.
Does Cloudflare cache HTML?
Yes, however not by default. You need to enable it with the below steps to create a page rule.
How to cache HTML with Cloudflare
Caching HTML in Cloudflare is easy, so just follow these steps.
1. Open cloudflare, and click ‘page rules’ in the sidebar
2. Click ‘create page rule’ to the right of this page
3. Insert your sites domain with a wild card on the end, just like the cloudflare example, and then select ‘Cache Level’ and ‘Cache Everything’ from the dropdowns.
And you’re done!
You should be able to run a test now, and compare to before HTML caching.
For me, here is my test.
Before HTML caching
After HTML caching
Yes, the site is already optimised, but a few key metrics were improved even further.
FCP dropped from 305ms to 112ms.
TTI dropped from 305ms to 112ms.
LCP dropped from 500ms to 444ms.
Not too bad at all!
Is it good or bad to cache HTML with Cloudflare?
It really depends. How static is your content?
If you have an extremely dynamic site, or even a news homepage style site, caching HTML might not be good for you.
Rather than a consumer constantly getting fresh content, they will get the HTML cache version until the cache is refreshed. This means they’ll only see the content available at the time of cache, and not anything that has been added or edited since.
Not just consumers, but Google too. We want Google to have the freshest content, so you might be holding yourself back by a day or two, along with annoying users, if you enable HTML caching.
However, if you’re site is extremely static, HTML caching can really help you knock off a few hundred milliseconds off some key core web vital numbers.
Use HTML caching wisely, and it can help you improve your page load speeds… provided you’re a good fit for it.
One tool I will use every single time that I audit a website is GTMetrix.
I’ve seen comments about it, and that other speed testers like webpagetest.org provide “better data” and “more insights”, but GTMetrix does everything I want and helps me solve my problems.
As with every tool, you take its automated insights with a grain of salt. You leverage them, to guide further insight gathering, or to back up a specific decision.
GTMetrix gives me the data to pass on to dev teams, and help get issues patched.
Running a Speed Test with GTMetrix
It’s pretty simple to run a speed test in GTMetric.
Enter the URL you’d like to test.
Change the location you’d like the speed test run from. Highly recommend you get this as close to your audience as possible.
(OPTIONAL) Change the browser you’d like to test from. This is where you can also select a mobile browser if you’d like to run a mobile speed test.
(OPTIONAL) Select the speed if you’d like to throttle the speed test. Throttling can help show more “true to life” bottle necks, like with a poor mobile connection, but will also help smaller issues show up easier as everything will get exacerbated.
(PRO REQUIRED) Ensure you have the video test flicked on, if you’re a pro user. You’ll get a bit more useful insight.
Click Analyze, and run your website speed test.
How to interpret GTMetrix’s waterfall chart
The waterfall chart breaks down the exact points at when different resources are called, connected to, and downloaded.
Each resource is ordered based on when its loading starts.
All you have to ever really worry about here is when a specific resource is connected to, and when it finishes being downloaded. There are very few use cases you’ll run into as an SEO where anything in between is required.
Look through what items are being loaded and when, and then run through the standard checks from here to optimise.
Large files being loaded? Are specific requests taking too long? Too many files? External requests you didn’t know about?
Plenty of things to analyse here, but they’re very specific to each audit.
Each significant request stage is broken down by a coloured line. The following is what stage each of the coloured lines in the waterfall chart represent;
CLS (Cumulative Layout Shift) is one of the fun ones inside Core Web Vitals (CWV), and can sometimes be a bit annoying to find exact causes.
Or even exact locations it happens on, as Google can be a little light on the examples sometimes.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift is a score assigned to a page based upon how much the page changes/moves around between the initial render and the final load.
It’s about assets loading in, and then whilst the page continues loading, others load in and push the original content around.
Long story short, it’s when a website will annoying shift just as you’re about to click a button, and then you end up clicking the wrong thing because everything moved.
Does CLS affect SEO?
Yes, CLS very much affects SEO.
It is one of the main elements that make up the Core Web Vitals, which Google is now taking into account as a ranking factor.
Yeah, its one of hundreds of different ranking factors, but when you’re talking about an apples-to-apples comparison with a competitor, I would very much rather know that I have ticked as many boxes as possible to help me rank a site.
Identifying that you have CLS issues
Your first point of call to check for CLS issues, or where you might have spotted them initially, would be in Google Search Console.
On the “Core Web Vitals” tab in GSC, you’ll see some pretty charts that show how you’re doing across your URLs, for both desktop and mobile.
If you then click through to one of the reports, you’ll get a list of the issues that make up the Yellow or Red lines.
If one of them looks like the one below, you’ve got CLS issues;
Clicking on this, Google might give you a couple of URLs examples. Chances are though, it’ll just be a single one, even for hundreds or thousands of URLs.
Google might be saying they’re “Similar” pages, but sometimes they will group completely separate page types in here so don’t fall for their trap.
Now that you’ve identified you’ve got an issue, you need to actually find the root causes of this.
Isolating specific CLS issues by testing CLS
There are a couple of ways of isolating the CLS issues so that you can make a specific request with developers for a patch.
If you just go to them saying “fix CLS” they’ll either go in circles or call you crazy because “everything works fine”.
Testing CLS with GTMetrix
The first method I use is with GTMetrix. A super quick test, and it’s normally something I am running anyway, so can give a good initial overview.
Run your test, and then you’ll get a web vitals to score like the below;
CLS will flag on the right. For this one, green is fine, but it’s enough to use as this example.
This score will probably be different to what Google is flagging, but it’s not about the actual score. It’s about what’s causing that score, so that you can isolate and patch.
If you go to the ‘structure’ tab, you can then expand the ‘avoid large layout shifts’ section, and GTMetrix will break down the main causes for your CLS score.
GTMetrics flags the main offender here, which contributes 99% of the CLS issue.
Funnily enough, this test was run on a webpage talking about CLS here as I was looking for an example site. Definitely a case of, “do what I say and not what I do”. The post is still worth a read though.
In saying that, we can break down this CLS further by just loading the page.
Click that page above, and see if anything loads and then shifts around.
If your internet is fast, you might not notice it.
I used the GTMetrix video reports, so that I can show devs step-by-step what is happening in the load, and help them troubleshoot.
They are loading in the entire content, which pauses for 0.2 of a second, and then loads the image. This image load pushes all the content down.
Google is seeing this massive shift, and would be assigning it a rather high CLS score because of it.