Edgemesh
Products
Edgemesh Products
Learn about what Edgemesh has to offer.
Edgemesh Server

Next generation automated headless product for ecommerce platforms.

Edgemesh Client

AI powered acceleration and performance add-on for ecommerce platforms.

Edgemesh Product Documentation
Please refer to our documentation for more information.
How It Works
How it works
Find more information about Edgemesh Products
Edgemesh Server
Edgemesh Client
Studies
Pricing
Pricing
Select Edgemesh Product
Edgemesh Server
Edgemesh Client
Newsroom
Edgemesh Media
Edgemesh related media and resources
01
Blog
02
Media Mentions
Support
Edgemesh Support
If you are experiencing issues or have questions, use the resources below.
01
Getting Started
02
Documentation
03
Knowledge Base
04
Contact Support
05
Schedule One-on-one appointment
SIGNUPLOGIN
Posted on 

Cache Me Maybe ? Shopify TTFB Analysis

If your Shopify store has moments where it feels like the page has "stalled" - it might not be you, it might be a subtle misstep in some crucial infrastructure between your customer and your website - the Shopify Caches. If your site is returned, not by the high-speed global network of "server caches" but instead by the Shopify backend itself - you might have a problem.

For the past few months, we have been tracking a cache miss event happening at Shopify based stores and how they can impact performance. The short story is this - when you update your theme or otherwise cause the Shopify servers to invalidate your cache (so customers see the new content) you may pay a 2-20x increase in page load time.

Read on for more details.

"Server cache misses are the silent killers of page performance."
-Jake Loveless, Co-Founder @ Edgemesh

Let's Talk About Server Caches

Caching Servers have, basically, one job: return the copy of the code requested (as fast as possible) and if they do not have a copy of the latest version, go get it from the backend server and then return that. When the Caching Servers have the page locally, we call that a Cache hit - and the page returns really quickly. But when the server doesn't have the page, it needs to go get it. This is called a Cache miss - and it's (sometimes painfully) slow.

Cache HITS (fast responses) vs. Cache Misses (slow responses requiring the backend)
Cache HITS (fast responses) vs. Cache Misses (slow responses requiring the backend)

We can actually see if we got a cache hit or miss by looking at the x-cache header. This is a response from the server telling you if the page was returned by the fast cache server (hit, server) or returned by the slower backend server (miss). As an example, let's have a look at a fast Shopify based store and one of my favorite brands: https://www.allbirds.com.

Allbirds Example: Some Birds Don't Fly

Allbirds is a New Zealand-American footwear company which uses a direct-to-consumer approach and is aimed at designing environmentally friendly footwear. They're inexpensive, absurdly comfortable and sold direct to consumers on Shopify. I love my Allbirds so much - I will literally wear them until they fall apart (and even then for a few more days).

Let's head over to the Allbirds website and see if we get a cache miss. There are legitimate reasons to get a cache miss, namely if the site has been updated recently and I was the first person to request the page since it was. That's not very likely since this is an extremely high traffic site! I go to https://www.allbirds.com and we see ...

Looking at the x-cache Header
Searching for cache misses with the x-cache header (Google Chrome Network view)

A cache miss? What's the effect on the page load. The key metric here is the Time to First Byte or TTFB. We can see the TTFB by looking at the timing details tab. Here we see a 500ms TTFB (1/2 a second!). Ouch!

Looking at Time to First Byte in the TIMING view
Looking at the Time to First Byte (TTFB) in the Network Timing View

How Bad is it really?

I took a tour around the page, and sure enough I was able to induce a stall more than once. On a heavily visited site like this, we'd expect the caches to be "hot" , meaning they are VERY likely to have all the page assets in memory and at the ready. I wrote a little script to test the TTFB using curl (works on OSX or Linux).

Download Code

This code will curl the Allbirds homepage, and extract the etag (essentially the checksum of the page), the x-cache header and the Total time it took to get the page (and just the HTML). Collating the results we can see that of the 631 page requests, 37.8% resulted in a cache miss. The difference here is about a 2x performance regression at both the average, 90th percentile and 95th percentile.

You can test your Shopify Site at: https://ttfb.edgemesh.com

Looking around a few other sites with less traffic than Allbirds, we quickly realized this penalty can be much more severe when your cache isn't hot.

Cache misses can be 2-20x slower responses. This same page was ~5 seconds until the first byte of data came back (ouch!)

How do we fix this?

Unfortunately, we havent found a straight forward solution to this problem. We do know a few things you can do that seem to help:

  1. Batch updates to you Shopify store: Each time you update your site, you instruct Shopify to 'drop the cache'. This is both expected AND desired. However you will experience higher cache miss rates after updates so try to make once push to production with multiple changes.
  2. Update your site during off traffic hours: When you do update the site, try to do so during low traffic periods and on low traffic days.
  3. Make the backend render faster (to deal with cache misses): This one is a bit harder, but you can use the new Shopify Chrome extension (see here) to analyze the render speed of your store.

At the moment, Edgemesh engineering is looking at solutions to enable client side caching of HTML. Once this feature is available, you will be able to hide these server side delays. Client side caches like Edgemesh don't succumb to these issues, as they return the HTML from the in-browser cache (look Ma no Servers!).

The reality is that caching is hard , both client side (like Edgemesh) or server side like caches. There is a old joke in computer science:

There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors. -- Phil Karlton

‍

Tagged:
Development
Jacob Loveless
Co-Founder
view All Posts
Featured Posts
Website Acceleration
Why Google Isn’t Indexing Your Pages — And How To Solve It
Headless Ecommerce
Merchant Guide for Shopify Online Store 2.0
Ad Fraud
How We’re Fighting Ad Fraud with Edgemesh Server
Ad Fraud
Data Center Traffic—The Traffic That Doesn’t Belong To You
Ad Fraud
What Are Botnets? - The Internet Pandemic You Didn't Know
Ad Fraud
The Complete Guide to Ad Fraud
Website Acceleration
7 Google Ranking Factors You Really Need and How They Affect SEO In 2022
Website Acceleration
The Complete Guide to Dynamic Rendering & How It Impacts SEO
Website Acceleration
How Google’s “Fast Page” Label Will Impact Site’s User Experience
Website Acceleration
Lazy Loading Your Website Images — Should You Do It?
Website Acceleration
Complete Guide On How To Speed Up Your WordPress Website
Website Acceleration
5 Ways To Speed Up Your Shopify Website In 2022 (Bonus Tip Using Edgemesh Server)
Engineering
What is Time to Interactive — Complete Guide to Web Performance Series
Headless Ecommerce
The Complete Guide to Headless E-Commerce In 2022
Headless Ecommerce
Is Headless E-Commerce The Best Fit For Your Business in 2022? 
Headless Ecommerce
How Next-Generation Headless Helps E-Commerce Businesses in 2022
Website Acceleration
What is Time To First Byte (TTFB)?
Website Acceleration
What is First Contentful Paint?
Website Acceleration
What Is Total Blocking Time?
Client Side Caching
5 Reasons Client-Side Caching Is Best For Your E-commerce Website
Client Side Caching
Difference Between Server-Side Caching And Client-Side Caching, And Which Is Good For Your Website
Website Acceleration
What is Start Render Time, and How Can You Improve It?
Conversion Rate Optimization
CRO Series: How to Improve Your Conversion Rate
Website Acceleration
What Is Cumulative Layout Shift (CLS)?
Website Acceleration
The Complete Guide to Google’s Core Web Vitals : What is Largest Contentful Paint (LCP)?
Conversion Rate Optimization
CRO Series: What Are the Steps of Conversion Rate Optimization?
Business
CRO Series: What is CRO Marketing?
Business
CRO Series: What is Conversion Rate Optimization?
Business
AI and E-Commerce
Business
Milliseconds Make Millions
Engineering
Performance Talks: Episode 3: Bryan Cantrill
Business
Performance Talks: Episode 2: Bryan Cantrill
Engineering
Performance Talks: Episode 1: Bryan Cantrill
Engineering
Cache Me Maybe ? Shopify TTFB Analysis
Engineering
New Analytics : Fast/Average/Slow User Experience Scores
Tags
Business
Conversion Rate
Core Web Vitals
Development
Features
Performance
SEO
Shopify
ad fraud
client side caching
headless ecommerce
website acceleration
wordpress
Stay Connected

Try Edgemesh Today!

START 14-dAY FREE TRIAL
More Posts

You Might Also Like

Website Acceleration
Why Google Isn’t Indexing Your Pages — And How To Solve It
May 2, 2022
 by 
Ayomide Joseph
Headless Ecommerce
Merchant Guide for Shopify Online Store 2.0
Apr 22, 2022
 by 
Ayomide Joseph
Ad Fraud
Ad Stacking—Ads Hidden In Plain Sight
Apr 8, 2022
 by 
Ayomide Joseph
Ad Fraud
Data Center Traffic—The Traffic That Doesn’t Belong To You
Mar 31, 2022
 by 
Ayomide Joseph
Ad Fraud
Affiliate Fraud — The Shady Advertising Secret
Mar 22, 2022
 by 
Ayomide Joseph
Ad Fraud
Domain Spoofing — The Hidden Change Happening Right Before Your Eyes 
Mar 7, 2022
 by 
Ayomide Joseph
Edgemesh

Accelerate your website and accelerate your business with Edgemesh.

Navigation
HomeHow It WorksEnterprisePricingBlog
Help Center
Knowledge BaseGetting StartedDocumentationContact Support
Legal
Terms of ServicePrivacy Policy
Other Links
CRuX.run