-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (106 loc) · 5.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Shifty.site - The Layout Shift Game from Request Metrics</title>
<meta name="version" content="%PACKAGE_VERSION%">
<meta name="build_time" content="%BUILD_TIME%">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Preload fonts -->
<link rel="preload" href="/fonts/muli.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/poppins-600.woff2" as="font" type="font/woff2" crossorigin>
<meta name="description"
content="Are you fast enough to grab the Deal of the Day? This online store is slow. Really slow. It shifts around constantly from slow-loading content. How many deals can you get before the time runs out?">
<!-- OpenGraph Meta -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@requestmetrics" />
<meta name="twitter:creator" content="@requestmetrics" />
<meta property="og:title" content="Shifty.site - The Layout Shift Game from Request Metrics">
<meta property="og:site_name" content="Shifty.site">
<meta property="og:url" content="https://shifty.site/">
<meta property="og:description"
content="Are you fast enough to grab the Deal of the Day? This online store is slow. Really slow. It shifts around constantly from slow-loading content. How many deals can you get before the time runs out?">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://shifty.site/images/share.png">
<meta property="og:type" content="website">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body class="home">
<div class="container fullwidth">
<main class="game-panel flex-column">
<div class="game-hero flex-column justify-center align-center text-center">
<h2>Shifty.site</h2>
<h1>The Layout Shift Challenge</h1>
<p>
Are you fast enough to grab the Deal of the Day?
This online store is slow. Really slow.
It shifts around constantly from slow-loading content.
How many deals can you get before the time runs out?
</p>
<div id="game-controls" class="controls flex-column"></div>
</div>
<picture class="game-illustration">
<img src="/images/sloth_vr.svg" alt="Sloth in VR" />
</picture>
<div id="score-board"></div>
</main>
<aside class="about-panel flex-column">
<div class="about-text">
<h2>About</h2>
<p>
The Layout Shift Challenge was created by
<a href="https://requestmetrics.com/?utm_source=shifty">Request Metrics</a>
to demonstrate the frustrating behavior of Layout shifts and the
<a href="https://requestmetrics.com/web-performance/cumulative-layout-shift/?utm_source=shifty">
Cumulative Layout Shift (CLS)</a>
metric for web performance.
</p>
<p>
Layout shifts are performance events caused by lazy-loading content into
a website that changes position of other elements. For example, an image
loading and pushing down text below it.
</p>
<p>
Cumulative Layout Shift (CLS) is a Core Web Vital performance metric that
measures the total size and distance of these layout shifts. Poor CLS scores,
can penalize your pagerank and decrease your traffic.
</p>
<p>
You can check if your website has CLS problems using the
<a href="https://requestmetrics.com/resources/tools/crux/?utm_source=shifty">
free Speed Check Tool</a>.
</p>
</div>
<div class="about-links flex-column">
<a href="https://requestmetrics.com/?utm_source=shifty" class="flex align-center">
<img src="/images/request_metrics_icon_dark.svg" alt="Request Metrics" width="60" height="60"
loading="lazy">
<div>About Request Metrics</div>
</a>
<a href="https://github.com/RequestMetrics/shifty.site/" class="flex align-center">
<img src="/images/github.svg" alt="Github" width="60" height="60" loading="lazy">
<div>Explore on Github</div>
</a>
</div>
</aside>
</div>
<footer class="site-footer">
<div class="copyright">
Shifty.site © 2020-2024
<a href="https://requestmetrics.com/?utm_source=shifty">Request Metrics</a>.
All rights reserved. Source is available for review on
<a href="https://github.com/RequestMetrics/shifty.site/">Github</a>.
</div>
</footer>
<script type="module" src="/src/Home.tsx"></script>
</body>
</html>