This series is dedicated to performance problems that are quite common but often have simple solutions. You can find lots on more advanced topics at developers.google.com!
5 ปีที่แล้ว +33
0:17 The unclosed script element made me slightly uncomfortable.
I'm sure you noticed he mentioned that some critical scripts that site functionality depend on (like jQuery) should remain up top, including your 'main.js'
But there's something more like load the specific scripts when your in the specific section Like for example you have slider testiminonial on the bottom of the page, fire it when youre on that section i think in vue can handle it , they have something called lazy load components But it boils down how can you build something without library its much more efficient and easy to refactor
I had seen many, way too many websites that loads alot of js first before the visual content Does website that loads visual content before js even exist in 2019?
/oo 2:39 this whole of bunch of code can be writen using js, and array to build the tags on the DOM... if you want to see the source load the file as source where the html is displayed...
Extreme part should not be used as it is in video. sometimes, some cdn or anything else might not work temporally and at that time, window.load event is not fired or really late. it means that our js file will not work. keep that in mind. I think it also applies to defer tag but not sure
I think I've solved the issue you're talking about: poll the document (with setTimeout) for document.readyState === 'complete' and only then load the scripts dynamically as the extreme method says. But... Remember to clearTimeout! 😄
unfortunately not a choice for many devs in companies. i'm glad that those that see this video will at least consider the methods here and might make their sites a bit faster.
I find it odd that in 2019 we show jQuery load event and script tags where most of the apps we make are behind some level of framework or even a vanilla js project with things like smart prefetching, preload and code splitting
1:48 one ☝️ thing i don’t use to close a tag /oo the thing is as the Genius Darth Vader /oo i reverse the tag to close it like this and my badorus genusity Go further is that i write latin or english latin by swipping the characters and write the characters from right to left. The cursor go from right to left to write the ending head tag, and then i switch to left to right writing, this solve the problem for all time and save in all html files the slash / for billions of files to eternity... if we still there..
I tried adding defer and async attributes to the script tags. Loading performance improved, but I noticed that most of the scripts stopped working or became unreliable. Any ideas?
/oo 5:00 well this is a design issue, we need to make an afterloading() method to load those scripts that will do something else like displaying images whatever... /oo i really should recommend you to report this problem to the fondation of html consortium w3c..... HTML6 is time for it...
That is indeed more extreme. And you can do it! Just, as people point out, it happens at the cost of slowing down your site's reactions to user actions.
Why, oh why, would the Chrome Dev channel promote the use of jquery in the year 2019 when we have all these modern native Web APIs like Query Selector??
/oo? What 4:45 an event handler to the load event /oo whats for thats hacking... i never used jquery i don’t understand it /oo i don’t need it i built everything with js functions that i understand... /oo? And why you don’t tell them to make you a preload method to add the scripts into the header. Load() { preload(); ....
i always uses the extreme one. but i never know that what i am doing is the fastest one.... its just becomes behaviour from the very beginning i learn JS 🤣
jquery? \*checks video's publishing date* jquery? really? 😄 Seriously though: If you are concerned about your JS taking too much time to load, start with not using jQuery!
/oo 3:07 why are you moving the scripts into the body /oo? I always find this weired and against html logic /oo but people do this anyway, this is an html infraction to the html laws of w3 /ioo yes mr Bernlee /oo http is trash but html is good...
This is nice!!!
I'd love to see more content of this type! A bit more advanced topic won't hurt either! :D
This series is dedicated to performance problems that are quite common but often have simple solutions.
You can find lots on more advanced topics at developers.google.com!
0:17 The unclosed script element made me slightly uncomfortable.
Wait till you see the head tags at 01:42 😂
Thank you @Google for explaining it in simplest of the manner. :)
Small changes can make big differences. Very good explaining it. It's critical to keep this in mind when building pages. Thanks 👍
Well this type of video actually helps beginner and intermediate to get the concept working in an easy to understand way.
love that unregistered sublime mark on the top right corner
Heh heh... I actually have paid for Sublime, but that's not reflected in this copy. Nice catch...
can't thank y'all enough for this 💛 just what I was lookin for & answered the question I had
Same here, my lead was asking me to load third party scripts after page load and i had no clue how to do that, now it makes sense
Awesome video, but we also have to consider CSP (Content Security Policy) when using the extreme method. If it has been implemented in your site.
Yes, please show more content like this. Very helpful. Thank you.
The best advices I have ever faced. Thanks a lot!
Very good tips and tricks. Thanks Google!
Why don't you want to load things in parallel? That means people can't interact with your page until way later?
I'm sure you noticed he mentioned that some critical scripts that site functionality depend on (like jQuery) should remain up top, including your 'main.js'
Nice quick tip for beginners 👌👍
How about using dynamic imports instead of appending script elements to the page?
But there's something more like load the specific scripts when your in the specific section
Like for example you have slider testiminonial on the bottom of the page, fire it when youre on that section i think in vue can handle it , they have something called lazy load components
But it boils down how can you build something without library its much more efficient and easy to refactor
Hope to see more of those !
Wow it’s brilliant content! Simple and nice!
I had seen many, way too many websites that loads alot of js first before the visual content
Does website that loads visual content before js even exist in 2019?
/oo 2:39 this whole of bunch of code can be writen using js, and array to build the tags on the DOM... if you want to see the source load the file as source where the html is displayed...
Random unrelated recommendation of the year award
Almost 2020 and you guys still showing jquery?
He just showed that as an example.
Well it's reasonable, considering jQuery is still present in 74% of all the websites in the world.
What's better?
I mean, isn't it easier to use jQuery rather than vanilla? I'm new in web development, so some enlightenment would be great.
jQuery is still out there in a lot of projects, I think it's good to see examples of this kind. Not everything has yet been moved to vanilla js.
@@topaz-rn jQuery is middle class. Poor man's quick solution to look rich.
Extreme part should not be used as it is in video. sometimes, some cdn or anything else might not work temporally and at that time, window.load event is not fired or really late. it means that our js file will not work. keep that in mind. I think it also applies to defer tag but not sure
I think I've solved the issue you're talking about: poll the document (with setTimeout) for document.readyState === 'complete' and only then load the scripts dynamically as the extreme method says. But...
Remember to clearTimeout! 😄
most of the web apps these days use javascript frameworks like ReactJs VueJS ... for rendering HTML and javascript is the first thing you should load.
What application is he using to measure that Network Performance/Speed?
Great presentation like always
This is Great! But how can implement this on Elementor sites via code snippets? Thanks again for sharing!
Also it prevents errors such as document is not defined and so
A better tip for improving page performance would be to delete jQuery and trackers - less code takes less time to load, who would've thought?
unfortunately not a choice for many devs in companies. i'm glad that those that see this video will at least consider the methods here and might make their sites a bit faster.
Thanks a lot for sharing a knowledge
Yes Google, tell other people to optimize their code so that you can continue to hog all of the RAM.
Is the extreme level same as using require.js or similar to load js code before it's needed instead of loading it after the page loads?
I find it odd that in 2019 we show jQuery load event and script tags where most of the apps we make are behind some level of framework or even a vanilla js project with things like smart prefetching, preload and code splitting
These frameworks and techniques are common. The goal here, though, was do something that was universal.
1:48 one ☝️ thing i don’t use to close a tag /oo the thing is as the Genius Darth Vader /oo i reverse the tag to close it like this and my badorus genusity Go further is that i write latin or english latin by swipping the characters and write the characters from right to left. The cursor go from right to left to write the ending head tag, and then i switch to left to right writing, this solve the problem for all time and save in all html files the slash / for billions of files to eternity... if we still there..
Bloatware devs explain why their software is so slow so others don't do the same mistake
Good tips, thanks!
I tried adding defer and async attributes to the script tags. Loading performance improved, but I noticed that most of the scripts stopped working or became unreliable. Any ideas?
This is awesome.. and so much fun..
Meanwhile, when using gmail or youtube studio you get a blank screen for several seconds before anything starts.
but when the script have to call image server API, and need DOM element data attributes to catch the image ID?
/oo 5:00 well this is a design issue, we need to make an afterloading() method to load those scripts that will do something else like displaying images whatever... /oo i really should recommend you to report this problem to the fondation of html consortium w3c..... HTML6 is time for it...
Thanks
Extreme Plus - don't load a script until a user has interacted on the page
*coughts in single page application*
Hashim Warren Not a good user experience if considering various scenarios.
That is indeed more extreme. And you can do it! Just, as people point out, it happens at the cost of slowing down your site's reactions to user actions.
What if I want to pass more than one js file in 3rd extreme case, how to pass it?
Great video thanks for this amazing video it helped alot
Amazing, good job!
Great video!
Why im the only person who has this in recomended?
Because you're the only one that needs to fix their pages.
I guess Google analyzed your website and... 😏
Very Good!!
Extreme++: Just throw Error 404 on each user request.
Or just remove all the unnecessary bullshit from all the websites.
That's a big brain time
thx google person
Good one
Chrome development tools❤️❤️❤️❤️❤️❤️😇😘
Why, oh why, would the Chrome Dev channel promote the use of jquery in the year 2019 when we have all these modern native Web APIs like Query Selector??
Wow thabks
superb
Quick summary: learn asynchronous JavaScript.🙏🏿✌🏿
Nice one! :)
nice
I heard jarvis in the begginning
+1 for Using JQuery
/oo? What 4:45 an event handler to the load event /oo whats for thats hacking... i never used jquery i don’t understand it /oo i don’t need it i built everything with js functions that i understand... /oo? And why you don’t tell them to make you a preload method to add the scripts into the header.
Load() {
preload();
....
*Hides in any javascript framework*
Who is better jQuery or Vuejs.js tell me how ?
nano tech Vue.js is better
This is what they don't teach you on bootcamps :)
Sometimes, html page is empty until js will be loaded 😐
Use defer in your script tag
Or you could go old school, and put your scripts at the end of the dom
I Don't get it!!!
i always uses the extreme one. but i never know that what i am doing is the fastest one.... its just becomes behaviour from the very beginning i learn JS 🤣
That's nice. I rarely see that technique in use!
this would be super useful if we were in 1930
Loading scripts "on load" kinda looks bad to me. Just personal opinion, don't eat me alive for it.
OPTIMIZE, in title
Nope, the Brits spell it with an S :)
en.wikipedia.org/wiki/American_and_British_English_spelling_differences#-ise,_-ize_(-isation,_-ization)
Nice :v
What about preload and prefetch ?!? and Jquery?? really....
jquery?
\*checks video's publishing date*
jquery? really? 😄
Seriously though: If you are concerned about your JS taking too much time to load, start with not using jQuery!
/oo 3:07 why are you moving the scripts into the body /oo? I always find this weired and against html logic /oo but people do this anyway, this is an html infraction to the html laws of w3 /ioo yes mr Bernlee /oo http is trash but html is good...
No wonder vscode is not used.. we hate vscode..
Noob google uses jquery boo boo
yeah. and after that they show how to do it with plain javascript.