Beyond fast with new performance features

A whirlwind tour of new features and proposals to improve the performance of your pages.
Thank you for visiting this, the description! Here are some links to further information, that you can click with your finger, mouse pointer, or pen!
content-visibility:
web.dev article → goo.gle/3digQ8y
HTTP 203 episode → goo.gle/3pXaKR6
HTML spec demo → goo.gle/34QX5B1
Spec → goo.gle/371HLmh
F-mods:
Explainer & demos → goo.gle/2J0xH4J
Spec → goo.gle/370XDFP
BFCache:
Dos and don't → goo.gle/3mGTSfr
Portals:
Explainer → goo.gle/338db9B
The flags are #enable-portals, and #enable-portals-cross-origin
Misc:
Third party storage → goo.gle/2KxG88l
Preloading → goo.gle/2UYko7v
Quicklink → goo.gle/3mddrLK
Thanks in advance for clicking these links to further information found here in the description!
Speaker: Jake Archibald
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-...
#chromedevsummit #chrome #webvitals
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Jake Archibald;

[@Fry981]

*sigh* if only there was a way to find out further information about these topics :-/

[@daniyelme9535]

I wish they have added it to the description ;)

[@neryortez6835]

I wonder if they would be clickable

[@BillyHarvey]

We should call them litd for brevity!

[@lukasseifert2228]

There are some links in the description

[@taskforce_kerim]

I like the transparency about Chrome being behind for once when it comes to faster rendering of previous pages when going back by saving them in memory.

[@MarshallBrandt]

Portals seem really cool! Definitely a step towards a more native-like and smooth experience on the web

[@LarsRyeJeppesen]

... for the people who haven't moved to SPAs

[@victornpb]

They are like 2020 version of pop ups. You’re gonna browse random websites and floating portals will try to stay under your cursor.

[@jadedtheredone]

I hope this will also help using microservices on frontend level, allowing to use multiple frameworks on different components.

[@Apolochon]

@@jadedtheredone How many frameworks do you really need ? What's the points of all the effort to make the web more lightweight and efficient when devs' no.1 solution is to add stuff instead of fixing what they already have

[@jadedtheredone]

@@Apolochon the cause of my idea is actually for switching technologies, or collaborating with other parties. another team specialized with another type of framework can also develop other components on the same project without breaking integrity.this principle was actually introduced by using , yet it wasn't a nice solution. So maybe portal can help it.

[@OwenCampbellMoore]

Wow! This is probably the most exciting video I’ve seen about web dev this year. Huge thanks to everyone that helped standardize and ship these new features!

[@ErikGullberg]

Jake: Here are css properties that make text display the same on different browsers. also Jake: It's only supported in one browser.

[@jakearchibald]

That was the joke 😀

[@ErikGullberg]

@@jakearchibald And a good one at that. I've never laughed so hard watching this channel. Keep it up!

[@mustafwm]

:\

[@chiboymarcel527]

The portal concept is really awesome, I have been tinkering on how to give the mobile web a clean transition we have on native apps. And the best part is that it is only interactive when activated. Although the users getting some visible notification on the URL change when portals are activated will enhance the security in chrome.

[@adityapoddar3798]

layout shift preventing awesome with f-mods. Thanks Chrome Dev Team. Great Work

[@jakearchibald]

Clarification: The layout-shift-preventing benefits of f-mods only apply when you're using line-height "normal", whiiiich you probably aren't. The main benefit of f-mods right now is in controlling the metrics around the baseline. The layout-shift-preventing parts will be much more powerful when we can do something more with letter widths.

[@omri9325]

Monospace all the fonts!

[@qzbnyv]

Noooo @@omri9325 I bet you use Vim or Emacs and IRC is your preferred communication tool. ;)

[@wheatley6544]

I read "Clarification" and immediately expected the text after to be something along the lines of "The further information mentioned in the video can be found behind the links in the description..."

[@jakearchibald]

@@wheatley6544 hah I missed a trick there

[@danielbocelli]

Jake is so entertaining to watch!

[@dinoscheidt]

Could listen to Jake all day. Also props to the Video Animation & Illustration peeps behind the scene. 🖌

[@jakearchibald]

I am the animation and illustration peeps 😀 (aside from the intro and outro branded anims). All anims were done in the browser.

[@dinoscheidt]

@@jakearchibald 😅 time to share your dribbble account

[@Netrole]

PSA: There are links in the description, these are to be clicked for further information.

[@patricknelson]

6:57 - Hah! Every time you said “I know what you’re thinking,” that’s exactly what I was thinking. 😆 While I do think portals can be helpful, I prefer anchor tags with direct href’s to the content I want to load. Hopefully people will use that pattern (e.g. so you can still middle click or right click open new tab, right click copy URL, etc) I hope it doesn’t result in the anti patterns of devs relying solely on JS (e.g. so you have lots of javascript:; in anchors or clickable elements that may not be natively clickable or focusable, etc) who are implementing these new portals. This is why I like service workers which work at the network level to help cache content ahead of time; albeit that’s a bit more complex to implement. If done right, portals can probably be an even easier way to accomplish a similar result while maintaining good fallback functionality (safe degradation).

[@jakearchibald]

fwiw, portals will have a default click behaviour which activates the portal. You raise a good question about middle click though.

[@jonsplex]

It's simple enough to add a middle-click event listener for the time being. 🤷‍♂️

[@SylwesterKogowski]

As far as portals go, it will probably a nice feature for injectable widgets. The problem with widgets that are injectable into some other page is that the other page may be full of animations and movies and if the widget is also heavy for the processor, then weaker phones will suddenly get extremely sluggish. If one could use such a portal to freeze the background page while the widget takes over the interaction, then it would really help.

[@Y390R]

portals are mind-blowing

[@nevinkuser9892]

Woah dude.

[@dasten123]

I like how he is playing a Switch game with only one joy-con while giving this presentation. That's true skill.

[@chinmayk8004]

He's changing slides... He talks about this in his podcast HTTP203

[@dasten123]

@@chinmayk8004 No my dude, you are mistaken.

[@anticom1337]

11:11 Am I the only one that thought for a split second Jake was using a Switch controller as presentation clicker? :D But seriously, I'm really excited, that portals are not dead!

[@jakearchibald]

I am 😀

[@alainalvarez5876]

Amazing video!!! Where can I get the blue background of the presentation, I love it!!!!

[@paulschreiber]

I like this guy.

[@DenisTRUFFAUT]

Portals are a good fit for MPA and SSR apps. On the other hand, PWA is still the holy grail for bandwidth saves (but needs more work)

[@dassurma]

A MPA can be a PWA. They are not mutually exclusive.

[@ihateidiots9484]

Back to 90's...let's the browsers war begin and the frontend nightmare start!

[@bramus]

Where can I find links to pages with more information? 🙃

[@Krilllind]

Not sure if I understood but you said something about the description?

[@marcusbrsp]

Great stuff! But how on earth can I get further information on these topics?

[@victornpb]

I saw the future of Portals. I think I’m gonna be the first developer to make a portal-blocker extension 😅.

[@victornpb]

I know that feature is kind novel but I’m sure it’s going to be abused, by shopping websites, news blogs and ad networks.

[@dassurma]

@@victornpb Can you elaborate how you envision that abuse to work? It’s a feature developed within the W3C, and everyone participating has privacy and security front of mind.

[@VarunGupta3009]

I really love portals and have been using it since it was released in 85, but unfortunately, it has not made its way into stable yet :(

[@rickvian]

I have question, the container intrinsic size HEIGHT is a fixed number, what if the container is responsive designed? do we put different intrinsic-size with media query?

[@jakearchibald]

You can. You can also use other units like vw vh em etc

[@enjikaka]

I never manage to spell "intrinsic" correct. Can we change that to something writeable?

[@ipsb]

He said chrome will save the previous page in "memory" it implies that chrome is now even more RAM hungry than never before😂 Correct me if am wrong.

[@anuraghazra4772]

damn you are probably correct. lol

[@akashmilton]

Does the content-visibility support list item? Like if I have 600 items in a list It loads only those in the viewport. IF so it will be those virtualized list/ react-window killer

[@jakearchibald]

Yeah, it works with list items. It still loads all of the list items, but it won't have to perform layout on them.

[@jakearchibald]

@@DennisJ42 right, but if your CSS selector is "li" then it's applying to all the list items.

[@phillussporrus]

I was playing around with content-visibility a bit and found that when scrolling to the bottom of the page so that areas further up the page get hidden again, the page would jump whenever the contain-intrinsic-size value didn't exactly match the area's height. Is there a way to prevent that?

[@jakearchibald]

Does this happen in Canary too? Some bugs have been fixed. If not, can you create a public demo of the issue? I can file the bug for it.

[@conelatilot]

seen an unrelated talk about portals, sad that its still behind a flag

[@YinonOved]

epic ending 😹

[@shubhidimri]

when you say chrome, does it also mean chromium?

[@jakearchibald]

Yep!

[@samundramanshrestha9190]

so much

[@faheemahmadofficial7701]

just give us better an dfaste PWA's and Flutter Web final version

[@peterdenham]

What are you using that switch controller for? 😂

[@jakearchibald]

To change slides

[@tonyng1126]

pagehide and pageshow are not new things, they have been there long time ago. SImiliar with prefetch and preload

[@YahyaRahimov]

Beyond fast! And eats more RAM