Improving Load Performance - Chrome DevTools 101
Вставка
- Опубліковано 18 жов 2024
- 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/edi...
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
Anyone watching this in 2022, the audit tab is now called "Lighthouse" on Chrome. You're welcome.
Thanks
The key thing to remember is to not add bitcoin mining functionality on page load lol
Yes, async it :p
And to change webpack env to prod, lol
Put the bitcoin mining operation into a web worker instead lul
:))
What if I want myBitcoin to run so that I could gain money? Use async script running in worker😅💲
This was the best video to introduce me to learn basics of performance of web. Thank you, I was looking for something like that.
This is really an easy tutorial. Simple and not overwhelming.
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!
One of the best tutorial I found online for improving website performance. Keep it up.
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.
How did you add your domain in this editor?
We need whole series about this 🥺
Really helpful, I laughed hard on the mineBitcoin function :D
I snorted!
You're a good teacher. Very useful information for discovering this tool.
It seems that setting the mode of webpack to “production” can help us a lot! Aweme!
excellent video I am going to look like an expert in my team now
Awesome intro video to improve web page performance !
I want more cats from now on in these talktorials
Really great and direct to the point!
This helped me a lot in optimizing a heavily loaded wordpress website. :)
У каждого из нас есть своя функция 'майнинг биткойн'. Спасибо ребят за то что делаете, дай вам Бог здоровья))
Awesome video Kayce. Brilliant as always 👏👏 .. wonder if your cat is mining your cat food 🤔🤔
This is great info on performance and SEO related stuff. Thanks!
Awesome!! Where can I get more learning resources about Audit, Performance and resources about how does use them to improve load performance ?
REad the info and click read more. Buts it quite limited and kind of tech related. You can also check developers.google.com
Hey @Kayce, great video ! Can you give any pointers about doing something similar to optimize an SSG website ?
Great video and nice examples!
Great video with nice examples!
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.
great tutorial. very well made. thank you
this was so helpful.. its gold
Can some help me out please, how to get my website to open up in glitch?
Awesome, didn't know anything about this.
Very helpful video.Thanks a lot.
This was extremely helpful!
You forgot to mention the part when you stay up all night re-working files.
Awesome video Kayce!
I hope Tony has found a better way to mine for Bitcoin... That's one hell of a talented cat! :-)
I love Fesh too
Very helpful especially for a novice developer like me.
Good
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?
Super useful video. Thanks
Glitch is failing. "tony has been suspended". Any tips on how to improve load performance of that?
same
Is there a new video or an update for this video? It's saying project is no more running...
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?
I think you should start using chromebook ,What would people think even you dont use those .. just joking ...I must say this video is very useful ..
i am a little confused, it says glitch/edit/#!/tony but how do i do this for my own site?
same pb as me
You're a great teacher.
Great tips
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?
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 ☺
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.
Extremely helpful, Thank-you Brother.
i brusted my coffee while listeing 11:49
wow, this is really useful, thank you so much
Eliminate render-blocking resources in coverage shows the unused coding for that particular page or is it for all page unused codes?
Thank you for this! Very informative
That cat is so cute !
Just wondering if I do request blocking, will that influence the Audit performance?
very informative video, thank you!
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
good one ; can we showcase for a web page (desk top version).
This is Really good for any novice
Awesome video, thanks!
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
At 8:40 You have removed the jquery entirely. What if i have other dependency librarey like JQuery UI, Jquery Datatable etc? Can You even remove unused code from themby this coverage? Won't it break these libraries ?????
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.
Thank you so much. Learnt a lot
I am running setUpNode & indexWholeBlockchain in my render function. My app no longer works. What's going on?
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.
@@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?
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.
Maybe you should split the fonts in seperate files and load only the file with the fonts that you really use on the document.
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?
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)
Thanks. Really useful.
Would you recommend simple tool for measuring how long does take to load the page?
This will be super helpful
Thanks
This tutorial should be updated. It is 2024 now. A lot of things have changed.
Anyway, thanks for this tutorial.
Hi bro, can you please make a video how to create new custom storage in dev tools
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
Audit feature does not work in Electron, it says can only audit HTTP/S and Chrome extensions.
hello sir, this was useful. i am facing the problem with my website, i don't know that how to remove unused java scripts from my blog HTML code. please will you help me.
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.
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
To open your site in incognito mode, press Control+Shift+N (Command+Option+N on Mac)
Awesome video.
great background!
that's what i was thinking the whole video xdd
1:56 Audit is "Lighthouse" for me
I'm running Google Chrome: 83.0.4103.116 (Official Build) (64-bit)
On macOS Version 10.15.5 (Build 19F101)
I have just enabled compression, checked in network and saw indeed that content encoding shows "gzip", the audit however does not recognize this. I have a multipage webapp and apparently the audit only tests the login page where no compression happens because its too small. Any suggestions? Thank you!
@@kaycebasques7422 Wow, awesome, thanks for the quick response. I enabled compression for the entire middleware. I went to the page I wanted to audit and hit start. Lighthouse however evaluated the login page according to the results.
@@kaycebasques7422 Appears so. In the title of the audit I can see only the main link (I am testing on localhost so I see localhost:4200 in the audit although I expect it to evaluate localhost:4200/projects, the path I am at when starting the audit). With the clear storage tick, the main page (localhost:4200) indeed redirects to the login page.
I have a question please. Why does the glitch keep on restarting on my end? Am I missing something?
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 ???
Hello dev tool I have a problem (how to remove unused javascript in blogger) please someone tell me.
Has the Audit tool been replaced by Lighthouse?
Great one! Thanks!
So I am totally ignorant and learning. What about WordPress when you are using a child theme. How can you edit the parent files and not have them change on you during updates?
Good evening, can I know a senior expert to speed up my website from DESKTOP AND MOBILE on chrome and edge?
a person who knows how to fix errors and bugs without ruining the website;
Please explain the performance panel in detail
Holy... That was very informative kk' Thank you!
Its amazing video ... super high quality content. Cant believe its for free XD
This comment is look like you are watching and enjoying like a movie
Great tips! Thanks so much for the video
THe performance test you showed keeps crashing with the CPU throttling on, runs fine leaving it off
Is server.js file belongs only to node.js or normal javascript can also use
Now Audits tab is renamed as Lighthouse?
Yup
can u explain the time line little bit more and tell the time a function takes to execute?
1 question, I have found red lines in "Coverage"
and they are from Elementor. I need some of them but the rest is RED
can I remove all the unwanted lines or will I lose other working lines with them.
If i can remove them separately how to?
I've been using Elementor for about 3 years now and this is one of the big reasons I'm moving away from it completely. They load a lot of stuff that isn't needed at all. They add a lot of code bloat and unnecessary http requests and load some libraries whether you need them on the page or not. I have heard Oxygen does a much better job with this but still, no page builder can be as good as professional tools and hand-coding using best practices.
@@ashkanahmadi Yeah its a point worth fixing.
Optimizing web speed, on this code can be written in selenium code?
is it possible.
Very useful thanks
Thank u for this awesome video
1:36 just press f12 button