Pro Yearly is on sale from $80 to $50! »

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. Page Loading Performance @rungta from @miranj

  2. 2005…

  3. 2011…

  4. Why performance?

  5. Slow networks

  6. More conversions

  7. Less anxiety

  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
  9. 3 case studies

  10. #1

  11. None
  12. None
  13. Hand-coded static files CMS-based Improved performance

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

    VPS ✓ CDN ✓ Lazyloading ✓ Image optimisation ✓ Responsive images
  15. None
  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
  17. Parse Render Parse Render Page 1 CSS JS Fonts Icons

    Page 2 Page 3 Parse Compile Render Request
  18. How?

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

    <title> and <body> 4. Push new browser history state PJAX
  20. ✓ No server side conditionals ✓ Minimal markup changes ✓

    Graceful degradation ✓ Preserves Back button functionality
  21. What if we could pre-fetch the next page?

  22. Okay, but which page?

  23. Let the user show the way… mouse pointer

  24. Prefetch request Link Link Link Regular request ✓

  25. Is this really significant?

  26. None
  27. Pre-fetch page on mouseover/touchstart

  28. ✓ At least 300ms of gain in speed ✓ Clicks

    will start to appear instant ✓ Again, no extra config on the server
  29. Demo: buuuk.com

  30. How can you implement it?

  31. InstantClick

  32. #2

  33. None
  34. None
  35. ~3 million monthly average ~72 concurrent (peak) ~150 concurrent (future)

  36. Response time target: 200ms

  37. Server HTTP Server WebApp / CMS Database Browser

  38. Requested page is regenerated each time

  39. Save a copy of the final page

  40. Server HTTP Server WebApp / CMS Database Cache

  41. Now the server can handle load

  42. But cache may be out of sync

  43. So, we need to invalidate cache (based on some trigger)

  44. How?

  45. There are only two hard things in Computer Science: cache

    invalidation and naming things.” – Phil Karlton “
  46. 3 options

  47. A. Delete, rebuild on request B. Delete, rebuild immediately C.

    Rebuild on request, replace
  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 × – ✓
  49. Speed > accuracy*, so C. Rebuild on request, replace *

    in this case
  50. Okay, but what should trigger invalidation?

  51. A. Expire on change in the App B. Time based

    expiry
  52. Change Time No redundant invalidation ✓ × Staggered expiry of

    caches × ✓ Cache layer decoupled from App × ✓
  53. Decoupled > no redundancy*, so B. Time based expiry *

    in this case
  54. Expiry times as short as one second

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

    Re-generate, then replace Microcaching
  56. ✓ All users get a cached response ✓ Cached content

    no older than 2 seconds ✓ Cache layer decoupled from App layer ✓ Staggered expiry & regeneration
  57. 150 concurrent over 1 minute

  58. None
  59. #3

  60. None
  61. None
  62. Publication on art & design, highly visual

  63. ~20 images, 7 MB — average ~90 images, 17 MB

    — peak
  64. Images were killing load speeds

  65. First – network layer

  66. Server A B C D CDN CDN CDN CDN

  67. ✓ Reduce global latency ✓ Reduce server load ✓ Save

    bandwidth ✓ Zero-config
  68. None
  69. Second – Prioritise Critical Path

  70. None
  71. None
  72. From 30 to 3 images

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

    are not visible 3. Visual feedback that improves perception of speed Lazy loading
  74. github.com/aFarkas/lazysizes →

  75. Third – Appropriate no. of pixels

  76. Nautilus.jpg 1200x674

  77. 400x224 800x449 1200x674 1200x674

  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
  79. ✓ Fewer bytes to download ✓ Fewer pixels to decode

    ✓ Future-proof for higher DPI screens
  80. None
  81. Fourth – Compression

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

    Efficient image formats (WebP, WebM, H.264 for GIFs etc.) Compression
  83. None
  84. 1. Edge CDN 2. Lazy loading 3. Responsive Images 4.

    Compression
  85. images.guide →

  86. Recap

  87. 1. PJAX with Pre-load 2. Microcaching 3. Image optimisation Page

    Loading
  88. All the strategies combined

  89. Demo: designfabric.in

  90. fin.