Skip to content

Commit 6bb694f

Browse files
apsinghdevapsinghdev
committed
perf: reduce lcp time
1 parent 75544b5 commit 6bb694f

File tree

1 file changed

+46
-76
lines changed

1 file changed

+46
-76
lines changed

‎index.html‎

Lines changed: 46 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,30 @@
99

1010
<meta name="description"
1111
content="Learn to code through music with Music Blocks. Arrange colorful blocks to create everything from simple melodies to interactive games.">
12-
<meta name="viewport"
13-
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
14-
15-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
16-
<!-- <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet"> -->
17-
18-
<link rel="stylesheet" href="css/activities.css" />
19-
<link rel="stylesheet" href="dist/css/style.css" />
20-
<link rel="stylesheet" href="dist/css/keyboard.css" />
21-
<link rel="stylesheet" href="dist/css/windows.css" />
12+
<meta name="mobile-web-app-capable" content="yes">
13+
<meta name="theme-color" content="#2196F3">
14+
<title>Music Blocks</title>
2215

16+
<!-- Icons & PWA -->
17+
<link rel="icon" sizes="192x192" href="favicon.ico">
18+
<link rel="apple-touch-icon" href="/activity/activity-icon-color-512.png">
19+
<link rel="manifest" href="android_chrome_manifest.json">
20+
21+
<!-- Stylesheets -->
22+
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style"
23+
onload="this.onload=null;this.rel='stylesheet'">
24+
<link rel="preload" href="fonts/material-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
25+
<link rel="preload" href="css/activities.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
26+
<link rel="preload" href="dist/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
27+
<link rel="preload" href="dist/css/keyboard.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
28+
<link rel="preload" href="dist/css/windows.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
29+
<link rel="preload" href="lib/materialize-iso.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
30+
<link rel="preload" href="css/darkmode.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
31+
<link rel="preload" as="video" href="loading-animation.webm" type="video/webm">
32+
<link rel="preload" as="video" href="loading-animation.mp4" type="video/mp4">
33+
<link rel="preload" as="image" href="loading-animation-ja.svg">
34+
35+
<!-- Fallback for browsers that don't support preload -->
2336
<noscript>
2437
JavaScript is required to view this page.
2538
</noscript>
@@ -71,10 +84,10 @@
7184
<link rel="icon" sizes="192x192" href="favicon.ico" />
7285
<meta id="theme-color" name="theme-color" content="#2196F3" />
7386

74-
<link type="text/css" href="fonts/material-icons.css" rel="stylesheet"/>
75-
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
76-
<link rel="stylesheet" href="lib/materialize-iso.css" />
77-
<link rel="stylesheet" href="css/themes.css" />
87+
<link type="text/css" href="fonts/material-icons.css" rel="stylesheet" />
88+
<link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
89+
<link rel="stylesheet" href="lib/materialize-iso.css" />
90+
<link rel="stylesheet" href="css/themes.css" />
7891

7992
<script src="lib/easeljs.min.js" defer></script>
8093

@@ -133,46 +146,14 @@
133146

134147
<body id="body" onload="init();" data-title="index" id="body" style="background: #f9f9f9;">
135148
<div id="loading-image-container"
136-
style="position: absolute; width: 100%; height: 100%;cursor: wait; text-align: center; background-color: #FFFFFF;">
137-
<script>
138-
let loadL10nSplashScreen = function () {
139-
console.debug(
140-
"The browser is set to " + navigator.language
141-
);
142-
let lang = navigator.language;
143-
if (localStorage.languagePreference) {
144-
console.debug(
145-
"Music Blocks is set to " +
146-
localStorage.languagePreference
147-
);
148-
lang = localStorage.languagePreference;
149-
}
150-
151-
console.debug("Using " + lang);
152-
if (lang === undefined) {
153-
lang = "enUS";
154-
console.debug("Reverting to " + lang);
155-
}
149+
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;">
150+
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>
156151

157-
// Intentional placement of SVG image per user request by Japanese Schools.
158-
159-
if (lang === "ja") {
160-
document.getElementById(
161-
"loading-image-container"
162-
).innerHTML =
163-
'<img src="loading-animation-ja.svg" style="width: 100%; margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />';
164-
} else {
165-
document.getElementById(
166-
"loading-image-container"
167-
).innerHTML =
168-
'<video loop autoplay muted playsinline style="width: 100%; height:500px; margin-top:30px; overflow: hidden;"><source src="loading-animation.webm" type="video/webm"><source src="loading-animation.mp4" type="video/mp4"></video>';
169-
}
170-
};
152+
<div class="loading-text" id="loadingText" style="margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
153+
</div>
171154

172-
loadL10nSplashScreen();
173-
</script>
174-
<div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
175-
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs">
155+
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs"
156+
style="position: fixed; bottom: 20px; right: 20px;">
176157
<div class="logo-container" id="bottom-right-logo">
177158
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501 167" height="50" width="150">
178159
<!-- Logo paths -->
@@ -225,25 +206,13 @@
225206
}
226207

227208
const container = document.getElementById("loading-media");
228-
container.style.display = "flex";
229-
container.style.justifyContent = "center";
230-
container.style.alignItems = "center";
231-
container.style.width = "100%";
232-
233-
if (lang === "ja") {
234-
container.innerHTML = `
235-
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
236-
<img src="loading-animation-ja.svg" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
237-
</div>`;
238-
} else {
239-
container.innerHTML = `
240-
<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">
241-
<video loop autoplay muted playsinline style="width: 100%; height: 100%; object-fit: contain;">
242-
<source src="loading-animation.webm" type="video/webm">
243-
<source src="loading-animation.mp4" type="video/mp4">
244-
</video>
245-
</div>`;
246-
}
209+
const content = lang === "ja"
210+
? `<img src="loading-animation-ja.svg" loading="eager" fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;" alt="Loading animation">`
211+
: `<video loop autoplay muted playsinline fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;">
212+
<source src="loading-animation.webm" type="video/webm">
213+
<source src="loading-animation.mp4" type="video/mp4">
214+
</video>`;
215+
container.innerHTML = `<div class="media-wrapper" style="width: 100%; aspect-ratio: 16/9; display: flex; justify-content: center; align-items: center;">${content}</div>`;
247216
};
248217

249218
loadL10nSplashScreen();
@@ -832,7 +801,7 @@
832801

833802
<ul id="saveddropdown" class="dropdown-content">
834803
<li><a id="save-html"></a></li>
835-
<li><a id="save-midi"></a></li>
804+
<li><a id="save-midi"></a></li>
836805
<li><a id="save-svg"></a></li>
837806
<li><a id="save-png"></a></li>
838807
<li><a id="save-wav"></a></li>
@@ -864,10 +833,11 @@
864833
<li><a id="ur"></a></li>
865834
</ul>
866835

867-
<ul style="display: none;" id="themedropdown" class="dropdown-content">
868-
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i class='material-icons'>brightness_7</i></a>
869-
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
870-
</ul>
836+
<ul style="display: none;" id="themedropdown" class="dropdown-content">
837+
<a id="light" class="tooltipped" data-tooltip="Light Mode"><i
838+
class='material-icons'>brightness_7</i></a>
839+
<a id="dark" class="tooltipped" data-tooltip="Dark Mode"><i class='material-icons'>brightness_4</i></a>
840+
</ul>
871841

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

0 commit comments

Comments
 (0)