19 | 20 | {{ post.data.title }} 21 | 22 |
23 |{{post.data.page.excerpt | md | safe}}
24 | 25 |Speed is a major contributor to user experience on modern web sites.
7 | 8 |It is important to pay attention not only to technologies that said experiences are build with, but to the way they are designed as well.
9 | 10 |Proper speed design is a collaboration between product managers, UI designers and developers as all the aspects of the page composition must be balanced to achieve fast experience that is useful for end-users and deliver on the goals set by creators of the site.
11 | 12 |Below is the list of common speed design problems and their design solutions. We try not to concentrate on specific technical implementations or specific types of sites so it can be used in any context.
13 | 14 | {% for post in collections.orderedPatterns %} 15 | 16 |{{post.data.page.excerpt | md | safe}}
24 | 25 |Help us add more patterns!
34 | 35 |Submit new patterns to the issue tracker, help existing submissions by collecting articles and examples of implementation.
36 | 37 |See Contribution Guide on our GitHub repo.
38 |
19 | 
28 | 
34 | ```
35 |
36 | [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) is a visual stability metric as part of Core Web Vitals.
37 |
38 | [Good CLS score](https://web.dev/articles/cls#what-is-a-good-cls-score) is under **0.1** at **75%ile** of your users meaning that under 10% of the screen should shift during the page load.
39 |
--------------------------------------------------------------------------------
/src/assets/no_spinners.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/patterns/fast_start.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: article.njk
3 | title: Fast Start
4 | tags: pattern
5 | thumbnail: /assets/slow_paint_filmstrip.png
6 | og_image: /assets/fast_start_og_image.jpg
7 | order: 1
8 | ---
9 |
10 | Before user can start the experience, there is an inevitable delay as user's browser goes away from previous view to the current view.
11 |
12 |
13 |
14 | This delay manifests itself in waiting for first piece of the UI to be painted on the screen. Usually user waits for page to show while looking at the previous page, e.g. search engine results page or another page where they performed an action that led him to the page in question.
15 |
16 | On this filmstrip, previous page is shown as white:
17 |
18 | 
21 | 
28 | 
35 | 
22 | Speed Patterns
23 |
24 |
25 | 
26 | 
27 |
28 | This solves the problem of the empty screen: instead of having to wait for data to show up, the user can see visual cues and information about the page's content before the actual data has arrived.
26 | 27 |These cues can be multiple things:
28 | 29 |Why are zones important? 37 | They allow users to do a first pass and understand the structure of the page ahead of time, which allows for easier navigation of the data once the page has fully loaded.
38 | 39 |
55 | 65 | Cumulative Layout Shift (CLS) metric that is part of Core Web Vitals is a measure of layout shift and is useful for tracking it for both skeletal designs and during regular page load. 66 |
67 |