10 must-read performance and DevTools tips from Addy Osmani

I follow Addy Osmani on Twitter and learn so much stuff from him almost on a daily basis. So, I just thought to compile a list of interesting Tweets by Addy Osmani where he offers nifty DevTools and web performance tips. I personally found all these tweets amazing and I am sure you will find them useful as well.

So, here we go:

Specifying importance of a resource with importance attribute

If you turn on Experimental Web Platform Features on Chrome, you can prioritize downloading resources sooner or later as following:

<img src="high-priority-image"  importance="high" />
<img src="low-priority-image"  importance="low" />

You can also use importance with fetch as following:

fetch("/stats", { importance: "low" });

Support for top level await in Chrome and Firefox console

If you are doing some local experiments involving async functions, you can use await keyword in the console.

$_ gives you the value of last expression evaluated

This is such a useful feature and can totally help you run local experiments easily. Here is how it works in the console:

Inspect element in Chrome DevTools now has a tooltip of CSS properties! How cool is that?

Use quicklink to increase the perceived speed of your pages

quicklink is a < 1KB library that helps you prefetch subsequent pages, API responses, resources etc which ultimately results in faster page transitions. We use it at Hashnode and I can totally vouch for it. :)

Use Bundlephobia to check the size of dependencies before adding them to your project

Create Live Expressions in Chrome console

With this handy tool, you can pin a live expression to the console and see its value change in real-time.

Remove unused code from your app using coverage tool

Just head to top right of console -> More Options -> More Tools -> Coverage.

Reduce your lodash bundle size by using lodash-es

Well, I am going to give it a try!

Replace moment.js + locales with date-fns.org to reduce bundle size by 50%

I am going to try this as well. 🙌

---

Thanks for all the amazing tips! 🙌I am sure everyone in the community will find them useful.