Sam explains how to get the browser to do things under budget – script and resource loading and more.
Instant Loading with Service Workers: goo.gl/wNtKkx
Watch more recordings from Chrome Dev Summit ’16 at: goo.gl/TkgXYM
Subscribe to the channel: www.youtube.com/chromedevelopers
Music by Terra Monk: goo.gl/xolmTV
15 Comments on "Planning for Performance: PRPL (Chrome Dev Summit 2016)"
Great Video. I learned 3 things : – Preload all ressources (in the main document or, even better, with HTTP/2 Push)- HTTP/2 Push is only OK when combined with service worker- Downloading JS assets at the good moment is fine, but parsing them at the good moment is betterJust tested preload out of the box : For the first meaningful paint, preload is a minimal effort that leads to huge improvements. Nice tip !
rel="preload" is certainly a good catch, but it seems that:« Omitting the 'as' attribute, or having an invalid value is equivalent to an XHR request, where the browser doesn’t know what it is fetching, and fetches it with a fairly low priority. »www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/Furthermore, it seems strange that a production web app would fetch so many separated scripts, when minification/concatenation should have taken care of most of the assets in one request.
+Denis TRUFFAUT — OK, I see. I guess you can't have it all. It's either WebComponents or minified, concatenated JS bundle. Makes sense.
So many separated scripts : Nope, It's normal. The shop App is based on Polymer, which is based on WebComponents. WebComponents rely on html imports, which means they have fine control and high granularity of what is cached on the page. You can see them as widgets.
Where can I enable the "V8 internal metrics in timeline" as they are shown in the presentation?I have enabled "Developer tools experiments" but I don't see any experiment in dev-tools that would somehow be related to V8 internal metrics …
@Linus Lee: Yes. Current Chrome Canary: Version 57.0.2926.0 canary (64-bit) … is it working for you?
Jonas Bandi are you on chrome canary?
yaeh, same about paint time pane
this 'server push' thing keeps getting glossed over….how to make a server actually do that? does anyone know of a presentation that explains how that is done?
You can also experiment with HTTP/2 Server Push using Firebase Hosting (for free). Check out this article firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html
Hey David – if you use Node.js, check out this article that talks you through it – deanhume.com/Home/BlogPost/getting-started-with-http-2-and-server-push/10152
It depends on your server's technology stack. HTTP2 is not magic, its a protocol, so its mainly a matter of your http server supporting it. Chances are that you are either use nginx or apache. So take a look at these links:nginx: www.nginx.com/blog/http2-r7/apache: httpd.apache.org/docs/trunk/mod/mod_http2.html
+1 would watch again
In CodeChannels.com, you can learn to code by watching videos and stay up to date with latest code shows, events and tutorials aggregated from various leading developer communities.
Copyright 2016 By CodeChannels.com All rights reserved.