#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
#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
#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.
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.
#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
#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."
#WebPerfTip CrUX Dashboard Chrome shortcut
https://www.youtube.com/watch?v=t88_MvwLrns by Rick Viscomi
The Web Performance isn't only to add preload or laziness to the resources
WebPerf Tool: DebugBear
Detect the largest images on a website:
Open Chrome DevTools
Select Network Tab
Open filters and select "Img"
Write "larger-than:1M" in the filter input
Reload the page
Optimize the images listed