Performance
Topics
RAIL Model
Critical Rendering Path
PRPL pattern
RAIL Model (Performance Metrics)
RAIL Model is a performance model and metrics based on user's key actions. It breaks users life cycle into 4 actions such as Response, Animation, Idle, and Load.
| Action Detail | Example | Ideal time | |
|---|---|---|---|
| Response | User's tap action to paint | Users click menu and render tab. Click submit and show loading icon | < 100ms |
| Animation | Animation | Scroll, drag | 60fps === < 10ms |
| Idle | < 50ms | ||
| Load | Web site loading and render critical path content | Users open your website to display meaningful content | < 1000ms |
Now, we know what's benchmark of each actions so how we optimize your website?
Put simply, optimization can be divided into two parts which are loading and rendering. When it comes to Response, Animation, and Idle, you need to think about rendering optimization. Rendering optimization is basically done inside your code such as JS and CSS. For instance, how you implement animation and how you renders pop up menu. On the other hand, I would say loading optimization is more like "Setting" such as improving content efficiency (gzip, uglify, image downsize), cache strategy, assets loading (CDN).
Before move on to actual techniques, Let's take a look other concepts about loading content. They are very helpful how we should optimize and can achieve the goal. Critical Rendering Path and PRPL pattern.
Critical Rendering Path
Critical Rendering path is the path of content being rendered. Optimizing critical rendering path helps users see a part of content as soon as it is ready instead of just holding blank web page. Entire loading content could take 5000 ms but some of meaningful content should be rendered less than 1000ms.
PRPL pattern
PRPL pattern is the pattern of progressive web app and it helps developers consider Critical Rendering Path and its strategy.
- Push
- Render
- Pre-cache
- Lazy-load
| Push | Pre load shared assets (Logo image, vender js css file) | <link rel="preload"> or HTTP2 psh |
|---|---|---|
| Render | Rendering only initial route | Route base code splitting |
| Pre Cache | Pre Cache remaining route files (dashboard.js) | Same |
| Lazy Load | Load content when it is needed | Various techniques |
Analysis tool for PWA
https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool
Why Performance matters?
https://developers.google.com/web/fundamentals/performance/why-performance-matters/