Skip to content

Commit e6ad80f

Browse files
apsinghdevapsinghdev
committed
perf: reduce lcp time
1 parent 4bc174c commit e6ad80f

File tree

1 file changed

+21
-29
lines changed

1 file changed

+21
-29
lines changed

‎index.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
<link rel="preload" href="dist/css/windows.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
2727
<link rel="preload" href="lib/materialize-iso.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
2828
<link rel="preload" href="css/darkmode.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
29+
<link rel="preload" as="video" href="loading-animation.webm" type="video/webm">
30+
<link rel="preload" as="video" href="loading-animation.mp4" type="video/mp4">
31+
<link rel="preload" as="image" href="loading-animation-ja.svg">
2932

3033
<!-- Fallback for browsers that don't support preload -->
3134
<noscript>
@@ -91,10 +94,10 @@
9194
<link rel="icon" sizes="192x192" href="favicon.ico" />
9295
<meta id="theme-color" name="theme-color" content="#2196F3" />
9396

94-
<link type="text/css" href="fonts/material-icons.css" rel="stylesheet"/>
95-
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
96-
<link rel="stylesheet" href="lib/materialize-iso.css" />
97-
<link rel="stylesheet" href="css/themes.css" />
97+
<link type="text/css" href="fonts/material-icons.css" rel="stylesheet" />
98+
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
99+
<link rel="stylesheet" href="lib/materialize-iso.css" />
100+
<link rel="stylesheet" href="css/themes.css" />
98101

99102
<script src="lib/easeljs.min.js" defer></script>
100103
<script src="lib/tweenjs.min.js" defer></script>
@@ -115,7 +118,7 @@
115118

116119
<body id="body" onload="init();" data-title="index" id="body" style="background: #f9f9f9;">
117120
<div id="loading-image-container"
118-
style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FFFFFF; z-index: 9999;">
121+
style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FFFFFF; z-index: 9999; contain: paint;">
119122
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>
120123

121124
<div class="loading-text" id="loadingText" style="margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
@@ -175,25 +178,13 @@
175178
}
176179

177180
const container = document.getElementById("loading-media");
178-
container.style.display = "flex";
179-
container.style.justifyContent = "center";
180-
container.style.alignItems = "center";
181-
container.style.width = "100%";
182-
183-
if (lang === "ja") {
184-
container.innerHTML = `
185-
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
186-
<img src="loading-animation-ja.svg" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
187-
</div>`;
188-
} else {
189-
container.innerHTML = `
190-
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
191-
<video loop autoplay muted playsinline style="width: 100%; height: 100%; object-fit: contain;">
192-
<source src="loading-animation.webm" type="video/webm">
193-
<source src="loading-animation.mp4" type="video/mp4">
194-
</video>
195-
</div>`;
196-
}
181+
const content = lang === "ja"
182+
? `<img src="loading-animation-ja.svg" loading="eager" fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation">`
183+
: `<video loop autoplay muted playsinline fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;">
184+
<source src="loading-animation.webm" type="video/webm">
185+
<source src="loading-animation.mp4" type="video/mp4">
186+
</video>`;
187+
container.innerHTML = `<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">${content}</div>`;
197188
};
198189

199190
loadL10nSplashScreen();
@@ -600,7 +591,7 @@
600591

601592
<ul id="saveddropdown" class="dropdown-content">
602593
<li><a id="save-html"></a></li>
603-
<li><a id="save-midi"></a></li>
594+
<li><a id="save-midi"></a></li>
604595
<li><a id="save-svg"></a></li>
605596
<li><a id="save-png"></a></li>
606597
<li><a id="save-wav"></a></li>
@@ -632,10 +623,11 @@
632623
<li><a id="ur"></a></li>
633624
</ul>
634625

635-
<ul style="display: none;" id="themedropdown" class="dropdown-content">
636-
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i class='material-icons'>brightness_7</i></a>
637-
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
638-
</ul>
626+
<ul style="display: none;" id="themedropdown" class="dropdown-content">
627+
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i
628+
class='material-icons'>brightness_7</i></a>
629+
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
630+
</ul>
639631

640632
<div id="modal-container" style="display: none;z-index: 999;">
641633
<ul id="newdropdown" class="dropdown-content" style="padding: 24px;">

0 commit comments

Comments
 (0)