$30 off During Our Annual Pro Sale. View Details »

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

Prateek Rungta

August 18, 2018
Tweet

More Decks by Prateek Rungta

Other Decks in Technology

Transcript

  1. Page Loading Performance
    @rungta from @miranj

    View Slide

  2. 2005…

    View Slide

  3. 2011…

    View Slide

  4. Why performance?

    View Slide

  5. Slow
    networks

    View Slide

  6. More
    conversions

    View Slide

  7. Less anxiety

    View Slide

  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

    View Slide

  9. 3 case studies

    View Slide

  10. #1

    View Slide

  11. View Slide

  12. View Slide

  13. Hand-coded
    static files
    CMS-based
    Improved
    performance

    View Slide

  14. ✓ Combine CSS, JS
    ✓ Minify, Gzip
    ✓ HTTP/2
    ✓ VPS
    ✓ CDN
    ✓ Lazyloading
    ✓ Image optimisation
    ✓ Responsive images

    View Slide

  15. View Slide

  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

    View Slide

  17. Parse
    Render
    Parse
    Render
    Page 1
    CSS
    JS
    Fonts
    Icons
    Page 2 Page 3
    Parse
    Compile
    Render
    Request

    View Slide

  18. How?

    View Slide

  19. 1. Intercept click
    2. Request HTML over Ajax
    3. Update and
    4. Push new browser history state
    PJAX

    View Slide

  20. ✓ No server side conditionals
    ✓ Minimal markup changes
    ✓ Graceful degradation
    ✓ Preserves Back button functionality

    View Slide

  21. What if we could pre-fetch the
    next page?

    View Slide

  22. Okay, but which page?

    View Slide

  23. Let the user show the way…
    mouse pointer

    View Slide

  24. Prefetch request
    Link
    Link Link
    Regular request

    View Slide

  25. Is this really significant?

    View Slide

  26. View Slide

  27. Pre-fetch page on
    mouseover/touchstart

    View Slide

  28. ✓ At least 300ms of gain in speed
    ✓ Clicks will start to appear instant
    ✓ Again, no extra config on the server

    View Slide

  29. Demo: buuuk.com

    View Slide

  30. How can you implement it?

    View Slide

  31. InstantClick

    View Slide

  32. #2

    View Slide

  33. View Slide

  34. View Slide

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

    View Slide

  36. Response time target: 200ms

    View Slide

  37. Server
    HTTP Server WebApp / CMS Database
    Browser

    View Slide

  38. Requested page is regenerated
    each time

    View Slide

  39. Save a copy of the final page

    View Slide

  40. Server
    HTTP Server WebApp / CMS Database
    Cache

    View Slide

  41. Now the server can handle load

    View Slide

  42. But cache may be out of sync

    View Slide

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

    View Slide

  44. How?

    View Slide

  45. There are only two hard things in
    Computer Science: cache invalidation
    and naming things.”
    – Phil Karlton

    View Slide

  46. 3 options

    View Slide

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

    View Slide

  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
    × – ✓

    View Slide

  49. Speed > accuracy*, so
    C. Rebuild on request, replace
    * in this case

    View Slide

  50. Okay, but what should
    trigger invalidation?

    View Slide

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

    View Slide

  52. Change Time
    No redundant invalidation ✓ ×
    Staggered expiry of caches × ✓
    Cache layer decoupled from App × ✓

    View Slide

  53. Decoupled > no redundancy*, so
    B. Time based expiry
    * in this case

    View Slide

  54. Expiry times as short as
    one second

    View Slide

  55. 1. Full page cache
    2. Short, time based expiry
    3. Re-generate, then replace
    Microcaching

    View Slide

  56. ✓ All users get a cached response
    ✓ Cached content no older than 2 seconds
    ✓ Cache layer decoupled from App layer
    ✓ Staggered expiry & regeneration

    View Slide

  57. 150 concurrent over 1 minute

    View Slide

  58. View Slide

  59. #3

    View Slide

  60. View Slide

  61. View Slide

  62. Publication on art & design,
    highly visual

    View Slide

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

    View Slide

  64. Images were killing load speeds

    View Slide

  65. First – network layer

    View Slide

  66. Server
    A
    B
    C
    D
    CDN
    CDN
    CDN
    CDN

    View Slide

  67. ✓ Reduce global latency
    ✓ Reduce server load
    ✓ Save bandwidth
    ✓ Zero-config

    View Slide

  68. View Slide

  69. Second – Prioritise Critical Path

    View Slide

  70. View Slide

  71. View Slide

  72. From 30 to 3 images

    View Slide

  73. 1. Prioritise critical rendering path
    2. Defer loading images that are
    not visible
    3. Visual feedback that improves
    perception of speed
    Lazy loading

    View Slide

  74. github.com/aFarkas/lazysizes →

    View Slide

  75. Third – Appropriate no. of pixels

    View Slide

  76. Nautilus.jpg
    1200x674

    View Slide

  77. 400x224 800x449 1200x674 1200x674

    View Slide

  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

    View Slide

  79. ✓ Fewer bytes to download
    ✓ Fewer pixels to decode
    ✓ Future-proof for higher DPI screens

    View Slide

  80. View Slide

  81. Fourth – Compression

    View Slide

  82. 1. Strip metadata
    2. Lossless compression
    3. Lossy compression
    4. Efficient image formats (WebP,
    WebM, H.264 for GIFs etc.)
    Compression

    View Slide

  83. View Slide

  84. 1. Edge CDN
    2. Lazy loading
    3. Responsive Images
    4. Compression

    View Slide

  85. images.guide →

    View Slide

  86. Recap

    View Slide

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

    View Slide

  88. All the strategies combined

    View Slide

  89. Demo: designfabric.in

    View Slide

  90. fin.

    View Slide