Olivia
Online
TIL Performance Tips ⚡️
@TILperf
Today I Learned: Web Performance Tips
A Faster Web
Joined May 2020
0 Following
125 Followers
52 Posts
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: https://t.co/z1u6dy7qF5
Google Fonts now offers 112 variable fonts. A great way to save additional requests and many KBs:
https://t.co/nMUURuDBEY
https://t.co/g7uSRw6JgS
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: https://t.co/NgWtLJrRwZ
A great breakdown by @TheGreenGreek on render blocking resources and the critical rendering path. https://t.co/HvrAcoo2Lg
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: https://t.co/M1iAHLxRuX
Who to follow
Barry Pollard
@tunetheweb
Chrome Dev Rel helping make the web go faster!. All opinions my own. I’m primarily on 🦋 these days.
Matt Biilmann 
@biilmann
CEO and Co-founder of Netlify. Builder of things, coiner of terms.
Tamas Piros
@tpiros
Creator of https://t.co/veczReGIrM | DevRel Leader | AI & Web Tech Educator
Turning complex tech into developer superpowers
I've been doing a bunch of web performance audits recently, here are the top 10 problems I've seen https://t.co/QXJwoev5e7
Google Fonts now offers 86 variable fonts. A great way to save additional requests and many KBs:
https://t.co/nMUURuDBEY
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: https://t.co/NgWtLJrRwZ
#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 https://t.co/CcU3PLPTpj origin requests on Monday in the huge spike (now fixed).
#perfmatters
Add `img[loading=lazy] { outline: 10px solid red; }` to your CSS and traverse your site looking for false positives above the fold.
![csswizardry's tweet photo. Add `img[loading=lazy] { outline: 10px solid red; }` to your CSS and traverse your site looking for false positives above the fold. https://t.co/YCBjesodnM](https://pbs.twimg.com/media/Eq-mKDiUYAYLQJP.jpg)
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:
https://t.co/kjloFQUwQN
The Performance 500: Websites of The Fortune 500 Ranked by Page Speed https://t.co/jIXVA3nNmX
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
https://t.co/4abOHDAjgY
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.
🖼 If you’re building hero-style content with background images—maybe even through a CMS—you can hugely improve rendering times (LCP) with one additional line of HTML.
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:
https://t.co/HUAQGYw2h8
Instead of showing gray placeholder boxes for images while they load—try using BlurHash, a tiny blurred representation of the image. https://t.co/E7Xf2MaMra uses this library.
BlurHash by @woltapp:
https://t.co/aH4Eirz05p
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: https://t.co/k0VmUR2utx
Looking to compare Lighthouse & Chrome UX Report scores visually in a snap? Checkout PageSpeed Compare by @sanderheilbron: https://t.co/JtaRIqQ5bF
Make a custom CrUX (Chrome UX Report) Dashboard shortcut in Chrome by @rick_viscomi: https://t.co/wxF2JyuCJE #webperf
@jcsrb There is no evidence that cross-domain caching is in any way effective:
https://t.co/LSmQ5ZVbYg
Most Popular Users
Elon Musk
@elonmusk
240.2M followers
Barack Obama
@barackobama
119.3M followers
Donald J. Trump
@realdonaldtrump
111.6M followers
Cristiano Ronaldo
@cristiano
109M followers
Narendra Modi
@narendramodi
107M followers
Rihanna
@rihanna
97.3M followers
NASA
@nasa
92.1M followers
Justin Bieber
@justinbieber
90.6M followers
KATY PERRY
@katyperry
86.8M followers
Taylor Swift
@taylorswift13
80.6M followers
Lady Gaga
@ladygaga
72.2M followers
Kim Kardashian
@kimkardashian
69.4M followers
YouTube
@youtube
68.6M followers
Virat Kohli
@imvkohli
68.6M followers
Bill Gates
@billgates
63.4M followers
The Ellen Show
@theellenshow
62.5M followers
CNN
@cnn
61.9M followers
Neymar Jr
@neymarjr
61.1M followers
X
@x
60.9M followers
Selena Gomez
@selenagomez
59.9M followers