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