Page Loading Performance Strategies

Slides from a talk first presented at ReactFoo Delhi 2018.

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

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