Speed & download size

• https://emmas.site/blog/2020/09/12/react-is-a-subsidy

  Projects which don’t fit the JavaScript-first economic model ◦ Especially anti-racist, anti-policing, and anti-colonialist projects

• https://adactio.com/journal/20154
• https://www.websitecarbon.com/
• https://three.compost.digital/every-drop/
• Climate-friendly software: don't fight the wrong battle
• Your comic has to load before people can appreciate it.
• https://meyerweb.com/eric/thoughts/2018/08/07/securing-sites-made-them-less-accessible/
• https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/

• I recently went on a long-overdue trip to Europe to see my family. I’ve been living in Australia for over eight years, and with each trip back I notice a range of differences between the two. One of the prominent ones is the choice of devices. In Melbourne, the latest iPhones (iOS has ~60% of the market share), AirPods, and MacBooks are commonplace. In Kraków, while you see those too, they’re far from mainstream (Android is ~83% of market share). — https://mailchi.mp/perf.email/130

• https://infrequently.org/2022/12/performance-baseline-2023/
• https://thenewstack.io/too-much-javascript-why-the-frontend-needs-to-build-better/
• http://web.archive.org/web/20230902105845/https://fershad.com/writing/power-consumption-jpeg-webp-and-avif/

Making webcomics faster

1. Make the comic load ASAP. Everything else is second to this.
   • Image optimization
   • Play nice with the preload scanner
   • General-purpose website optimizations that apply here: critical CSS, HTTP keepalive, HTTP/2…
   • If the comic uses webfonts…
   • link[rel=preload][as=font] and make sure they’re cacheable. (Luckily, you only really have to care about WOFF2 nowadays.)
   • Use @font-face descriptors and font-size-adjust to avoid reflow; especially now that Firefox and Safari support font-size-adjust
   • Avoid client-side rendering/SPAs or suffer the Honey Crab problem
2. Then load everything else
   • Beware third-party scripts, and be firm with them

You really don’t want the rest of your website to compete with the comics’ loading

You should try a system font stack for text outside your comics. https://wiki.mobileread.com/wiki/List_of_fonts_included_with_each_device https://iainbean.com/posts/2021/system-fonts-dont-have-to-be-ugly/

Image formats & optimization

• Understanding available image formats (PNG, JPEG, SVG)
• SVG scaffolding (from my "thesis")
• Don’t use GIF; huge filesize, limited colors (unless you want even bigger filesizes), and plays back on the main thread
  • SVG can animate if you're doing vectors, like the old days with Flash (fun fact: Adobe's Animate (formerly Flash Professional) can export to SVG+SMIL animation for vector animations). Hardware acceleration support is improving now that Chrome is finally onboard — you can animate either with SMIL or CSS @keyframes/transitions. Or even both simultaneously, if you like.
  • APNG, AVIF, and WebP can animate and are better choices than GIF, but…
  • Prefer <video loop autoplay playsinline muted> when possible. It’s the most efficient choice, and it benefits from “hardware acceleration” on the most devices.
    • It even has partial transparency now: https://rotato.app/blog/transparent-videos-for-the-web
• Next-gen image formats (forget WebP, if you're going to use new formats you might as well go for big wins)

The preload scanner

Speed up archive reading by loading the next page while you read the current one

The core idea isn’t complicated, but for historical reasons there are different ways to accomplish it.

<link rel="next prefetch"> for faster reading for those going through your archives (note WordPress does next by default). However, apparently Firefox doesn’t honor prefetch for HTTPS pages, which sucks. So instead…

<link rel="prerender"> and unfortunately also the speculationrules API

All together now, if the user is on /page/1:

<link rel="next prefetch prerender" href="/page/2"> <!-- test to see if these need to split these into multiple <link> elements, I remember Safari not recognizing <link rel="dns-prefetch preconnect"> -->
<script type="speculationrules">
  { "prerender": [
    { "source": "list", "urls": ["/page/2"] }
  ]}
</script>

I’m omitting something like <link rel="prefetch" href="/page/2/first-image.png"> because I have no idea how that would work with images that use srcset. (Well, wait, there’s imagesrcset…)

Note: <link rel="preload"> is unsuitable, as it’s designed for immediately loading something on the current page. Unfortunately, it’s very easy to mix up the words “prefetch” and ”preload”, so read carefully wnenever you find information about one or the other.

Service Worker precaching?