Heavy traffic to a website can result in performance problems, slower page speed, and fewer conversions.

In this article, I’ll share a simple process to speed up page loads. The idea is to cache not just images and scripts, but also the HTML content. After all, if the HTML takes too long to load, it will delay every other request.

Note the screenshot below from Macy’s. It shows the effect of Macys.com not caching the HTML of the home page in its content delivery network. This adds one second of page load time. Every other page resource will load after the HTML content is downloaded and parsed. The page took 16.84 seconds to load, which is slow.

Macys is not caching their homepage, leading to an extra second of load time.
Macys.com is not caching its home page, leading to an extra second of load time.

Click image to enlarge.

Now, consider Gap.com, which I addressed in March as an example of a slow site. Since then, The Gap launched a new website that caches HTML content in its CDN. The HTML request now adds just 78.91 milliseconds — the home page loads in 3.60 seconds, which is much better than the 15 to 20 seconds it took in March.

The Gap is caching HTML content, leading to faster page loads.
The Gap is caching HTML content, leading to faster page loads.

Click image to enlarge.

Caching HTML content on ecommerce websites — and dynamic websites in general — is tricky. It doesn’t happen by default in a CDN. Most would normally cache just static page resources such as images, style sheets, and scripts.

Dynamic vs. Static Content

For sites with static page content — i.e., not personalized in any way — page caching creates no problems. But for sites with dynamic content that changes among users, caching HTML content could create errors.

For example, a visitor that adds products to his shopping cart changes the content on all pages to show the number of items in the cart. If an ecommerce merchant cached the pages of this user, other users would see an inaccurate number of items in their cart. This concept applies to any type of personalization.

There are at least two solutions to the problem.

  • Implement web page personalization in separate JavaScript files and don’t cache them, or cache them for a short period.
  • Cache HTML only for anonymous users — users that are not logged in or haven’t added…