Complex JS-heavy Web Apps, Avoiding the Slow (Chrome Dev Summit 2018)

[@NerveClasp]

The best talk of the summit. Thanks!

[@gomidefabio]

Relevant, interesting, informative, and fun! Great presentation Mariko and Jake!

[@LookRainy]

wow is she using a Switch controller to control the slides?

[@jakearchibald]

We both are 😀

[@najiyoussefelhamdi2649]

@@jakearchibald that's actually amazing lol

[@stetoscomechannel5426]

@@najiyoussefelhamdi2649 The controllers have bluetooth I think so you should be able to use them with your laptop

[@ih8tusernam3s]

Jake's so humble yet knowledgeable.

[@ShahGhafoori]

It was so great to get to watch you guys do this live ( I was at the very front-row). Cant wait for Day 2 of the summit

[@SoyOscarRH]

Man, this talk make me smile and learn a lot, Thanks!

[@jamesxxxxxx]

OMG, I want to see this right, but my project's deadline is killing me.

[@phillee5531]

here...same...

[@AenGex]

Great use of the Joy-Cons there! Have you guys tried with the new Ivy renderer of Angular 7? I think you can get pretty similar results to Preact

[@K3dev]

Really good talk, I hope it get good exposure and more developers start applying this kind of optimizations.

[@sleeplessdev7204]

Great presentation! This really opened my eyes as to what's possible with web apps, and ways to improve my own applications. Explaining what special tools and frameworks they used and where to find them was really helpful, they make valuable additions to my bookmark library :3

[@sekiyika]

Jake still wore no shoes while presenting, haha

[@murderfromtheground]

27:42 is Jake not wearing any shoes??

[@jakearchibald]

You shoes you lose

[@chidinduogbonna5958]

Does this have an API, so it can be used through cloud functions before images are stored.

[@yasinyaqoobi]

I compress jpges with guetzli. Besides being faster does squoosh provide any other advantage for compressing jpegs?

[@jakearchibald]

I'd like to add Guetzli at some point, but I keep hearing the quality isn't much different to MozJPEG. Are you getting very different results?

[@yasinyaqoobi]

​@@jakearchibald No, I actually ran couple of tests right now and squoosh is doing better than guetzli (quality 75). I don't know if I am doing it wrong but guetzli's image size was 2.2mb and 914kb for squoosh. Not sure how you can run guetzli in the browser. It takes 5 - 10 mins to compress an 8mb image on my iMac. Link to image: stag.cyberserge.com/xlarge-blue-lamp-01.jpg

[@jakearchibald]

@@yasinyaqoobi different codecs might have a different interpretation of what "75" means in terms of quality. The best judge is the eye.

[@karansapolia2676]

This was such a helpful demonstration! Thank you 😊

[@anticom1337]

Only 27 minutes into the presentation i noticed that jake isn't wearing shoes :O

[@dan-garden]

This idea should be implemented in a neural network to generate the best quality with the lowest filesize.

[@sekiyika]

Great work!

[@MikesGlitch]

23:25 I love how they're using React instead of Angular

[@jakearchibald]

We're using Preact which is much smaller than React.

[@duplexnavigator]

@@jakearchibald This is the best talk I've seen this year, and I've seen _a lot_. Great work you two. Also, go Preact!

[@youcaio]

Jake's humor is Unesco World Heritage stuff. (truly inspiring and kinda fascinating talk, btw)

[@jakearchibald]

I have no idea what that is but I'm going to pretend it's a good thing.

[@nielsvanderveer]

Just realised on 27:46 the guy is presenting on socks. Like it +1

[@Henrik0x7F]

Read the first sentence in the description

[@abhijeet1abhijeet]

I Need this now !

[@hobbyturystaSEO]

how about new html tag

[@dmitri88888]

Loved it!

[@MrMaxtermax]

Awesome!!

[@SteveUrlz]

hehe I love that presentation style :P

[@sorenahlback1307]

Why is this better than compressing with Photoshop?

[@jakearchibald]

Photoshops codecs are trash (this is covered in the talk)

[@pardal_bs]

They're using Nintendo Switch controllers to pass the slides. What?

[@JustJohnny]

I'm guessing everyone and their mother is trying to use squoosh right now. It's slower than molasses.

[@jakearchibald]

Slow to load, or slow to compress images? It shouldn't be slow to load, it's 15k to first interaction. Compression time depends on the codec, settings, size of image, plus the capability of your device. Compression is done locally, so there's no contention with other users.

[@JustJohnny]

@@jakearchibald When I selected one of the default images provided, it sat there for a very long time. So long (over a minute), I went into another tab to do other things. However, I just tried it and it seems to be moving very quickly now. Could have just been a fluke. Looks nice, I'll test it a few more times and probably suggest it to clients for image compression.

[@staskh]

Joke Archibald

[@jakearchibald]

That's what my mum calls me

[@cedpoilly]

💚

[@AungBaw]

Funny and awesome

[@alexgalays910]

Very nice and entertaining talk. Agreed about React & co being too big. React DOM code "fire" might bring it to a more acceptable level though, but probably will never be as small as you guys want: github.com/facebook/react/issues/13525 Also keep in mind that optimizing for downloaded bytes is great but it's not the whole story. React does a few interesting things so that the UI is less often blocked (update priorities) and has a few tricks to improve perceived performances (suspense)

[@jakearchibald]

We're measuring time to interaction, not just bytes

[@alexgalays910]

Absolutely, I should have been clearer. React supposedly do things that improves perceived performances once the app is hot and runs. Whether it's more important than the first load probably depends on what kind of app it is, how long you use it at a time, etc. I wonder how much react instead of preact would disturb that

[@bibekthapa9468]

he donot have shoes

[@jakearchibald]

I'm hoping to get some for Christmas

[@bibekthapa9468]

@@jakearchibald donot do that people who donot wear shoe are genius

[@billlee8881]

Does anybody noticed ,they use Nintendo controllers as pointer.

[@ranbuch]

I really wish there was an easy way to use this tool as a library with an API That way we could compress images before the user is uploading them to the server 🤔

[@dinoscheidt]

15:36 shows the code - you can simply use the wasm file of optipng in your client side code. Its right here: github.com/GoogleChromeLabs/squoosh/tree/master/codecs/optipng Check out example.html

[@B1FREQUENCY]

I live to FAIL HARD AND FAST....SO THAT I CAN FINALLY REBEGIN AGAIN😀

[@Steve-Richter]

The western guy explained things much better. Why does politically correct have to be shoved down everyone’s throat?

[@aprilmintacpineda2713]

Loved it!

[@billlee8881]

Does anybody noticed ,they use Nintendo controllers as pointer.

[@jakearchibald]

They did now!