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.
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!
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?
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
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.
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.
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.
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
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
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 ?????
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! 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)
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?
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?
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;
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.
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?
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.
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 ???
I find doing these kind of hard to tell what they numers really are. If i run a performance test, i get 3 different percentage numers. It jumps between 50 and 80. So its kinda hard to tell what is correct or not
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?
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?
![เปิด อาณาจักร หมื่นล้าน "สาระตั้ม" l [Nickynachat]](http://i.ytimg.com/vi/3XE0nPF4YkQ/mqdefault.jpg)
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 is really an easy tutorial. Simple and not overwhelming.
This was the best video to introduce me to learn basics of performance of web. Thank you, I was looking for something like that.
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?
One of the best tutorial I found online for improving website performance. Keep it up.
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 🥺
You're a good teacher. Very useful information for discovering this tool.
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
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?
It seems that setting the mode of webpack to “production” can help us a lot! Aweme!
Can some help me out please, how to get my website to open up in glitch?
Awesome intro video to improve web page performance !
I want more cats from now on in these talktorials
This helped me a lot in optimizing a heavily loaded wordpress website. :)
Really great and direct to the point!
i am a little confused, it says glitch/edit/#!/tony but how do i do this for my own site?
same pb as me
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 ?
Very helpful especially for a novice developer like me.
Audit feature does not work in Electron, it says can only audit HTTP/S and Chrome extensions.
Awesome video Kayce. Brilliant as always 👏👏 .. wonder if your cat is mining your cat food 🤔🤔
Is there a new video or an update for this video? It's saying project is no more running...
У каждого из нас есть своя функция 'майнинг биткойн'. Спасибо ребят за то что делаете, дай вам Бог здоровья))
This is Really good for any novice
Hello dev tool I have a problem (how to remove unused javascript in blogger) please someone tell me.
Awesome, didn't know anything about this.
THe performance test you showed keeps crashing with the CPU throttling on, runs fine leaving it off
good one ; can we showcase for a web page (desk top version).
great tutorial. very well made. 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
Great video and nice examples!
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.
Just wondering if I do request blocking, will that influence the Audit performance?
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.
Awesome video Kayce!
I hope Tony has found a better way to mine for Bitcoin... That's one hell of a talented cat! :-)
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.
You forgot to mention the part when you stay up all night re-working files.
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.
Great video with nice examples!
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
Now Audits tab is renamed as Lighthouse?
Yup
Please explain the performance panel in detail
I have a question please. Why does the glitch keep on restarting on my end? Am I missing something?
Glitch is failing. "tony has been suspended". Any tips on how to improve load performance of that?
same
Has the Audit tool been replaced by Lighthouse?
Thanks brother but my website in Wordpress how to fix all issue according to lighthouse
Extremely helpful, Thank-you Brother.
can u explain the time line little bit more and tell the time a function takes to execute?
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)
Hi bro, can you please make a video how to create new custom storage in dev tools
Would you recommend simple tool for measuring how long does take to load the page?
You're a great teacher.
This was extremely helpful!
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 ?????
Eliminate render-blocking resources in coverage shows the unused coding for that particular page or is it for all page unused codes?
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
this was so helpful.. its gold
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)
Very helpful video.Thanks a lot.
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?
Im here trying to speed up a certain website and ending up still not know how to do it.
wow, this is really useful, thank you so much
Thank you for this! Very informative
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 ..
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 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?
Optimizing web speed, on this code can be written in selenium code?
is it possible.
That cat is so cute !
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)
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;
great background!
that's what i was thinking the whole video xdd
This tutorial should be updated. It is 2024 now. A lot of things have changed.
Anyway, thanks for this tutorial.
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.
Super useful video. Thanks
Am I able to use this on my WIX homepage?
Is server.js file belongs only to node.js or normal javascript can also use
Great tips! Thanks so much for the video
I love Fesh too
How to block Ab testing to see the results?
Thank you so much. Learnt a lot
very informative video, thank you!
Audits tab is the same as Lighthouse no?
Thank you! I was going crazy haha
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?
why mining functionality affecting performance
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.
This will be super helpful
Thanks
Awesome video, thanks!
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 ???
I find doing these kind of hard to tell what they numers really are. If i run a performance test, i get 3 different percentage numers. It jumps between 50 and 80. So its kinda hard to tell what is correct or not
ALso i dont understand why for example my TTI is almost 8s but in reality i can interact at 1-2s already?
In addition to this, why is this page showing half the TTI of the build Audit Performance test???
developers.google.com/speed/pagespeed
Good
Holy... That was very informative kk' Thank you!
is Audit the new Lighthouse tab ?
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?
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?
i brusted my coffee while listeing 11:49