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.
Optimizing web speed, tutorial → bit.ly/2LemRYa
Experiment with Tony’s site → glitch.com/edit/#!/tony
Performance Analysis Reference → bit.ly/2o8N1OQ
Watch the last episode on debugging JavaScript → bit.ly/2PyxXGL
Subscribe to the Chrome Developers channel → bit.ly/ChromeDevs1

[@lucbian]

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

[@christiansugarol624]

Thanks

[@Jespertheend2]

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

[@_akuma06]

Yes, async it :p

[@wt030]

And to change webpack env to prod, lol

[@andrewfong101]

Put the bitcoin mining operation into a web worker instead lul

[@germanhealthbeautyproducts3433]

:))

[@pauldev8967]

What if I want myBitcoin to run so that I could gain money? Use async script running in worker😅💲

[@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.

[@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!

[@10Web]

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

[@mohammadkamruzzaman4154]

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

[@Vlad-ld9cu]

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

[@AndrewRusinas]

We need whole series about this 🥺

[@user-ue7ki1rx5e]

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

[@CarlitoProductions]

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

[@michaelparkernorton4841]

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.

[@imanekhiati9004]

How did you add your domain in this editor?

[@CaioLouro]

Really great and direct to the point!

[@sanjayprashadh3969]

Awesome intro video to improve web page performance !

[@WIKIKALI]

Great video with nice examples!

[@johannesdrechsler8585]

Great video and nice examples!

[@knowledgematters2023]

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

[@juliocornelio4151]

great tutorial. very well made. thank you

[@mohdmzaman]

Extremely helpful, Thank-you Brother.

[@talk2s5061X]

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

[@travelmoustache]

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

[@knekkii]

I snorted!

[@AbhishekSharma-cq2hw]

This was extremely helpful!

[@jeanneviegarciano7147]

Thank you for this! Very informative

[@venky76v]

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

[@RajeshJustaguy]

this was so helpful.. its gold

[@jared394]

Awesome video, thanks!

[@Vagelis_Prokopiou]

Thanks. Really useful.

[@ecommercetechbuild1354]

Very helpful video.Thanks a lot.

[@ravalikag519]

Hey @Kayce, great video ! Can you give any pointers about doing something similar to optimize an SSG website ?

[@menakaramasamy8936]

Thank you so much. Learnt a lot

[@gholamrezadar]

very informative video, thank you!

[@SurfingTheMentawais]

Super useful video. Thanks

[@pemessh]

This will be super helpful Thanks

[@gilneyn.mathias1134]

Holy... That was very informative kk' Thank you!

[@AntonMitsev]

Great one! Thanks!

[@mranzuann7950]

wow, this is really useful, thank you so much

[@VivekTR]

You're a great teacher.

[@moshiuramit]

Awesome!! Where can I get more learning resources about Audit, Performance and resources about how does use them to improve load performance ?

[@RomboutVersluijs]

REad the info and click read more. Buts it quite limited and kind of tech related. You can also check developers.google.com

[@dominikseljan3043]

Great tips! Thanks so much for the video

[@gagandeepsinghinvingagan]

Indeed a great video. What do you recommend to make performance measurement for angular 6 application? Angular build creates files which are out of my control.

[@gagandeepsinghinvingagan]

@@kaycebasques7422 thanks, i have created an angular application with lazily loaded modules. I has bad performance in first paint. Any input to what to look for to improve?

[@ShivangiSingh-wc3gk]

Awesome, didn't know anything about this.

[@user-vf5uw7jb5e]

Awesome video.

[@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?

[@rightwingcouriernews899]

Tony, the cat is adorable, You did a great job!!! Please tell Tony Thank You for the fish on the Dev Pg. really well-done Video I think I can make My site load better. Ohh with that being said, does the Google Dev tools work on WordPress site? or do I need to do something else? Thank You

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@restuwahyusaputra7764]

Great tips

[@newnam]

I'm fairly new to using the Chrome Dev Tools, but these files you're loading to better load time (server.js, model.js, etc.) - Are these files I simply create in the root or are these files specifically contained within a Glitch hosting environment?

[@violetaveleva6143]

great background!

[@asfandalikhan6269]

that's what i was thinking the whole video xdd

[@flysports3856]

Very helpful especially for a novice developer like me.

[@instylecasesinstylecases7239]

Would you recommend simple tool for measuring how long does take to load the page?

[@videojock100]

This is Really good for any novice

[@nouribenz]

Very useful thanks

[@Mr_Amazigh]

thanks for sharing

[@mahesh14042009]

Nice tips Thanks

[@jonathanfeldman7309]

Somewhat related, but when you mentioned adding the async tag to script elements it reminded me of an issue I had with fonts. Whenever I add a font or an icon set like material icons to my site, the audit tab complains about it being a render blocking resource that takes a moderate amount of time to load. I think some blog posts I read suggest asynchronously loading the font via JavaScript, but that seems a little complicated. It looks like adding a preload tag for the font before the link tag that actually references it sometimes causes it to pass the audit, but I'm not sure if it has any actual effect on page load. Any suggestions on how to avoid it? I know font loading comes up frequently so sorry if this has been asked a lot.

[@entalpa]

Maybe you should split the fonts in seperate files and load only the file with the fonts that you really use on the document.

[@fernandolunadev]

Hi @Jonathan! Are you using the Material Icons font, remotely? I'm thinking maybe a good idea for it, is making a count the total of Material icons you are using, and render these in GIF images, stores locally and call them from your HTML Materialize Components. I think these will get better performance than using a remote icon web font... or not?

[@praveenchandrasekaran7064]

Eliminate render-blocking resources in coverage shows the unused coding for that particular page or is it for all page unused codes?

[@kablamopow]

Just wondering if I do request blocking, will that influence the Audit performance?

[@amrsherif6084]

great video

[@jamaicanfoodsandrecipes]

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

[@e4r281]

That cat is so cute !

[@MarkThackwell]

I love Fesh too

[@SandroTreglia]

thank you very much👍

[@RomboutVersluijs]

I got a question about audit. When i check "request counts" Its shows images as 2nd in the list with 256Kb. But when i check network tab i dont get near that value. There is no more info in request acount list to check, its just a number i see. I wondering if that number is actually correct

[@okoiful]

thx... nice and clear!

[@avimehenwal]

Its amazing video ... super high quality content. Cant believe its for free XD

[@jayaprakashr5691]

This comment is look like you are watching and enjoying like a movie

[@mkgujjars7320]

Good

[@hiteshkumar6077]

Thank's Sir,really very helpful.....:-

[@dirtydrew69]

this is awesome! Can you do a hairstyle tutorial next?

[@mrclaytron]

@@kaycebasques7422 haha, controlled hat hair. You should patent that!

[@timura.6658]

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

[@satya4866]

Nice one

[@jaik9321]

good one ; can we showcase for a web page (desk top version).

[@emilioleon7505]

Hi! My website load good when loading turns to the right, but when it starts loading to the left it takes like 4 secs. what is the difference between loading to the left and right? (Chrome)

[@AjaySolleti]

I want more cats from now on in these talktorials

[@mrclaytron]

Awesome video Kayce! I hope Tony has found a better way to mine for Bitcoin... That's one hell of a talented cat! :-)

[@bannarirajak4334]

Very nice👍

[@elmotareal]

great video, seriously deranged conclusion, you enhanced the performance by removing a functionality? I too can display a "hello page" html page in no time, I really was looking for more... like does set timeouts enhance or block page rendering?

[@goodtimes4502]

You forgot to mention the part when you stay up all night re-working files.

[@jimson7070]

Cool learned new things

[@rameshshresta1871]

Awesome!

[@kingjim8583]

Thank you

[@ravikishore-anchala]

How do I audit a page which is part of flow whose url cannot be loaded, like I go few steps further by clicking few buttons and this is done using traditional xhr calls and the url of the page doesnt change.

[@divyapai5560]

Is server.js file belongs only to node.js or normal javascript can also use

[@ahmedlimam7424]

very helpful

[@JamieBensonTV]

This is fine for helping navigate the Google Developer tools (thanks) but seems to quickly skip some of the 101 style actionable advice. How do you create the "edit page" for your own site. I'm able to identify the unused code but it definitely does not look the same as the one's you have and I don't see how to add it to the request blocking and/or delete it. Typing in /libs* as a new pattern does not seem to do the trick. Huh, I appreciate the effort and difficulty of relaying this stuff in a short video but it really seems like it needs a few more descriptive elements to be classified as "101". Thanks for your time.

[@shwetaganganhalli7190]

Optimizing web speed, on this code can be written in selenium code? is it possible.

[@roylondon1619]

in this video at 4:44 mark you said to import the compression library . I've been trying to figure it out . How do I import the compression library. I'm stuck at this stage. 😕Thanks ☺

[@David-yz9mb]

What he meant was to add the 2 lines const compression = require('compression'); app.use(compression()); To be fear I also did not understand it at first, because I'm not familiar with require and app.use.

[@rishukumar7586]

can u explain the time line little bit more and tell the time a function takes to execute?

[@jjva9]

Changes aren’t visible as and when done why? I have changed my css file of the Wordpress website but it keeps on loading the previous version only . Please help

[@wailhamman6317]

is Audit the new Lighthouse tab ?

[@aniruddhadas9]

amazing...

[@KevsGuide]

Fantastic thankyou 🎯🚀

[@KevsGuide]

3:00 AUDIT (now Lighthouse TAB).

[@KevsGuide]

5:45 sizing images

[@KevsGuide]

6:37 eliminate render blocking

[@davidpicarazzi]

i am a little confused, it says glitch/edit/#!/tony but how do i do this for my own site?

[@Positivesignals]

same pb as me

[@SandroTreglia]

hello congratulations for the tutorial I registered with my email and I followed your tutorial! How can I view my incognito site to optimize it? Thank you

[@bedouiadam]

To open your site in incognito mode, press Control+Shift+N (Command+Option+N on Mac)

[@rasulmamedov744]

Am I able to use this on my WIX homepage?

[@manoharjonnalagadda6551]

Please explain the performance panel in detail

[@anirbanbora1264]

Hi.. I am not able to see red or green bar to mark used and unused codes in the source pane. I am using chrome 77.

[@amd_d_praised]

Has the Audit tool been replaced by Lighthouse?

[@RitchieMatos]

I have a question please. Why does the glitch keep on restarting on my end? Am I missing something?

[@webapps8800]

hello thanks a lot for this good video can u help plz realy need help i wana know how to defer loading of javascript file the problem is the code is generated dynamicly in template file but without defer option can u help plz ???

[@harindersingh6448]

Thanks brother but my website in Wordpress how to fix all issue according to lighthouse

[@sravangopu5730]

Hi bro, can you please make a video how to create new custom storage in dev tools