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.

Screen Shot 2019-01-23 at 1.33.01 PM.png

$_ 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:

Screen Shot 2019-01-23 at 1.38.42 PM.png

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

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.

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

No Comments Yet