Mastodawn

#Development #Techniques
Improving LCP for hero videos · Let users see something while the video loads https://ilo.im/169n0w

_____
#Hero #Video #WebVitals #LCP #WebPerf #WebDev #Frontend #HTML #CSS #JavaScript

Improving LCP for Video Hero Components

A hero video component is a popular request/demand. Unfortunately for our users, videos take longer than images to download, and cannot be preloaded like images can. But when the boss says "video", what are you to do? This handy component tries to find the best of both worlds, responsively providing something for the user to look at while the video downloads, and improving the CWVs along the way!

Aaron T. Grogg

Nicolas Hoizey 1d ago

I thought images with a 0.01 bit per pixel ratio should not be considered for #LCP in Chromium, but I have a live example (I can't disclose) where it does. 🤔

I thought the threshold was 0.05, based on https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2023_04_lcp.md

Where can I find current definition of LCP as it is implemented in browsers?

#webperf

Chrome Speed - Largest Contentful Paint change in Chrome 112 to ignore low-entropy images

PerformanceObserver 1d ago

Videos from our meetup yesterday are now live! www.youtube.com/playlist?lis... #webperf

Episode 9 | PerformanceObserve...

Episode 9 | PerformanceObserver

YouTube

Inautilo 6d ago

#Development #Tools
Speculation Rules Generator · An easy way to speed up pages with speculation rules https://ilo.im/16a2pv

_____
#Prefetching #Prerendering #SpeculationRules #API #JSON #CMS #WebPerf #WebDev #Frontend #JavaScript

Speculation rules generator

Build a speculation rules JSON script with the rules generator

Inautilo Jan 23

#Development #Introductions
Speculation rules prerender until script · A new origin trial available in Chrome 144 https://ilo.im/16a2fa

_____
#Prefetching #Prerendering #SpeculationRules #Chrome #Browser #API #WebPerf #WebDev #Frontend #JavaScript

Speculation rules prerender until script origin trial | Blog | Chrome for Developers

Learn about the new prerender until script option for the Speculation Rules API, now available in origin trial.

Chrome for Developers

Leon Brocard Jan 21

How do you measure the real end-to-end latency of your website in a light-weight way? I investigate the Server-Timing HTTP header and query the HTTP Archive to see how sites across the web use it: https://www.fastly.com/blog/lightweight-latency-measurement-with-server-timing
#http #webPerf

Lightweight Latency Measurement with Server-Timing | Fastly

Measure end-to-end request latency with Server-Timing. See how origin, Fastly Compute, and CDN delivery timings appear in browser dev tools.

Inautilo Jan 16

#Development #Trends
Web Almanac 2025 · Explore the latest web trends and insights https://ilo.im/169wc7

_____
#Web #Privacy #Accessibility #Sustainability #Security #WebPerf #WebDesign #WebDev #Frontend #Backend

The 2025 Web Almanac

The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.

Anthony Jan 16

Would you look at that! @webkit enabled speculation rules for every release channel.

https://github.com/WebKit/WebKit/commit/d287e1242bf08b3f98aa24d616a30a27c3e141b6

Speculation rules describe which likely-to-be-visited pages should be prefetched or prerendered by the browser.

Used adequately, navigations can seem instantaneous #WebPerf. See
https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API.

Based on previous behaviour, I expect it to be in Safari Technology Preview 236 or 237 in a couple of weeks. Then in the 26.4 betas in February. And finally in 26.4 sometime in March.

Enable speculation rules prefetching · WebKit/WebKit@d287e12

https://bugs.webkit.org/show_bug.cgi?id=305518 rdar://167792605 Reviewed by Tim Nguyen. This enables the same-origin pieces of https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_A...

GitHub