Improving Load Performance - Chrome DevTools 101

This tutorial shows you how to use Chrome DevTools to find ways to make your pages load faster.

Using Tony the Cat’s site, Kayce shows you how to audit a page with the Audits panel, use the Audits panel report to find ways to improve your page speed, experiment by adding one change at a time, and then measure each change to make sure that each is actually improving your speed. You can use this workflow to improve the speed of any page.

This tutorial covers some of the most common causes of slow site speed, including lack of text compression, large images, render-blocking resources, and too much JavaScript.

[lucbian]

Anyone watching this in 2022, the audit tab is now called "Lighthouse" on Chrome. You're welcome.

[Jespertheend]

The key thing to remember is to not add bitcoin mining functionality on page load lol

[KanagawaMarcos]

This was the best video to introduce me to learn basics of performance of web. Thank you, I was looking for something like that.

[michaelparkernorton]

So I just completed this. Things have changed a bit over the last 5 years. Interestingly it starts at a performance of 45 and went down when I made changes for the first 2-3 exercises lol. By the end though it was up to 81. Not quite 94. It was cool learning about the optimization process.

[Web]

This is really an easy tutorial. Simple and not overwhelming.

[maximilian.R]

Thank you!!! Holly molly! I didn't think I was going to make it through this video with its instructions. A great instructor will make it a breeze! Gee! Can't believe I made it through all the scripting. Thank you! The score changed from 0 to 100! LOL Unreal! I am an appraiser and have to load tens, or hundreds, of property listings sometimes, to complete analyses in Excel. It was loading too slow. Now, it made a huge difference. Thanks, again!

[mohammadkamruzzaman]

One of the best tutorial I found online for improving website performance. Keep it up.

[travelmoustache]

Really helpful, I laughed hard on the mineBitcoin function :D

[Vlad-ldcu]

You're a good teacher. Very useful information for discovering this tool.

[talksX]

excellent video I am going to look like an expert in my team now

[AjaySolleti]

I want more cats from now on in these talktorials

[sanjayprashadh]

Awesome intro video to improve web page performance !

[uekirxe]

It seems that setting the mode of webpack to “production” can help us a lot! Aweme!

[jamaicanfoodsandrecipes]

Can some help me out please, how to get my website to open up in glitch?

[timura.]

У каждого из нас есть своя функция 'майнинг биткойн'. Спасибо ребят за то что делаете, дай вам Бог здоровья))

[knowledgematters]

This helped me a lot in optimizing a heavily loaded wordpress website. :)

[rickvian]

i brusted my coffee while listeing 11:49

[venkyv]

Awesome video Kayce. Brilliant as always 👏👏 .. wonder if your cat is mining your cat food 🤔🤔

[CarlitoProductions]

This is great info on performance and SEO related stuff. Thanks!

[cagmz]

7:03 When Showing Coverage, does it matter if Webpack is in development or production mode? I'm assuming that you'd want to use development mode in order to view the unminified source and have the coverage show red/green accurately (as opposed to production mode, where the source might be minified). Can anyone confirm?