#webperftip — Public Fediverse posts

#WebPerfTip RUM's web performance tools help us identify performance issues; please use IDs on the most important elements (elements that can potentially affect the UX) to assist us in debugging web performance

#WebPerf #Performance #WebPerfTools

#WebPerfTip If you need "rel=dns-prefetch" to enable support for older browsers to resolve domain names early, use separate link tags to safely implement the fallback technique.

⚠️ Implementing "dns-prefetch" fallback in the same <link> tag causes a bug in Safari where "preconnect" gets cancelled.

#WebPerf #Performance

📣 #WebPerfTip

Please be sure to avoid fade-in effects when loading the page. It seems a good UX resource to maintain good visual stability, but the Core Web Vitals LCP metric reports a terrible experience.

#WebPerf #Performance #CoreWebVitals #CWV #LCP

📣 #WebPerfTip
Avoid unnecessarily large images

Serving images that are too large leads to slower requests and wasted bandwidth

"If an image is served as 1000x1000px but is rendered in a 500x500px box, it's 4 times larger than necessary" - @debugbear

#WebPerf #ImagePerf

📣 #WebPerfTip
Avoid error requests; the browser consumes resources and time trying to download them.

"Initial connection: The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL."

#WebPerf #Performance

#WebPerfTip CrUX Dashboard Chrome shortcut

https://www.youtube.com/watch?v=t88_MvwLrns by Rick Viscomi

#WebPerf #PerfTools #coreWebVitals

📣 #WebPerfTip

The Web Performance isn't only to add preload or laziness to the resources

WebPerf Tool: DebugBear

⚡️ #WebPerfTip

Detect the largest images on a website:

1️⃣ Open Chrome DevTools
2️⃣ Select Network Tab
3️⃣ Open filters and select "Img"
4️⃣ Write "larger-than:1M" in the filter input
5️⃣ Reload the page
6️⃣ Optimize the images listed

#WebPerf #ImagePerf #Image

📝 Web Performance Tip

"You don't need JavaScript to load a favicon"

#WebPerf #Performance #WebPerfTip