Web Performance in 2018

on YouTube ↗46m

" summary

Sets a performance budget (interactive <5s on slow 3G) and builds a bank-like PWA using an app-shell that inlines critical HTML/CSS to ~50KB, loads modern JS with script type=module/no-module to save ~150KB across bundles, and uses dynamic import (webpack chunkName comments) to lazy-load features. Adds service worker for instant subsequent loads, web workers for heavy crypto off the main thread, measures with User Timing API, and observes real-device gains (example: ~900 KB/s, 40 ms latency considered).

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 2:39Constraints
3. 7:35Stages of usage
4. 8:34Importance of first load.
5. 18:12Watch the size of your app shell
6. 20:48Priority based loading
7. 25:12Variable fonts features
8. 26:09Demo
9. 35:31Use cases
10. 39:50Can the web do that?
11. 40:50default to JSON
12. 41:18Properly configure babel-preset-env
13. 42:00depends on your target market and your browser support policy

" related talks

• 26mWeb Performance in modern JavaScript worldFilip Rakowski · JavaScript fwdays'19
• 23mPerformance Optimizations for Progressive Web AppsChris Lorenzo · Node+JS Interactive 2018
• 51mAMP, PWAs, HTTP/2 and Service Workers: A New Era of Web Performance?F. Gessert · code.talks 2017
• 42mBuilding quick apps in 2018Ivan Akulov · CSS-Minsk-JS 2018
• 22mModern Web Apps Performance Tricks with PWA and VueFilip Rakowski · Vue.js Amsterdam 2019
• 36mNobody cares about web performance. It's hard, expensive and unneededVitalii Ruban · VinnytsiaJS 2021
• 29mBringing Mobile Web back to LifeImad Elyafi · Amsterdam JSNation Conference 2018
• 41mHow we make Web Apps lightning fast at Microsoft!Sean Thomas Larkin · Uphill Conf 2019