Double-Keyed Browser Cache: CDNs won’t speed things up anymore
Before 2020, using public CDNs was a popular method to speed up website speed. If your visitor already had a framework loaded, the browser could skip downloading it again increasing speed. Unfortunately, this became a method to track visitors across the internet so changes were made in the browser to stop it called Double-Keyed Browser Cache: https://addyosmani.com/blog/double-keyed-caching/
This means that the browser will download a copy of framework.js or similar for every URL visited even if it is already cached from another site. That stops CDNs from tracking users via IP, browser agent, and which frameworks are already downloaded increasing privacy. Unfortunately, it also removes most benefits of CDNs potentially slowing things down a lot. Without the speed benefits of external CDNs, we can increase security loading elements locally from our own server.
In many cases, this means simply changing the URL for certain elements in a theme or even in the control panel. You can change https://server.cdn.tld/element/framework.js to https://yourwebsite.com/folder/framework.js. This ensures that your local elements are always cached properly using your preferred expiration times and more. The Edge Cache at Cloudflare and others use this to speed up site access by keeping elements close to your visitors at the edge on their edge caching network.
Setting your own cache settings:
For WordPress users, this can enhance your website speed by ensuring that already cached elements are kept long enough in browser cache and on edge cache using Edge Caching at Cloudflare instead of slower classic public CDNs.
First, we’ll open .htaccess. Do this from the Webuzo File Manager or via FTP using your favorite client.
Below the existing content, you’ll put the following sections that instruct caching to keep, revalidate, and similar. If your website only uses png and webp, you can remove lines not relevant to your website.
## mod_headers Cache-Control HTTP Headers and unset ETag ##
<ifModule mod_headers.c>
Header unset ETag
<filesMatch “\.(ico|jpe?g|png|gif|webp)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(css)$”>
Header set Cache-Control “public”
</filesMatch>
<filesMatch “\.(js)$”>
Header set Cache-Control “private”
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
## Disable ETags for performance ##
FileETag None
## mod_expires Expires controls ##
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 minutes"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/webp "access plus 1 week"
ExpiresByType video/mp4 "access plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week"
ExpiresByType font/woff "access plus 1 week"
ExpiresByType font/ttf "access plus 1 week"
ExpiresByType application/x-font-woff "access plus 1 week"
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType application/javascript "access plus 1 day"
ExpiresByType application/x-javascript "access plus 1 day"
ExpiresByType text/html "access plus 10 minutes"
ExpiresByType application/xhtml+xml "access plus 10 minutes"
</ifModule>
To control which version of files is available, you can version files with names such as image_123456.png. Many systems handle this automatically.
When making changes like this, always do before and after speed tests such as http://webpagetest.org/ to see how much faster your site is now. You may find that additional file types are in use that can benefit from caching such as RSS feeds, music, and more.
Keep an eye our for our next post covering more security and hardening for WordPress and more!