Hav you guys heard of SVG injection? There are tiny libraries that will load external SVGs and automatically inline them. They also make the IDs unique, which is necessary if you use gradients, clip paths, etc. inside the SVG.
How would you use web components in a performant way, since they rely on JavaScript to render? Also putting things in slots that you intend to be hidden (like a drop-down menu) cause layout shift. I usually add an attribute "cloak" with a corresponding CSS rule of display none and subsequently remove that attribute in my web component.
There's declarative shadow DOM now web.dev/declarative-shadow-dom/. But until that's available everywhere, you can hide stuff until it's slotted using the :defined pseudo class. Just treat it like other bits of JS-enhanced areas and ensure it doesn't shift when enhanced.
We really enjoyed Jurgen's comment 😀. We've joked before that we don't get the 100k+ views of some tech videos, but we're really happy just doing what we do. I guess we could get more views if we targeted things at framework developers specifically, but it's not what we're interested in.
@@jakearchibald I imagine Google pays you salary for your videos regardless of the view count. So the views do not matter. Still thousands of people appreciate your enlightening videos. But if you ever get fired from google you it might be hard to find a job because you never admire google-sponsored and popularized frameworks.
It inlines the content of external font CSS files (like Google Fonts), not the actual font files themselves - to save on a round trip. It also adds a preconnect link for the gstatic domain, so the connection is (hopefully) already sorted once the fonts start downloading
Interesting talk. But what do you think of gmail? It could have been the most shocking example for your video. Do you remember how it was before 2018? One could simply open the inbox. Why does it take so much time to access the inbox now? In the morning it can take over 30 seconds and sometimes the page displaying letter M stops responding and has to be reloaded.
It's always been slow to boot up. Lots of slow sites use it as an example of "look, but gmail does it", but it's kinda terrible that gmail needs to show a loading bar to display a list of email subjects. Like I've said elsewhere, a loading bar is just an apology for being too slow. Gmail gets away with it, because desktop users leave it open. That isn't a bet a lot of websites get to make, and no one gets to make it on mobile.
Surma said something I don't know to be true, which is that by default the browser looks for an index.html file. I'm fairly certain that the server specifies the default document and a browser is a dumb-as-heck box that gives you exactly what you ask for. Deferring to server, in cases where `/` resolves to `/index.html` and other things like this.
Google font script seems quite smart, resulting different font files per platform therefore saving bandwidth. Any good reference to recommended way to migrate Google fonts to own server?
hey jake and suma i love your videos, but jake you said that loading images with javascript is bad for performance but the example u used was with div what if i used it with img tag if i have carousel i will use the lazy loading on the carousel images that are not in the viewport
If JS is adding the image to the page, it means the browser can't start downloading the image until the JS has downloaded and executed. This is pretty bad performance-wise for in-viewport images.
Just a bit of feedback regarding layout instability… Google does this and it infuriates me. Often I’ll do a search and just as I’m clicking on a result, Google will show its little ‘alternative queries’ UI (I can’t remember exactly what it’s called). This then leads to me accidentally clicking on an alternate query, when I actually intended to click on a result. Frustrating!
Oh yes, totally agree, happened to me more times than I'd like to admit, so now i always waste precious seconds to wait for it to maybe appear before actually clicking on a link
I wonder how you guys, as chrome developers, feel about lighthouse. Do you use it to benchmark your sites? Is it generally a trusted resource, or is it a little nice-to-have that nobody really takes seriously? I know I’ve spent a lot of time optimizing for a better lighthouse score, but I wonder if Jake and Surma were to visit one of my webapps, would they have similar performance complaints, despite getting 90+ in the performance score?
If you use SVG "use" tag you still have the ability to control it with CSS, and the file itself is being requested only 1 time per page. I just give id="svg" attribute to svg tag in the file itself and use it like "img/some-image.svg#svg". The id="svg" is in shadow so there are no collisions with other ids and I don't have to bother with inventing id for every image. I think it even can be automated somehow.
@@jakearchibald Yep, you’re right. But I still can control the color of the whole SVG. In my practice they are being used mostly for icons, so it’s just enough. In veeery rare cases of some custom SVGs I can still inline them and have a full control.
@@googars What makes you assume Firefox is correct here? From the spec svgwg.org/svg2-draft/struct.html#UseStyleInheritance "elements in the shadow tree inherit styles from its host ‘use’ element, but that style rules defined in the outer document do not match the elements in the shadow tree"
@@jakearchibald I don’t assume it’s correct or not. I just want to have the same ability of controlling external SVGs as with inlined ones. Maybe there will be some other better solution in the future, who knows 🤷🏻♂️
@@jakearchibald Wow, looking into it there's a whole world of scene drama around push I didn't hear the half of! Apologies if I made any hairs fall out, it was only a lot of these examples just reminded me of what was being talked about when http2 was finalized. I found a bunch of other interesting things like server-sent events aka EventSource though, so not too negative an outcome.
Something I've been a little unclear on: if you have a 50kb SVG file that has a several thousand points, is it mainly the size of the svg that hitches performance, or can the vertex count cause performance hitches?
An is the simplest way, but if you need it to be part of the page (for CSS reasons), you can bundle it if it's tiny, but be careful. Otherwise, you can lazy-load the component using import()
At 20:00 is this an argument against CDNs in general? If I'm hosting on-prem servers, or can't afford the fanciest GCP plans, then wouldn't it be a good idea to try to offload as much of the content as I can? Offload it to places that are more likely to have closer locality to the users? I suppose the same logic applies to third-party fonts, images, etc.. As a specific example, let's use your example of people in India on 3G. If I'm hosting on-prem servers in the US, or only have GCP in the US for budgetary reasons, and assuming services like unpkg are scaled out globally, then letting 3G Indian users fetch `idb-keyval` from unpkg sounds like a good idea. Thanks for reading this long question, love the show!!
Setting up a new connection on 3G is pretty costly in terms of time, so reducing the number of connections needed really benefits 3G users. This isn't an argument against CDNs, but it's an argument against separate servers for important/blocking content. For instance, your whole site could be behind a CDN - that's great. Having to create multiple connections for important/blocking content - not so great.
I imagine… Jake says "Blue team website is a tad slow and has room to optimise here and here." This is an official Google channel, so that becomes "Google says …". Blue team are upset that "Google says bad things about their website" - and their legal team talk with Google about defamation/etc, or might take issue with continuing use of Google products like ads or G Suite. Red team spots this happening and says "Breaking news: Google analysis shows Red team are faster than Blue team". Context is lost. Things get blown out of proportion.
![ลองสุ่มไอโฟน 990 โกงมั้ย? [ โกงมั้ยครับ ep.101 ] | DOM](http://i.ytimg.com/vi/bfsWe0j492k/mqdefault.jpg)
90% of the layout shift problems I see come from responsive adsense ads
you guys are awesome!, keep doing this videos please!
The media="all" is so brilliant I was staring at for whole 10 seconds.
Learned some new things again. Thank you so much for doing those great videos, Jake and Surma!
Hav you guys heard of SVG injection? There are tiny libraries that will load external SVGs and automatically inline them. They also make the IDs unique, which is necessary if you use gradients, clip paths, etc. inside the SVG.
I really enjoy all of your videos. Thank you very much!
So many useful tips, thanks guys!
Woof was so hilarious! Love your videos!
How would you use web components in a performant way, since they rely on JavaScript to render? Also putting things in slots that you intend to be hidden (like a drop-down menu) cause layout shift. I usually add an attribute "cloak" with a corresponding CSS rule of display none and subsequently remove that attribute in my web component.
There's declarative shadow DOM now web.dev/declarative-shadow-dom/. But until that's available everywhere, you can hide stuff until it's slotted using the :defined pseudo class. Just treat it like other bits of JS-enhanced areas and ensure it doesn't shift when enhanced.
Jake Archibald is the only guy who can diss Google Sites.
I know almost no one watches these but please keep making them :)
You should get your vision tested, TH-cam shows views right below the video
We really enjoyed Jurgen's comment 😀. We've joked before that we don't get the 100k+ views of some tech videos, but we're really happy just doing what we do. I guess we could get more views if we targeted things at framework developers specifically, but it's not what we're interested in.
@@jakearchibald and don't forget about the podcast listeners 😉. I love the chemistry between you and Surma and the toilet stories
@@jakearchibald I imagine Google pays you salary for your videos regardless of the view count. So the views do not matter. Still thousands of people appreciate your enlightening videos. But if you ever get fired from google you it might be hard to find a job because you never admire google-sponsored and popularized frameworks.
@@mariancaikovski8638 Don't worry about me, I'll be fine 😀
I use my SVG brand logo as in line so I can control the color based on the users theme and the subtext translation. 😊 The logo has the NM from my
Thanks guys, this really helps 👏
I think Next JS 11 inline fonts but I think this was a calaboration with Google to bring these optimisation
uh oh I hope not! 😀
It inlines the content of external font CSS files (like Google Fonts), not the actual font files themselves - to save on a round trip. It also adds a preconnect link for the gstatic domain, so the connection is (hopefully) already sorted once the fonts start downloading
@@jamesredmonston Got it, thanks for the clarification.
surprise doggie break best break! 🐶
Script defer only runs when the DOM is ready. That's a fantastic point that I never knew!
Liked for puppy photos
I need to use vanilla JS more!
Interesting talk. But what do you think of gmail? It could have been the most shocking example for your video. Do you remember how it was before 2018? One could simply open the inbox. Why does it take so much time to access the inbox now? In the morning it can take over 30 seconds and sometimes the page displaying letter M stops responding and has to be reloaded.
It's always been slow to boot up. Lots of slow sites use it as an example of "look, but gmail does it", but it's kinda terrible that gmail needs to show a loading bar to display a list of email subjects. Like I've said elsewhere, a loading bar is just an apology for being too slow. Gmail gets away with it, because desktop users leave it open. That isn't a bet a lot of websites get to make, and no one gets to make it on mobile.
Thanks a lot for this video which help me to improve my websites.
11:42 - "Have an SVG come from an external file, but also be affected by your CSS" - i was under the impression you could do this with the tag?
Imagining img loading=lazy will be a browser´s default, "loading" could have a new value.. 0(fcp, no lazy), 1, 2, 3 - indicating priority
I am assuming Mercedes would have the fastest website unless, they are being undercut....
BURN
That was _awesome_. LOL
@@mishasawangwan6652 haha
Thank you for sharing!
Surma said something I don't know to be true, which is that by default the browser looks for an index.html file. I'm fairly certain that the server specifies the default document and a browser is a dumb-as-heck box that gives you exactly what you ask for. Deferring to server, in cases where `/` resolves to `/index.html` and other things like this.
I can't remember that bit of the video, but yeah, the decision to serve /index.html in response to / is entirely a server decision.
Google font script seems quite smart, resulting different font files per platform therefore saving bandwidth. Any good reference to recommended way to migrate Google fonts to own server?
Most browsers support woff2, so I just use that. If I need to support IE9, I include the woff1 too.
great tips.... helps a lot....thanks a ton :-)
hey jake and suma i love your videos, but jake you said that loading images with javascript is bad for performance but the example u used was with div what if i used it with img tag if i have carousel i will use the lazy loading on the carousel images that are not in the viewport
If JS is adding the image to the page, it means the browser can't start downloading the image until the JS has downloaded and executed. This is pretty bad performance-wise for in-viewport images.
Jake, at 22min you said that cors requests uses different connections than non-cors. Could you point out some documentation about this? Tks!
Unfortunately the only thing I'm aware of is the fetch spec fetch.spec.whatwg.org/#concept-connection-obtain
Aspect ratio didn’t work in safari, went for height:30vh; for a mobile menu layout
Just a bit of feedback regarding layout instability… Google does this and it infuriates me. Often I’ll do a search and just as I’m clicking on a result, Google will show its little ‘alternative queries’ UI (I can’t remember exactly what it’s called). This then leads to me accidentally clicking on an alternate query, when I actually intended to click on a result. Frustrating!
Oh yes, totally agree, happened to me more times than I'd like to admit, so now i always waste precious seconds to wait for it to maybe appear before actually clicking on a link
There are places in Android where it's bad too. The cast menu in particular.
@@jakearchibald Agreed. Similar to how the share menu behaved for the longest time
I wonder how you guys, as chrome developers, feel about lighthouse. Do you use it to benchmark your sites? Is it generally a trusted resource, or is it a little nice-to-have that nobody really takes seriously?
I know I’ve spent a lot of time optimizing for a better lighthouse score, but I wonder if Jake and Surma were to visit one of my webapps, would they have similar performance complaints, despite getting 90+ in the performance score?
If you use SVG "use" tag you still have the ability to control it with CSS, and the file itself is being requested only 1 time per page. I just give id="svg" attribute to svg tag in the file itself and use it like "img/some-image.svg#svg". The id="svg" is in shadow so there are no collisions with other ids and I don't have to bother with inventing id for every image. I think it even can be automated somehow.
The elements in the use shadow aren't selectable with CSS though static-misc-3.glitch.me/svg-use-test/
@@jakearchibald Yep, you’re right. But I still can control the color of the whole SVG. In my practice they are being used mostly for icons, so it’s just enough. In veeery rare cases of some custom SVGs I can still inline them and have a full control.
Awesome guys
How do you prevent over bundling in Angular?
I'm not that familiar with Angular, but I believe it uses Webpack, so you can use Webpack's code splitting.
The best font being : system-ui
Start using Purge CSS. It's so awesome that you can remove all unused CSS with one command. Especially when you use CSS frameworks
Checking this one out soon! Thanks for the pro tip.
Wondering why the last few episodes are not added to the podcast?
The podcast and videos are different content
@@jakearchibald oh really, I always thought they are kind of the same thing with some cuts :D Great show anyway!
Svg use tag allows loading external svg files and is still customizable via CSS, so no JavaScript needed
I wish! Unfortunately that isn't how it works. Here's a demo static-misc-3.glitch.me/svg-use-test/
@@jakearchibald yeah sadly not the svg elements inside the use
@@jakearchibald In Firefox both circles are green :) Maybe it would be fixed in Chrome sometime
@@googars What makes you assume Firefox is correct here? From the spec svgwg.org/svg2-draft/struct.html#UseStyleInheritance "elements in the shadow tree inherit styles from its host ‘use’ element, but that style rules defined in the outer document do not match the elements in the shadow tree"
@@jakearchibald I don’t assume it’s correct or not. I just want to have the same ability of controlling external SVGs as with inlined ones. Maybe there will be some other better solution in the future, who knows 🤷🏻♂️
How much would server push fix of these, if it were more usable? In particular I was thinking of the font server example.
I don't think server push is useful. No one's managed to get it to work well in production.
@@jakearchibald Wow, looking into it there's a whole world of scene drama around push I didn't hear the half of! Apologies if I made any hairs fall out, it was only a lot of these examples just reminded me of what was being talked about when http2 was finalized. I found a bunch of other interesting things like server-sent events aka EventSource though, so not too negative an outcome.
Something I've been a little unclear on: if you have a 50kb SVG file that has a several thousand points, is it mainly the size of the svg that hitches performance, or can the vertex count cause performance hitches?
Complexity of the SVG can definitely be an issue. We talked about this a bit in th-cam.com/video/F1kYBnY6mwg/w-d-xo.html
@@jakearchibald An excellent resource. That JPEG compression deep-dive was fascinating as well. Thank you Jake.
Which would be the best way to load a svg if you are using a js framework .?
An is the simplest way, but if you need it to be part of the page (for CSS reasons), you can bundle it if it's tiny, but be careful. Otherwise, you can lazy-load the component using import()
and who are you making my life a living hell
A nice linted written article would be very appreciated, insta-favorite :)
Check the links in the description for the audits that lead to this summary (and other stuff)
At 20:00 is this an argument against CDNs in general? If I'm hosting on-prem servers, or can't afford the fanciest GCP plans, then wouldn't it be a good idea to try to offload as much of the content as I can? Offload it to places that are more likely to have closer locality to the users? I suppose the same logic applies to third-party fonts, images, etc..
As a specific example, let's use your example of people in India on 3G. If I'm hosting on-prem servers in the US, or only have GCP in the US for budgetary reasons, and assuming services like unpkg are scaled out globally, then letting 3G Indian users fetch `idb-keyval` from unpkg sounds like a good idea.
Thanks for reading this long question, love the show!!
Setting up a new connection on 3G is pretty costly in terms of time, so reducing the number of connections needed really benefits 3G users. This isn't an argument against CDNs, but it's an argument against separate servers for important/blocking content. For instance, your whole site could be behind a CDN - that's great. Having to create multiple connections for important/blocking content - not so great.
Maybe the Google IO will be used by archaeologists a millennium in the future as an actual Rosetta stone... Who knows?
png inlined inside an svg. good luck debugging
And the SVG was in JavaScript! The thing that gave it away is the JS was 3mb with high coverage and gzip wasn't making much of a dent.
@@jakearchibald interesting. i'll always have devtools opened
i'm facing the same 99% unused css problem sigh..
👍👍👍
What pitfalls would you fall into if you showed F1 websties?
I imagine… Jake says "Blue team website is a tad slow and has room to optimise here and here." This is an official Google channel, so that becomes "Google says …". Blue team are upset that "Google says bad things about their website" - and their legal team talk with Google about defamation/etc, or might take issue with continuing use of Google products like ads or G Suite. Red team spots this happening and says "Breaking news: Google analysis shows Red team are faster than Blue team". Context is lost. Things get blown out of proportion.
haha, basically the trouble I get into for my tweets multiplied by dollars
Are you using a joycon as a clicker?!
Yep!
@Jake Archibald Just noticed you and Surma have one each in the Jamstack talk 😁
just "hop" band. not so "hip" ... 🥁
Ok
hello
Please Improve Google Chrome UI😥😥❤️❤️🙏🙏
Anything specific?