TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile
TIL Performance Tips ⚡️

@tilperf

Today I Learned: Web Performance Tips

ID: 1262374114699948032

calendar_today18-05-2020 13:28:13

53 Tweet

129 Followers

0 Following

Aymen Loukil (@loukilaymen) 's Twitter Profile Photo

You want to run a test with WebPageTest but the waiting is long? Check webpagetest.org/getLocations.p… to choose a free or less used resource (browser/location). #webperf #tip

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

Looking to compare Lighthouse & Chrome UX Report scores visually in a snap? Checkout PageSpeed Compare by @sanderheilbron: pagespeed.compare

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

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…

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

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 Wolt: github.com/woltapp/blurha…

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 <a href="/woltapp/">Wolt</a>:
github.com/woltapp/blurha…
TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

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

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
TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

Great tip from Harry Roberts! 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.

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

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

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

Conditionally load JavaScript depending on network connection, device RAM, device CPU, or even device battery level. Progressively enhance UX with JS. Great tip from Umar Hansa: umaar.com/dev-tips/242-c…

Harry Roberts (@csswizardry) 's Twitter Profile Photo

Add `img[loading=lazy] { outline: 10px solid red; }` to your CSS and traverse your site looking for false positives above the fold.

Add `img[loading=lazy] { outline: 10px solid red; }` to your CSS and traverse your site looking for false positives above the fold.
Matt Hobbs (@TheRealNooshu@hachyderm.io) (@therealnooshu) 's Twitter Profile Photo

#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

Jake Archibald (@jaffathecake) 's Twitter Profile Photo

I've been doing a bunch of web performance audits recently, here are the top 10 problems I've seen youtube.com/watch?v=Lh9q3h…

TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

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-a…

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-a…
Robin Marx (@programmingart) 's Twitter Profile Photo

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 Smashing Magazine 🇺🇦 🏳️‍🌈: smashingmagazine.com/2021/08/http3-…

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 <a href="/smashingmag/">Smashing Magazine 🇺🇦 🏳️‍🌈</a>: smashingmagazine.com/2021/08/http3-…
TIL Performance Tips ⚡️ (@tilperf) 's Twitter Profile Photo

Google Fonts now offers 112 variable fonts. A great way to save additional requests and many KBs: fonts.google.com/?vfonly=true x.com/TILperf/status…