From 069dca0a060c5448ce7a9779cde3438ef549efbb Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Wed, 6 Apr 2022 23:42:10 -0700 Subject: [PATCH] New subsection on cache, semantic code snippets Add "Don't count on the cache" under the "Optimal loading" section. Some semantics for code snippets, including switching some from to . --- assets/css/main.css | 3 +- content/posts/website-best-practices.gmi | 21 +++++++ content/posts/website-best-practices.md | 76 +++++++++++++----------- 3 files changed, 65 insertions(+), 35 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 2541c89..9efb22e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -93,7 +93,8 @@ nav li, * font size preferences. */ code, pre, -kbd { +kbd, +samp { /* stylelint-disable -- compatibility hack */ font-family: monospace, monospace; diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 984ee64..9722b1b 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -133,6 +133,27 @@ My website includes a "link" header to load an SVG that serves as my IndieWeb ph ``` link: ; rel=preload; as=image ``` +### Don't count on the cache + +The browser cache is a valuable tool to save bandwidth and improve page speed, but it's not as reliable as many people seem to believe. Don't focus too much on "repeat view" performance. + +Out of privacy concerns, most browsers no longer re-use cached content across sites; refer back to the "third-party content" section for more details. Privacy-conscious users (including all users using "private" or "incognito" sessions) will likely have their caches wiped between sessions. Don't focus too much on "repeat view" performance until after your "initial view" performance is good enough. + +Furthermore: a high number of cached resources can decrease performance of the cache, causing browsers to bypass the cache: + +=> https://simonhearne.com/2020/network-faster-than-cache When Network is Faster than Cache + +The effect is especially pronounced on low-end phones and mechanical hard drives. + +One way to help browsers decide which disk-cached resources to prioritize is to use immutable assets. Include the `immutable` directive in your cache-control headers, and cache-bust modified assets by changing their URLs. + +The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames: + +``` +cache-control: max-age=31557600, immutable +``` + +You can also keep your asset counts low by combining textual assets (e.g. CSS) and inlining small resources. ### Inline content diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index 66f0d11..a5d88d1 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -68,12 +68,11 @@ JavaScript and WebAssembly are responsible for the bulk of modern web exploits.
-Code snippet: this is the CSP for my main website. +Code snippet: this is the CSP for my main website.
-``` -default-src 'none'; +
default-src 'none';
 img-src 'self' data:;
 style-src 'sha256-3U3TNinhti/dtVz2/wuS3peJDYYN8Yym+JcakOiXVes=';
 style-src-attr 'none';
@@ -82,8 +81,7 @@ base-uri 'none';
 form-action 'none';
 manifest-src https://seirdy.one/manifest.min.ca9097c5e38b68514ddcee23bc6d4d62.webmanifest;
 upgrade-insecure-requests;
-sandbox allow-same-origin
-```
+sandbox allow-same-origin
@@ -148,16 +146,33 @@ HTML is a blocking resource: images and stylesheets will not load until the user
-Code snippet: my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon: +Code snippet: my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon:
-``` -link: ; rel=preload; as=image -``` +
link: </favicon.072dbf7bc4323646b9ee96243fbd71b2.svg>; rel=preload; as=image
+### Don't count on the cache + +The browser cache is a valuable tool to save bandwidth and improve page speed, but it's not as reliable as many people seem to believe. Don't focus too much on "repeat view" performance. + +Out of privacy concerns, most browsers no longer re-use cached content across sites; refer back to the section on [third-party content](#third-party-content) for more details. Privacy-conscious users (including all users using "private" or "incognito" sessions) will likely have their caches wiped between sessions. + +Requesting a high number of cached resources can decrease performance of the cache, causing browsers to [bypass the cache](https://simonhearne.com/2020/network-faster-than-cache/). The effect is especially pronounced on low-end phones and mechanical hard drives. + +One way to help browsers decide which disk-cached resources to prioritize is to use immutable assets. Include the `immutable` directive in your cache-control headers, and cache-bust modified assets by changing their URLs. + +
+
+Code snippet: The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames. +
+
cache-control: max-age=31557600, immutable
+
+ +You can also keep your asset counts low by combining textual assets (e.g. CSS) and inlining small resources. + ### Inline content In addition to HTML, CSS is also a blocking resource. You could pre-load your CSS using a `link` header. Alternatively: if your gzipped CSS is under **one kilobyte,** consider inlining it in the `` using a `