#WebPerf
Busy couple of weeks coming up.
Looking forward to speaking at JSNation in Amsterdam later this week (and attending React Summit the day after).
Then in Athens for my first WordCamp EU the week after.
Come find me at any of those if you have any #webperf or CWV questions!
How does Firefox's JavaScript compiler cache work?
A deep dive by Nicolas B. Pierron @SpiderMonkey.
https://blog.mozilla.org/javascript/2017/12/12/javascript-startup-bytecode-cache/
😍 WebPerformance Report Week #21. Delivered ✅
If you wants to receive the @webperfreport the next week, all you have to do is subscribe from our website:
👉 https://webperformancereport.com
🍻 https://www.buymeacoffee.com/webperfreport
#webperf #corewebvitals #webperformance #buildinpublic
Do you know the Chrome DevTools Coverage tab?
We can detect unused code, like in this case, a JS resource that has 99.6% unused.
🔥 We are ready for tomorrow's delivery. 🚀
You're still in time to receive our #WebPerformance Report for this week.
All you have to do is subscribe from our website:👉 https://webperformancereport.com
#webperf
Slides for my @smashingconf talk about how to create performance budgets – to fight regressions and keep your site fast – are up. Thank you to all the folks who attended and asked such great questions!
Wow! 🤩
More than 600 ⭐️ in the webperf-snippets repo
Thank you 🥰
📣 New webperf-snippet to measure the click interactions on the page.
https://github.com/nucliweb/webperf-snippets#interactions
Thank you @tunetheweb for the contribution 😊
Optimize And Measure Interaction to Next Paint (INP)
https://www.debugbear.com/docs/metrics/interaction-to-next-paint
Why are cookie banner JavaScript files so large?
#webPerf
Enjoying the new Largest Contentful Paint phase breakdown coming to @calibre next week 👀
In this specific (pictured) case we can see that LCP was delayed 702ms due to slow Time to First Byte
A further 71% of time waited was 3 webfonts (Requests #113, 114 and 125, super late in the load process)
My advice would be (in order):
🔹 Preload 1 or more fonts (experiment, probably don't preload all 3)
🔹 Use `font-display` (`swap` or `optional`) so text can render immediately
🔹 Improve TTFB
Didn't think it could get any better than a carefully crafted MTR query but: https://www.catchpoint.com/blog/traceroute-insession-catchpoints-effort-towards-a-more-reliable-network-diagnostic-tool #webperf
I am currently working on a successor to my SEO Shortcuts Chrome extension called "Commands”. This extension is primarily intended for SEO and Web Perf specialists.
In addition to shortcuts to many external services, the focus is now on commands that provide lots of relevant insights about a page and whose results are displayed in the browser's console.
Herewith some examples of seo, lcp, js and css commands. #seo #webperf
📣 New webperf-snippet by @josh_dev
Find all inline scripts on the page and list the scripts and count. Find the total byte size of all the inline scripts in the console
The slides of the Core Web Vitals talk today in the Codemotion Meetup at Adevinta Spain
Thanks a lot to all the attendees
Thanks to @tunetheweb, the prize of a funny Kahoot, has been a print version of Web Almanac 2022 ☺️
I really like to see that all browser vendors agree with @scottjehl that we need `@media`, `srcset` and `sizes` for `<video>` as for `<img>`/`<picture>`! 🤩
Prepping my talk for #WWRuhr, trying to condense a decade of dabbling with image #webperf into the highest ROI items at each step of the pipeline (from cache key consistency over AVIF to picture w/ fetchpriority).
It means a lot of killing my own darlings, like automated art direction, LQIP and many other very "clever" solutions that once solved a very specific problem but just don't hold up under the rigors of day-to-day image ops.
New webperf-snippet
"Largest Contentful Paint Sub-Parts"
https://github.com/nucliweb/webperf-snippets#largest-contentful-paint-sub-parts-lcp
At InfoShare with my pal Harry Roberts, who is giving a brand new talk.
There’s some absolute #webperf gold on this slide to help you infer problems from the gaps you see between the various performance metrics in WebPageTest and other tools.
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using `object-fit: cover;` in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many `<source>` in a `<picture>`?
How to Optimize Interaction to Next Paint (INP)
Learn how to optimize for the Interaction to Next Paint metric
Good write up from Wikipedia on improving TBT (which should improve INP). JavaScript performance issues can often be a scenario where a task doesn’t take that long by itself, but when scaled up… that’s where you run into trouble.
https://www.nray.dev/blog/300ms-faster-reducing-wikipedias-total-blocking-time/
The @WeLoveSpeed videos are online already. I particularly like how Taming the Speed Impact of 3rd-Party Tags by @andydavies challenges our assumptions about 3rd-party tags
https://www.youtube.com/playlist?list=PLqQ-opbi5cUNHus04oKC7Pi6HIxVaMx-k
#webPerf
3 ways to find your worst JavaScript offenders for page load
https://performance.shopify.com/blogs/blog/3-ways-to-find-your-worst-javascript-offenders-for-page-load by @sia
Performance Newsletter №127:
🔹 INP becomes a Core Web Vital by @geekonaut
🔹 everything you have to know about bfcache by Murshid Muzamil
🔹 how to find the worst JavaScript offenders by @sia
and more.
#Development #Launches
capo.js · Optimize web performance by identifying out-of-order head tag elements https://ilo.im/131bqg
_____
#Script #WebPerformance #WebPerf #WebDevelopment #WebDev #Frontend #DevTools #HTML #CSS #JavaScript
The modern way of serving images
https://kurtextrem.de/posts/modern-way-of-img by @kurtextrem
Can't wait to see wider support of View Transitions.
The burden of Single Page Apps isn't worth it just for more seamless page transitions.
This API lets you get the best of both worlds.
Get your <head> in order, a new web perf snipped, by Rick Viscomi, to use in the Chrome Dev Tools
How you order elements can have an effect on the (perceived) performance of the page.
https://github.com/nucliweb/webperf-snippets#get-your-head-in-order
Very excited that local web meetups are coming back! This Thursday, I get to see lots of friendly folks again at #WWRuhr, talking about "Actually Actionable Image Optimization" for #WebPerf alongside @maddesigns
😍 WebPerformance Report Week #20. Delivered ✅
If you wants to receive the @webperfreport the next week, all you have to do is subscribe from our website:
👉 https://webperformancereport.com
🍻 https://www.buymeacoffee.com/webperfreport
#webperf #corewebvitals #webperformance #buildinpublic
⚡️💾 Web Performance Snippets
A curated list of snippets to get Web Performance metrics to use in the browser console
If you're into #webperf and would like to learn how other folks have found their way to our world, @tannerhodges has a really fun podcast called Catching Up. He chats with folks (like @anniesullie @ethangardner @tunetheweb & @viniciusdallacqua) about their performance journeys. Definitely worth a listen!
📢 Great news! We have added the new Core Web Vitals metric, Interaction to Next Paint, to @webperfreport ! 🚀
The updated report will be available starting this Sunday. Stay tuned!
👉 https://webperformancereport.com
#webperf #CoreWebVitals #INP #buildinpublic
If you're at @smashingconf SF next week, join me for the lunch session on May 24! We'll do realtime #webperf / #UX audits, see how various sites stack up against Google's #CoreWebVitals, and learn how to find low-hanging fruit to optimize. It's gonna be so fun!
Only 35 seats available! Register here: https://smashingconf.com/sf-2023/lunch-sessions
I've known @andydavies for years and years (and am lucky to work with him at @speedcurve). Every time I watch one of his talks, I learn new things. His recent talk about third-party performance at @WeLoveSpeed is a must-watch. https://youtu.be/q3M4he-QxCA #webperf #ux #javascript #js #frontend
React Server Components, Next.js App Router and examples
https://addyosmani.com/blog/react-server-components-app-router/ by @addyosmani
#React #NextJS #WebPerf #Performance
#Development #Reviews
Lighthouse diff + WebPageTest · Google’s web performance auditing tool now has a diff tool https://ilo.im/12u80m
_____
#WebPerformance #WebPerf #DiffTool #Lighthouse #WebPageTest #WebDevelopment #WebDev #Website
🔗 “The intersectionality of web performance” by @adactio
#WebPerf #accessibility #sustainability
⚓️ https://nicolas-hoizey.com/links/2023/05/06/the-intersectionality-of-web-performance/
