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!
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.
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.
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 ?????
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?
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.
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
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
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.
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?
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?
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.
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 ???
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.
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)
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.
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?
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?
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
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.
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;
Anyone watching this in 2022, the audit tab is now called "Lighthouse" on Chrome. You're welcome.
Thanks
One of the best tutorial I found online for improving website performance. Keep it up.
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.
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!
We need whole series about this 🥺
This is really an easy tutorial. Simple and not overwhelming.
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?
You're a good teacher. Very useful information for discovering this tool.
Awesome intro video to improve web page performance !
Really helpful, I laughed hard on the mineBitcoin function :D
I snorted!
excellent video I am going to look like an expert in my team now
Really great and direct to the point!
It seems that setting the mode of webpack to “production” can help us a lot! Aweme!
This helped me a lot in optimizing a heavily loaded wordpress website. :)
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.
Hey @Kayce, great video ! Can you give any pointers about doing something similar to optimize an SSG website ?
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 ?????
Awesome video Kayce. Brilliant as always 👏👏 .. wonder if your cat is mining your cat food 🤔🤔
Awesome, didn't know anything about this.
This is great info on performance and SEO related stuff. Thanks!
You're a great teacher.
Great video and nice examples!
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?
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
Can some help me out please, how to get my website to open up in glitch?
this was so helpful.. its gold
This was extremely helpful!
Very helpful video.Thanks a lot.
This is Really good for any novice
Super useful video. Thanks
Very helpful especially for a novice developer like me.
great tutorial. very well made. thank you
Great video with nice examples!
Is there a new video or an update for this video? It's saying project is no more running...
I love Fesh too
wow, this is really useful, thank you so much
i am a little confused, it says glitch/edit/#!/tony but how do i do this for my own site?
same pb as me
I want more cats from now on in these talktorials
good one ; can we showcase for a web page (desk top version).
Just wondering if I do request blocking, will that influence the Audit performance?
Has the Audit tool been replaced by Lighthouse?
great background!
that's what i was thinking the whole video xdd
У каждого из нас есть своя функция 'майнинг биткойн'. Спасибо ребят за то что делаете, дай вам Бог здоровья))
Fantastic thankyou 🎯🚀
3:00 AUDIT (now Lighthouse TAB).
5:45 sizing images
6:37 eliminate render blocking
Eliminate render-blocking resources in coverage shows the unused coding for that particular page or is it for all page unused codes?
Thank you so much. Learnt a lot
very informative video, thank you!
I am running setUpNode & indexWholeBlockchain in my render function. My app no longer works. What's going on?
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.
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.
Awesome video, thanks!
Thank you for this! Very informative
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
Hi bro, can you please make a video how to create new custom storage in dev tools
Please explain the performance panel in detail
This will be super helpful
Thanks
Extremely helpful, Thank-you Brother.
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
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)
Great tips
Is server.js file belongs only to node.js or normal javascript can also use
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
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.
Good
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?
Awesome video.
Audit feature does not work in Electron, it says can only audit HTTP/S and Chrome extensions.
Audits tab is the same as Lighthouse no?
Thank you! I was going crazy haha
Awesome video Kayce!
I hope Tony has found a better way to mine for Bitcoin... That's one hell of a talented cat! :-)
Am I able to use this on my WIX homepage?
is Audit the new Lighthouse tab ?
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?
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.
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 ???
Thanks. Really useful.
Great one! Thanks!
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.
Very useful thanks
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)
Would you recommend simple tool for measuring how long does take to load the page?
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?
Hello dev tool I have a problem (how to remove unused javascript in blogger) please someone tell me.
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?
That cat is so cute !
Very nice👍
Glitch is failing. "tony has been suspended". Any tips on how to improve load performance of that?
same
I have a question please. Why does the glitch keep on restarting on my end? Am I missing something?
great video
Now Audits tab is renamed as Lighthouse?
Yup
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
Thank u for this awesome video
Optimizing web speed, on this code can be written in selenium code?
is it possible.
thx... nice and clear!
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.
THe performance test you showed keeps crashing with the CPU throttling on, runs fine leaving it off
thank you very much👍
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;
Holy... That was very informative kk' Thank you!
Great tips! Thanks so much for the video