Top 10 performance pitfalls - HTTP 203

Jake & Surma go through the top 9 + 1 performance issues Jake saw while analyzing a bunch of web sites.
Who has the fastest F1 website? → goo.gle/3x0gr3T
Looking at the Google I/O website → goo.gle/3gQkN6J
Document readyState → goo.gle/3d3KS13
Massive inlined image → goo.gle/3qf3uAm
Inlined font in the Squoosh logo → goo.gle/3zLI3LS
Squoosh for optimising images → goo.gle/2OQBnGG
CSS aspect ratio → goo.gle/3gK8V7e
Font loading API → goo.gle/3gLBhOv
The old aspect ratio hack → goo.gle/3qf23lH
Code splitting → goo.gle/3xFZcom
WATCH OUR TALK → goo.gle/3j8xeNI
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP203Podcast
#HTTP203 #ChromeDeveloper #WebDev

[@iliankarasimirov9685]

Timestamps: 10. Sprites and icon fonts 2:40 9. DOM ready delay 5:49 8. Bad inlining 8:10 7. Big images 14:40 6. Loading main images with JavaScript 18:03 5. Primary resources on other origins 19:29 4. External font services 21:13 3. Layout instability 25:19 2. Over-bundling 28:25 1. Content revealed/loaded with JavaScript 31:12

[@Chris2phaBrown]

90% of the layout shift problems I see come from responsive adsense ads

[@locodev770]

you guys are awesome!, keep doing this videos please!

[@edikdeisling3192]

I really enjoy all of your videos. Thank you very much!

[@SebastianZartner]

Learned some new things again. Thank you so much for doing those great videos, Jake and Surma!

[@andreadoimo3468]

So many useful tips, thanks guys!

[@vitabramov89]

Woof was so hilarious! Love your videos!

[@MuhamedAlfaifi]

Thanks guys, this really helps 👏

[@derjansan9564]

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.

[@gathea1369]

Thanks a lot for this video which help me to improve my websites.

[@PedroFerrariWeb]

Thank you for sharing!

[@IslamIsDanger]

Great talk! :)

[@Jason821821]

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.

[@jakearchibald]

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.

[@Stoney_Eagle]

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

[@marble_wraith]

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?

[@RakeshKumar-bq3mf]

great tips.... helps a lot....thanks a ton :-)

[@shubhamlatiyan7972]

Awesome guys

[@ricardodesirat2590]

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

[@bas_kar_na_yar]

Jake Archibald is the only guy who can diss Google Sites.

[@Ostap1974]

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?

[@jakearchibald]

Most browsers support woff2, so I just use that. If I need to support IE9, I include the woff1 too.

[@MikeDelGaudio]

I need to use vanilla JS more!

[@technikhil314]

The media="all" is so brilliant I was staring at for whole 10 seconds.

[@mariancaikovski8638]

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.

[@jakearchibald]

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.

[@alystair]

surprise doggie break best break! 🐶

[@dave6012]

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?

[@boudyhesham5875]

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

[@jakearchibald]

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.

[@Manish-fm5iv]

I think Next JS 11 inline fonts but I think this was a calaboration with Google to bring these optimisation

[@jakearchibald]

uh oh I hope not! 😀

[@jamesredmonston]

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

[@Manish-fm5iv]

@@jamesredmonston Got it, thanks for the clarification.

[@ChandarSunderraj]

Aspect ratio didn’t work in safari, went for height:30vh; for a mobile menu layout

[@leonardolourencocrespilhoh511]

Jake, at 22min you said that cors requests uses different connections than non-cors. Could you point out some documentation about this? Tks!

[@jakearchibald]

Unfortunately the only thing I'm aware of is the fetch spec fetch.spec.whatwg.org/#concept-connection-obtain

[@yonoseespanol]

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?

[@jakearchibald]

Complexity of the SVG can definitely be an issue. We talked about this a bit in kzbin.info/www/bejne/fGLOinWkjpugrck

[@yonoseespanol]

​@@jakearchibald An excellent resource. That JPEG compression deep-dive was fascinating as well. Thank you Jake.

[@SimonBuchanNz]

How much would server push fix of these, if it were more usable? In particular I was thinking of the font server example.

[@jakearchibald]

I don't think server push is useful. No one's managed to get it to work well in production.

[@SimonBuchanNz]

@@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.

[@googars]

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]

The elements in the use shadow aren't selectable with CSS though static-misc-3.glitch.me/svg-use-test/

[@googars]

@@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.

[@DanielNoyola]

Which would be the best way to load a svg if you are using a js framework .?

[@jakearchibald]

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()

[@jurgentreep]

I know almost no one watches these but please keep making them :)

[@1xdeveloper]

You should get your vision tested, KZbin shows views right below the video

[@jakearchibald]

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.

[@DanielNoyola]

@@jakearchibald and don't forget about the podcast listeners 😉. I love the chemistry between you and Surma and the toilet stories

[@mariancaikovski8638]

@@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.

[@jakearchibald]

@@mariancaikovski8638 Don't worry about me, I'll be fine 😀

[@jarretoshea3560]

Liked for puppy photos

[@danielzaiser]

How do you prevent over bundling in Angular?

[@jakearchibald]

I'm not that familiar with Angular, but I believe it uses Webpack, so you can use Webpack's code splitting.

[@LewisCowles]

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.

[@jakearchibald]

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.

[@Dygear]

Script defer only runs when the DOM is ready. That's a fantastic point that I never knew!

[@beawatton]

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!

[@danielzaiser]

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

[@jakearchibald]

There are places in Android where it's bad too. The cast menu in particular.

[@beawatton]

@@jakearchibald Agreed. Similar to how the share menu behaved for the longest time

[@mutebg]

Wondering why the last few episodes are not added to the podcast?

[@jakearchibald]

The podcast and videos are different content

[@mutebg]

@@jakearchibald oh really, I always thought they are kind of the same thing with some cuts :D Great show anyway!

[@SeanGrimLink]

Svg use tag allows loading external svg files and is still customizable via CSS, so no JavaScript needed

[@jakearchibald]

I wish! Unfortunately that isn't how it works. Here's a demo static-misc-3.glitch.me/svg-use-test/

[@SeanGrimLink]

​@@jakearchibald yeah sadly not the svg elements inside the use

[@googars]

@@jakearchibald In Firefox both circles are green :) Maybe it would be fixed in Chrome sometime

[@jakearchibald]

​@@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"

[@googars]

@@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 🤷🏻‍♂️

[@DenisTRUFFAUT]

The best font being : system-ui

[@MaximeCHEVASSON]

A nice linted written article would be very appreciated, insta-favorite :)

[@jakearchibald]

Check the links in the description for the audits that lead to this summary (and other stuff)

[@unmy400]

i'm facing the same 99% unused css problem sigh..

[@RickBeacham]

I am assuming Mercedes would have the fastest website unless, they are being undercut....

[@mishasawangwan6652]

BURN

[@Dygear]

That was _awesome_. LOL

[@RickBeacham]

@@mishasawangwan6652 haha

[@gameryt3493]

👍👍👍

[@mfbx9da4]

What pitfalls would you fall into if you showed F1 websties?

[@bamber123]

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.

[@jakearchibald]

haha, basically the trouble I get into for my tweets multiplied by dollars

[@MaxCoplan]

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!!

[@jakearchibald]

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.

[@urbaniv]

Start using Purge CSS. It's so awesome that you can remove all unused CSS with one command. Especially when you use CSS frameworks

[@RickBeacham]

Checking this one out soon! Thanks for the pro tip.

[@0xedb]

png inlined inside an svg. good luck debugging

[@jakearchibald]

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.

[@0xedb]

@@jakearchibald interesting. i'll always have devtools opened

[@kimlouisemontesano3321]

and who are you making my life a living hell

[@eremitamatos8696]

Ok

[@AndrewBone]

Are you using a joycon as a clicker?!

[@jakearchibald]

Yep!

[@AndrewBone]

@Jake Archibald Just noticed you and Surma have one each in the Jamstack talk 😁

[@spicybaguette7706]

Maybe the Google IO will be used by archaeologists a millennium in the future as an actual Rosetta stone... Who knows?

[@stannone7272]

just "hop" band. not so "hip" ... 🥁

[@webappmapc]

hello

[@anmolkpop3743]

Please Improve Google Chrome UI😥😥❤️❤️🙏🙏

[@SimonBuchanNz]

Anything specific?