Skip to content

Commit

Permalink
perf: reduce lcp time
Browse files Browse the repository at this point in the history
  • Loading branch information
@apsinghdev
apsinghdev committed Feb 17, 2025
1 parent 4bc174c commit e6ad80f
Showing 1 changed file with 21 additions and 29 deletions.
50 changes: 21 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
<link rel="preload" href="dist/css/windows.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="lib/materialize-iso.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="css/darkmode.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" as="video" href="loading-animation.webm" type="video/webm">
<link rel="preload" as="video" href="loading-animation.mp4" type="video/mp4">
<link rel="preload" as="image" href="loading-animation-ja.svg">

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

<link type="text/css" href="fonts/material-icons.css" rel="stylesheet"/>
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="lib/materialize-iso.css" />
<link rel="stylesheet" href="css/themes.css" />
<link type="text/css" href="fonts/material-icons.css" rel="stylesheet" />
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="lib/materialize-iso.css" />
<link rel="stylesheet" href="css/themes.css" />

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

<body id="body" onload="init();" data-title="index" id="body" style="background: #f9f9f9;">
<div id="loading-image-container"
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;">
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;">
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>

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

const container = document.getElementById("loading-media");
container.style.display = "flex";
container.style.justifyContent = "center";
container.style.alignItems = "center";
container.style.width = "100%";

if (lang === "ja") {
container.innerHTML = `
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
<img src="loading-animation-ja.svg" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
</div>`;
} else {
container.innerHTML = `
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
<video loop autoplay muted playsinline style="width: 100%; height: 100%; object-fit: contain;">
<source src="loading-animation.webm" type="video/webm">
<source src="loading-animation.mp4" type="video/mp4">
</video>
</div>`;
}
const content = lang === "ja"
? `<img src="loading-animation-ja.svg" loading="eager" fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation">`
: `<video loop autoplay muted playsinline fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;">
<source src="loading-animation.webm" type="video/webm">
<source src="loading-animation.mp4" type="video/mp4">
</video>`;
container.innerHTML = `<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">${content}</div>`;
};

loadL10nSplashScreen();
Expand Down Expand Up @@ -600,7 +591,7 @@

<ul id="saveddropdown" class="dropdown-content">
<li><a id="save-html"></a></li>
<li><a id="save-midi"></a></li>
<li><a id="save-midi"></a></li>
<li><a id="save-svg"></a></li>
<li><a id="save-png"></a></li>
<li><a id="save-wav"></a></li>
Expand Down Expand Up @@ -632,10 +623,11 @@
<li><a id="ur"></a></li>
</ul>

<ul style="display: none;" id="themedropdown" class="dropdown-content">
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i class='material-icons'>brightness_7</i></a>
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
</ul>
<ul style="display: none;" id="themedropdown" class="dropdown-content">
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i
class='material-icons'>brightness_7</i></a>
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
</ul>

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

0 comments on commit e6ad80f

Please sign in to comment.