2025/Berlin/performance
Extreme Asset Optimization / How Low Can You Go? was a session during IndieWebCamp Berlin 2025.
- Archived from: https://etherpad.indieweb.org/performance
Watch: βΆοΈ 46:08s
Participants
jo- stgb.ro
Marty McGuire
Joschi Kuphal- Manuel
Notes
https://duckduckgo.com/video_frame?url=https://www.youtube-nocookie.com/embed/ylN-u5At328
Looking at Florian's site, with many examples of optimizations: https://studioagenturbuero.com/imprint/
- has a badge that says the page uses 0g of CO2-per-view. Cleaner than 100% of pages tested. This is a rounding error, but is still a great result. (tested with https://websitecarbon.com/)
Questions, discussion, expectations
- SPA client-side vs server-side rendered HTML
- image formats (coding/decoding; platform availability; tools)
- low-footprint techniques (energy consumption)
- business models?
- accessibility (which is also about optimizing and making things usable)
- loading performance
- storage
- data optimization? efficient formats?
- images
- fonts
- script loading (bundling and minimization, but also more)
- handshake / connection issues
Not much time in the session, so let's focus on loading optimizations (script loading, loading performance, image formats)
Loading optimizations
"14kb rule" - the maximum amount of data passed along with an HTTPS(/HTTP2) handshake.
- HTTPS and HTTP/2 are securely encrypted, but that includes overhead, so you get about 14kb leftover in the first "packet" to send HTML, before the rest has to be sent in further packets.
- this data can be gzipped, which often has more of an impact than minimization and bundling
- Things you can cram into the first 14kb:
- HTML
- inline CSS
- inline SVG
- inline fonts and other assets (with data: URLs)
Further data comes in subsequent requests as the browser encounters them (roughly, simplified). Can affect the ordering of requests in many ways, for example images with `loading="lazy"` attributes.
Performance "tricks". For example Florian's site uses an SPA-like method for page transitions using JavaScript to fetch HTML and replace the content.
Font subsetting - custom font file containing only the glyphs you use on your site (or subset of pages)!
HTTP vs HTTPS performance - network and router-level caching can still exist and help for non-encrypted traffic. Though of course this has drawbacks!
Service Workers are a per-site cache. You have to manage it yourself.
Many approaches have trade-offs
- making many formats of images available may have more of a footprint than just a single well-compressed JPEG
- concatenating and minifying scripts might slow down lower-powered mobile devices due to parsing, vs loading fewer small scripts
Avoiding redrawing where possible
- For example, images can have width and height attributes to let the browser know how much space to allocate in the layout. if this is missing (or incorrect), the browser will have to redo the layout.
- Quiz question: what costs the most CPU time when reflowing / redrawing? Flowing text! Text layout.
https://css-triggers.com/ - gives information into what style changes cause what types of recomputation in the page.
Misc tips
- keep the number of elements on a page low
- SVG: use pixel values for width and height attributes. (prevents giant initial SVGs and reflows after styles apply)
- side-discussion on width and height and viewbox. watch for exports from tools that export attributes like width="100%" which isn't valid HTML but also doesn't correctly describe the image.
