Today I Learned: Web Performance Tips
A Faster Web
Joined May 2020
- Tweets52
- Following0
- Followers123
- Likes325
TIL Performance Tips ⚡️ retweeted
Part 2/3 of my series "HTTP/3 from A to Z" is now online. In it, I discuss #HTTP3 and #QUIC's performance features in technical detail and nuance.
Learn why the new protocols certainly improve things but often don't entirely solve problems @smashingmag: smashingmagazine.com/2021/08…
Google Fonts now offers 112 variable fonts. A great way to save additional requests and many KBs:
fonts.google.com/?vfonly=tru…
xitter.cf/TILperf/status/1284947…
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
A great breakdown by @TheGreenGreek on render blocking resources and the critical rendering path. sia.codes/posts/render-block…
Prevent hidden images from loading altogether by using both loading=lazy and hidden attributes. Otherwise hidden images will load in the background at low priority.
This works for all browsers that support native lazy loading: caniuse.com/loading-lazy-att…
TIL Performance Tips ⚡️ retweeted
I've been doing a bunch of web performance audits recently, here are the top 10 problems I've seen youtube.com/watch?v=Lh9q3h2k…
Google Fonts now offers 86 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
TIL Performance Tips ⚡️ retweeted
#webperf tip of the day. Make sure you have the correct `cache-control` headers on your `favicon.ico` so your CDN can cache it correctly.
This missing header caused 370,000 GOV.UK origin requests on Monday in the huge spike (now fixed).
#perfmatters
TIL Performance Tips ⚡️ retweeted
Add `img[loading=lazy] { outline: 10px solid red; }` to your CSS and traverse your site looking for false positives above the fold.
Conditionally load JavaScript depending on network connection, device RAM, device CPU, or even device battery level. Progressively enhance UX with JS.
Great tip from @umaar:
umaar.com/dev-tips/242-consi…
The Performance 500: Websites of The Fortune 500 Ranked by Page Speed reachlightspeed.com/blog/the…
Use Quicklink.js to prefetch all links in user's current viewport during idle time.
- Tiny < 1KB drop-in JS library
- Works with static links + React Router routes
- Option to throttle number of total/simultaneous requests
getquick.link/
Great tip from @csswizardry!
When you don't have access to the <head> to preload background hero images, add a hidden <img> within the hero module to request the asset earlier.
Which host is the fastest in terms of TTFB (time to first byte)?
Is My Host Fast Yet? by @rick_viscomi identifies TTFB latencies as experienced by real-world users:
ismyhostfastyet.com/
ALT Screenshot of IsMyHostFastYet.com
Instead of showing gray placeholder boxes for images while they load—try using BlurHash, a tiny blurred representation of the image. Unsplash.com uses this library.
BlurHash by @woltapp:
github.com/woltapp/blurhash
ALT Examples of BlurHash being used on food photography.
Customize Lighthouse audits with custom tests. E.g. Check for social meta tags, pages are listed in the sitemap, custom perf metrics, etc.
Building custom Lighthouse audits by @DebugBear: debugbear.com/blog/custom-li…
Looking to compare Lighthouse & Chrome UX Report scores visually in a snap? Checkout PageSpeed Compare by @sanderheilbron: pagespeed.compare/
Make a custom CrUX (Chrome UX Report) Dashboard shortcut in Chrome by @rick_viscomi: dev.to/rick_viscomi/making-a… #webperf
TIL Performance Tips ⚡️ retweeted
You want to run a test with WebPageTest but the waiting is long? Check webpagetest.org/getLocations… to choose a free or less used resource (browser/location). #webperf #tip
Avoid using public CDNs (jsDelivr, cdnjs, etc.) for production. Stick to using them only for prototyping.
Advantages to Self-Host:
- Save time by not opening new connections
- HTTP/2 Multiplexing & Resource Prioritization
- Avoid external security risks/slowdowns
- Cache Control
More detailed information on why you should self-host your static assets by @csswizardry:
csswizardry.com/2019/05/self…