Web Performance Optimization

1a73ecdb082f212bf8d81eb9a3a53e29?s=47 Jecelyn Yeen
September 18, 2019

Web Performance Optimization

Web Performance & Optimization - Images, Fonts, JavaScript

1a73ecdb082f212bf8d81eb9a3a53e29?s=128

Jecelyn Yeen

September 18, 2019
Tweet

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
  13. None
  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

  40. None
  41. None
  42. None
  43. Performant Images ➔ Is lazy ➔ Appropriate format ➔ Appropriate

    compression ➔ Appropriate display size
  44. Fonts

  45. None
  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

  61. None
  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
  67. None
  68. Expensive JavaScript Libraries

  69. None
  70. None
  71. None
  72. 72 Summary

  73. Performance optimization is a continuous effort

  74. ➔ Measure ➔ Improve ➔ Monitor ➔ Repeat

  75. Blueprint for Performance Success https://youtu.be/mLjxXPHuIJo

  76. None
  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