Page Loading Performance Strategies

Page Loading Performance Strategies

Slides from a talk first presented at ReactFoo Delhi 2018.

Featured projects:
1. Buuuk
2. Guiding Tech
3. Design Fabric

5d201d801f5a6e5a54c1178a20eb913d?s=128

Prateek Rungta

August 18, 2018
Tweet

Transcript

  1. 2.
  2. 3.
  3. 8.

    #perf Combine CSS & JS Minification Unused CSS CDN GZIP

    HTTP/2 Automation Bundling Caching VPS Image Optimisation DNS prefetch Responsive Images Lazy loading Image Sprites Async Service Workers Server Push Code Splitting
  4. 10.

    #1

  5. 11.
  6. 12.
  7. 14.

    ✓ Combine CSS, JS ✓ Minify, Gzip ✓ HTTP/2 ✓

    VPS ✓ CDN ✓ Lazyloading ✓ Image optimisation ✓ Responsive images
  8. 15.
  9. 16.

    CSS JS Fonts Icons Parse Compile Render Request Page 1

    CSS JS Fonts Icons Parse Compile Render Request Page 2 CSS JS Fonts Icons Pars Comp Rend Requ Page 3
  10. 17.

    Parse Render Parse Render Page 1 CSS JS Fonts Icons

    Page 2 Page 3 Parse Compile Render Request
  11. 18.
  12. 19.

    1. Intercept click 2. Request HTML over Ajax 3. Update

    <title> and <body> 4. Push new browser history state PJAX
  13. 20.

    ✓ No server side conditionals ✓ Minimal markup changes ✓

    Graceful degradation ✓ Preserves Back button functionality
  14. 26.
  15. 28.

    ✓ At least 300ms of gain in speed ✓ Clicks

    will start to appear instant ✓ Again, no extra config on the server
  16. 32.

    #2

  17. 33.
  18. 34.
  19. 44.
  20. 45.

    There are only two hard things in Computer Science: cache

    invalidation and naming things.” – Phil Karlton “
  21. 46.
  22. 48.

    Delete Delete, Rebuild Rebuild, Replace No out-of-sync pages returned ✓

    ✓ × Cache regenerates automatically ✓ × ✓ Server load is distributed ✓ × ✓ All users get a cached response × – ✓
  23. 52.

    Change Time No redundant invalidation ✓ × Staggered expiry of

    caches × ✓ Cache layer decoupled from App × ✓
  24. 55.

    1. Full page cache 2. Short, time based expiry 3.

    Re-generate, then replace Microcaching
  25. 56.

    ✓ All users get a cached response ✓ Cached content

    no older than 2 seconds ✓ Cache layer decoupled from App layer ✓ Staggered expiry & regeneration
  26. 58.
  27. 59.

    #3

  28. 60.
  29. 61.
  30. 68.
  31. 70.
  32. 71.
  33. 73.

    1. Prioritise critical rendering path 2. Defer loading images that

    are not visible 3. Visual feedback that improves perception of speed Lazy loading
  34. 78.

    1. Create different sized images 2. Use srcset attribute to

    inform browser 3. Use sizes attribute to help browser choose the right size Responsive Images
  35. 79.

    ✓ Fewer bytes to download ✓ Fewer pixels to decode

    ✓ Future-proof for higher DPI screens
  36. 80.
  37. 82.

    1. Strip metadata 2. Lossless compression 3. Lossy compression 4.

    Efficient image formats (WebP, WebM, H.264 for GIFs etc.) Compression
  38. 83.
  39. 86.
  40. 90.