Our Person of the Week is a Web Performance Developer Advocate, always eager to learn something new and to teach others. Drumrolls, please, for... Lazar Nikolov! Thank you for everything you do for the community, dear @nikolovlazar !💖

#smashingcommunity

To expand a bit, there's no way to build something on the web without HTML—even if that HTML is written via JavaScript.

Similarly, there's no (reasonable) way to adjust the appearance of that HTML without CSS—even if that CSS is written via JavaScript.

These days, HTML and CSS can handle massive amounts of things that used to require JavaScript.

So if JavaScript is the least critical and least reliable part of the stack, we should all strive to use it less rather than more.

@real_ozcoder do you have a demo of this? Curious to see what improvements you can achieve with this trick. Haven't seen it in the wild yet, but I also haven't been looking hard 😅

https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/

"Almost half of all pages in the HTTP Archive dataset that scored a 100 on Lighthouse did not meet the recommended CWV thresholds based on real-user data."

It means if you see a 100 on Lighthouse, the chances of your page's CWV not falling in the recommended ranges are ~43% - a.k.a users being miserable - a.k.a you're loosing traffic/money/whatever's important to you.

This is why you should be looking at field data as well, not just lab data.

#webperf

I'm experimenting with the "loading" and "decoding" attributes of the <img> tag and I noticed something interesting.

In a scenario of one image surrounded with text content (article page), one permutation of loading/decoding stands out: the lazy/async one.

The other permutations' profiles look normal. The eager/sync, eager/async, and lazy/sync are very similar. But look at the lazy/async profile. LCP gets set when the image starts loading, not when it finishes. Anyone knows what's happening?

Using process.env directly in your project means you’re double or triple checking the names of the environment variables every time you access them. You also need to cast them to their correct type, since process.env returns all values as strings. Most environment variables are probably strings, but some can be numbers as well.

Learn how to build a mechanism that validates and generates types for your environment variables with Zod from this article: https://creatures.dev/blog/env-type-safety-and-validation/

Ok thanks to @nikolovlazar 's video, I was able to get debugging working for a tiny #NodeJS app in #Neovim 🎊​. Next step is to get it working for a slightly larger #NestJS #Typescript application.

Stop trying to make fetch (waterfalls) happen.

Check out these 3 ways to improve your code’s performance and avoid fetch waterfalls in React.

https://bit.ly/fetch-waterfalls-in-react-9