Design Engineer. Webperf Optimizer. Tinkerer.
Cleveland
- Tweets 2,131
- Following 834
- Followers 8,426
- Likes 4,075
Pinned Tweet
Happy to get this side project out… a mix of old/new tech, design, research, and limitations.
Modern Font Stacks - System font stacks organized by typeface classification for every modern OS. The fastest fonts are the ones right there on your machine.
modernfontstacks.com/
5
14
92
17,355
Dan Klammer retweeted
Custom fonts are killing performance, but what can we do about it?
There is a way - it's called Modern Font Stacks. No Downloads, no layout shifts, no flashes - just instant renders.
Now, in Webstudio - learn all about it
wstd.us/modern-font-stacks
4
6
33
2,536
Dan Klammer retweeted
Today, I'm excited to announce Static ⚡️🎉
A simple static site generator with first party support for @tailwindcss.
In cases where site generators are overkill and manually creating an HTML site feels overly basic, Static is exactly what you need 😘
static.devdojo.com
30
15
177
29,178
Dan Klammer retweeted
Browsers can switch pages instantly when you press Back.
They save a memory snapshot of the JS environment and the DOM to disk and simply launch the environment back.
web.dev/bfcache/
Check that your code is ready for this. For example, re-loads data from localStorage.
2
32
185
20,817
Dan Klammer retweeted
I have published a website with Web Performance Snippets to make it more user-friendly, more orderly, and with a search feature
⚡️💾 webperf-snippets.nucliweb.ne…
#WebPerf #Performance #PerfTools
3
48
206
34,505
Dan Klammer retweeted
instant.page 5.2 is out 💫
– 5.2 notably “fixes” (disables) preloading not being used on Shopify sites in Chromium < 110.
– It improves preloading speed by using fetchpriority.
– The source code is now fully annotated.
Full changelog: instant.page/changelog
1
3
5
713
Dan Klammer retweeted
Browse faster on your iPhone with this one simple trick: Settings > Safari > Advanced > Experimental Features > HTTP/3
en.wikipedia.org/wiki/HTTP/3
6
11
133
54,258
A modern (2023), scalable version of the Simple CSS Toggle Switch:
codepen.io/danklammer/pen/Ex…
Thanks Roland! This can definitely be cleaned up with modern CSS and less magic numbers. I’ll take a stab later.
1
581
Dan Klammer retweeted
webperf.social/ should be the server with focus on web performance hopefully. #webperf
2
6
7
Dan Klammer retweeted
TL;DR:
Overall, for the same visual quality, JPEG XL is ~17% smaller than AVIF, which is ~17% smaller than WebP, which is ~17% smaller than JPEG.
(moz)JPEG vs WebP vs (Kakadu) JPEG 2000 vs (libaom) AVIF vs (libjxl) JPEG XL. Very large subjective experiment performed by @cloudinary. Interesting to see how things differ between different kinds of images!
4
20
46
So many perf gems in this article series by @tigt_:
"Making the world’s fastest website, and other mistakes" dev.to/tigt/making-the-world…
1
2
Dan Klammer retweeted
Optimising for Core Web Vitals on a SPA? There are some interesting nuances to how you should measure & optimise. I've written up some thoughts on LCP, CLS and FID which are relevant specifically to #WebPerf on SPAs.
simonhearne.com/2022/core-we…
3
23
54
Dan Klammer retweeted
📖 My first article in over a year! A slightly more detailed look at optimising LCP and its many candidates: csswizardry.com/2022/03/opti…
6
54
169
Dan Klammer retweeted
Performance tip: make your page load feel more instant by using priority hints to help the browser prioritize the most critical resources
More you can do with priority hints in 🧵:
23
367
2,273
Dan Klammer retweeted
Meet Common
Easily click to copy unicodes that are commonly used when designing interfaces.
→ common.wtf
27
63
715
Anyone know if there is a way to turn off the new CSS unit selection in Chrome Dev Tools? Also seems to break unit type to the next line when you copy properties/values.
1
2
Dan Klammer retweeted
This is pretty bonkers: “Partytown is able to sandbox and isolate third-party scripts within a web worker and allow, or deny, access to main thread APIs. This includes Cookies, localStorage, userAgent, etc.”
Partytown: Run Third-Party Scripts off the Main Thread in a Web Worker
🔗 bram.us/2021/09/28/partytown…
🏷 #javascript #performance #WebWorkers
1
3
Dan Klammer retweeted
Google Fonts now offers 112 variable fonts. A great way to save additional requests and many KBs:
fonts.google.com/?vfonly=tru…
If you are going to use custom fonts with multiple weights and styles, try using a Variable Font. It will save extra HTTP requests and usually is half the file size.
Currently, Google Fonts offers ~50 Variable fonts to use today: fonts.google.com/?vfonly
ALT Font Style/Weight Files vs Variable Font File
3