Web Performance Optimization

Web Performance & Optimization - Images, Fonts, JavaScript

Transcript

1. Web Performance Optimization Images, Fonts, JavaScript
2. STAY AWAKE!
3. @JecelynYeen Software Architect Google Developer Expert - Angular - Web Technologies Director - NG-MY 2019 - Women Who Code KL
4. #ngMY2019, July 6-7 400+ ppl, 30+ countries
5. Feeling of browsing slow website...
6. To make our users happy, having pleasant browsing experience.
7. Page speed matters to SEO Page Ranking https://webmasters.googleblog.com/2018/01/u sing-page-speed-in-mobile-search.html
8. But it takes a lot of effort to do so. Building features is more important… SEO doesn’t matter...
9. Speed is basic need, it is a FEATURE. No excuses.
10. - Measure & Monitor - Optimization - Summary
11. 11 Measure & Monitor
12. Measure Page Performance Lighthouse | PageSpeed Insights | Web Page Test
14. Automate performance measurement & monitoring
15. npm install lighthouse Install Lighthouse Set your performance budget budget.json
16. [ { "resourceSizes": [ { "resourceType": "script", "budget": 309 }, { "resourceType": "total", "budget": 500 } ], "resourceCounts": [ { "resourceType": "third-party", "budget": 10 } ] } ] Define performance budget in budget.json
17. lighthouse https://example.com --budget-path=./budget.json Integrate and run in your CI/CD
18. https://developers.google.com/web/tools/li ghthouse/audits/budgets
19. 19 Optimize & Get Fast
20. Page Weight (Mobile) http://bit.ly/mobile-page-weight
21. ➔ Images ➔ Fonts ➔ JavaScript
22. Images
23. 5MB Images a page Data Plan
24. SVG
25. 32kb
26. NPM: https://www.npmjs.com/package/svgo UI: https://jakearchibald.github.io/svgomg/ Optimize SVG with SVGOMG 32kb -> 2kb (879B)
27. Like PNG but smaller
28. WebP Images are 25-35% smaller than equivalent JPEG 0r PNG.
29. 78% Global User WebP Has arrived Based on data from caniuse Source: bit.ly/webp-support Supported Supported Supported ?
30. .png - 119 kb .webp - 28 kb .png - 278 kb .webp - 30 kb
31. Serve WebP and support browsers <picture> <source srcset="teh-tarik.webp" type="image/webp"> <img src="teh-tarik.png"> </picture> Image container If browser supports WebP Else PNG it is
32. Image Compression
33. Lossy Image For most images, 80-85% quality will reduce file size by 30-40% with minimal effect on image quality
34. 495 kb 180 kb (80% quality) Lossy Image
35. Responsive Image
36. Image in desktop & tablet can be ~2-4x larger than mobile 28 kb 12 kb
37. Serve different image sizes <picture> <source media="(max-width: 800px)" srcset="teh-tarik-800w.webp" type="image/webp"> <source srcset="teh-tarik.webp" type="image/webp"> <img src="teh-tarik.png" > </picture> Small screen and if browser supports WebP https://developer.mozilla.org/en-US/docs/Learn/HTML/ Multimedia_and_embedding/Responsive_images
38. squoosh.app resize, compress, format Or automate with these npm packages: imagemin, sharp, jimp
39. Lazy Loading
43. Performant Images ➔ Is lazy ➔ Appropriate format ➔ Appropriate compression ➔ Appropriate display size
44. Fonts
46. “Flash of Unstyled Text” (FOUT) Arial
47. “Flash of Unstyled Text” (FOUT) Google Sans
48. Flash of Unstyled Text (FOUT) @font-face { font-family: Google Sans', sans-serif; src: url('...') format('woff'); font-display: swap; } Display unstyled text until font loaded .5s improvement in “Visual Complete” on 3G
49. fonts.googleapis.com/css?family=Source+Sans+Pro &display=swap
50. Limiting font characters
51. Limiting font characters https://developers.google.com/fonts/docs/getting_started# optimizing_your_font_requests
52. fonts.googleapis.com/css?family=Source+Sans+Pro :400,600,900 Limit font weights https://www.smashingmagazine.com/2019/06/o ptimizing-google-fonts-performance/
53. JavaScript
54. If only we could snap and destroy half the file size...
55. Lazy Loading Traditional SPA - big-bundle.js (60kb) Split & Lazy Load - route-speakers.js (20kb) - route-food.js (20kb) - route-schedule.js (20kb) - ….
56. Lazy Loading 1-2 pages per module const routes: Routes = [ { path: 'speakers', loadChildren: () => import('./speakers/speakers.module') .then(m => m.SpeakersModule) }, ... ]; Latest Angular version 8 syntax
57. Preloading Preload lazy-loadable modules in the background while the user is interacting with our application.
58. imports: [ ... RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], Preloading in Angular https://angular.io/api/router/PreloadAllModules Roll your own: Network aware preloading strategy
59. https://github.com/guess-js/guess https://github.com/GoogleChromeLabs/quicklink Predictive Preloading
60. Differential Loading Serve different bundles & polyfills based on browser
62. Built in Differential Loading with Angular CLI https://auth0.com/blog/angular-8-differential-loading/
63. Defer JavaScript
64. Patrick Hulce, thirdpartyweb.today. Data from across top 4 millions sites
65. Defer JavaScript <script> <script defer> HTML parsing HTML parsing paused Script download Script execution
66. Defer Google Tag Manager <script defer src="https://www.googletagmanager.com/gtag/js?id=xxx"> </script> <script> ... </script> Defer it Reduction of domComplete time
68. Expensive JavaScript Libraries
72. 72 Summary
73. Performance optimization is a continuous effort
74. ➔ Measure ➔ Improve ➔ Monitor ➔ Repeat
75. Blueprint for Performance Success https://youtu.be/mLjxXPHuIJo
77. The Web
78. Make the Web Better for E.V.E.R.Y.O.N.E.
79. Thank you! Follow @JecelynYeen slides: https://speakerdeck.com/chybie/w eb-performance-optimization Videos https://youtu.be/ACA3yBHBUuE Instagram me! @ngmykia