Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Page Loading Performance Strategies

Avatar for Prateek Rungta Prateek Rungta
August 18, 2018
Technology
1
1.3k

Page Loading Performance Strategies

Slides from a talk first presented at ReactFoo Delhi 2018.

Featured projects:
1. Buuuk
2. Guiding Tech
3. Design Fabric
Avatar for Prateek Rungta

Prateek Rungta

August 18, 2018
Tweet

More Decks by Prateek Rungta

See All by Prateek Rungta
Demystifying the Craft API for Twig Developers
Avatar for Prateek Rungta rungta
0
150
Critical CSS for CMS-based Server-rendered Websites
Avatar for Prateek Rungta rungta
0
3.7k
Micro-caching in Nginx for High Performance
Avatar for Prateek Rungta rungta
0
760
A New Type Testing Tool
Avatar for Prateek Rungta rungta
0
230
Fortifying Craft for High Traffic
Avatar for Prateek Rungta rungta
0
970
Typography for the Web
Avatar for Prateek Rungta rungta
9
6.2k
Accessibility & Usability on the Web
Avatar for Prateek Rungta rungta
2
5.8k

Other Decks in Technology

See All in Technology
本当に必要なのは「QAという技術」だった！試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
Avatar for ar_tama ar_tama
9
4k
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
Avatar for KAKEHASHI kakehashi
PRO
22
5.1k
Dataverseの検索列について
Avatar for MiyakeMito miyakemito
1
180
Simplify! 10 ways to reduce complexity in software development
Avatar for Uwe Friedrichsen ufried
2
240
Coding Agentに値札を付けろ
Avatar for watany watany
3
320
Winning at PHP in Production in 2025
Avatar for Benjamin Eberlei beberlei
1
280
Part1　GitHubってなんだろう？その１
Avatar for tomokusaba tomokusaba
3
720
テストって楽しい！開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
Avatar for END aiandrox
0
170
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2025年版）
Avatar for Infiniteloop infiniteloop_inc
2
9.6k
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
9
2.4k
エンジニアリングで組織のアウトカムを最速で最大化する！
Avatar for ham ham0215
1
300
クラウドネイティブ環境の脅威モデリング
Avatar for Kyohei Mizumoto kyohmizu
1
400

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
230
18k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
38
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
600
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k

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.