Skip to content

Commit 10723b3

Browse files
apsinghdevapsinghdev
committed
perf: fix large-layout-shift and render-blocking issues
1 parent 4ffa134 commit 10723b3

File tree

1 file changed

+64
-47
lines changed

1 file changed

+64
-47
lines changed

‎index.html‎

Lines changed: 64 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,27 @@
1717
<link rel="manifest" href="android_chrome_manifest.json">
1818

1919
<!-- Stylesheets -->
20-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
21-
<link rel="stylesheet" href="fonts/material-icons.css">
22-
<link rel="stylesheet" href="css/activities.css">
23-
<link rel="stylesheet" href="dist/css/style.css">
24-
<link rel="stylesheet" href="dist/css/keyboard.css">
25-
<link rel="stylesheet" href="dist/css/windows.css">
26-
<link rel="stylesheet" href="lib/materialize-iso.css">
27-
<link rel="stylesheet" href="css/darkmode.css">
20+
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style"
21+
onload="this.onload=null;this.rel='stylesheet'">
22+
<link rel="preload" href="fonts/material-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
23+
<link rel="preload" href="css/activities.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
24+
<link rel="preload" href="dist/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
25+
<link rel="preload" href="dist/css/keyboard.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
26+
<link rel="preload" href="dist/css/windows.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
27+
<link rel="preload" href="lib/materialize-iso.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
28+
<link rel="preload" href="css/darkmode.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
29+
30+
<!-- Fallback for browsers that don't support preload -->
31+
<noscript>
32+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
33+
<link rel="stylesheet" href="fonts/material-icons.css">
34+
<link rel="stylesheet" href="css/activities.css">
35+
<link rel="stylesheet" href="dist/css/style.css">
36+
<link rel="stylesheet" href="dist/css/keyboard.css">
37+
<link rel="stylesheet" href="dist/css/windows.css">
38+
<link rel="stylesheet" href="lib/materialize-iso.css">
39+
<link rel="stylesheet" href="css/darkmode.css">
40+
</noscript>
2841

2942
<!-- Localization -->
3043
<link rel="prefetch" type="application/l10n" href="./localization.ini">
@@ -86,49 +99,16 @@
8699

87100
<body id="body" onload="init();" data-title="index" id="body" style="background: #f9f9f9;">
88101
<div id="loading-image-container"
89-
style="position: absolute; width: 100%; height: 100%;cursor: wait; text-align: center; background-color: #FFFFFF;">
90-
<script>
91-
let loadL10nSplashScreen = function () {
92-
console.debug(
93-
"The browser is set to " + navigator.language
94-
);
95-
let lang = navigator.language;
96-
if (localStorage.languagePreference) {
97-
console.debug(
98-
"Music Blocks is set to " +
99-
localStorage.languagePreference
100-
);
101-
lang = localStorage.languagePreference;
102-
}
103-
104-
console.debug("Using " + lang);
105-
if (lang === undefined) {
106-
lang = "enUS";
107-
console.debug("Reverting to " + lang);
108-
}
102+
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;">
103+
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>
109104

110-
// Intentional placement of SVG image per user request by Japanese Schools.
111-
112-
if (lang === "ja") {
113-
document.getElementById(
114-
"loading-image-container"
115-
).innerHTML =
116-
'<img src="loading-animation-ja.svg" style="width: 100%; margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />';
117-
} else {
118-
document.getElementById(
119-
"loading-image-container"
120-
).innerHTML =
121-
'<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>';
122-
}
123-
};
105+
<div class="loading-text" id="loadingText" style="margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
106+
</div>
124107

125-
loadL10nSplashScreen();
126-
</script>
127-
<div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
128-
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs">
108+
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs"
109+
style="position: fixed; bottom: 20px; right: 20px;">
129110
<div class="logo-container" id="bottom-right-logo">
130111
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501 167" height="50" width="150">
131-
<!-- Logo paths -->
132112
<path
133113
d="m63.05 117.52c-11.05 0-21.12-5.5-21.12-11.539 0-3.157 2.303-5.63 5.244-5.63 2.02 0 3.719 1.183 5.515 2.435 2.592 1.809 5.529 3.855 10.651 3.855 5.139 0 8.21-2.647 8.21-5.209 0-3.416-5.271-5.607-10.852-7.927-7.799-3.243-16.639-6.918-16.639-15.886 0-10.573 9.933-16.279 19.28-16.279 7.89 0 18.895 4.132 18.895 10.86 0 2.526-1.763 5.244-5.632 5.244-2.068 0-3.558-1.125-4.997-2.212-1.872-1.414-3.994-3.02-8.266-3.02-1.209 0-7.242.227-7.242 4.726 0 2.729 4.879 4.613 10.04 6.608 7.772 3 17.446 6.739 17.446 16.333.002 12.12-10.646 17.636-20.538 17.636"
134114
class="color-change" />
@@ -159,8 +139,45 @@
159139
</svg>
160140
</div>
161141
</a>
142+
162143
<script>
163144
document.addEventListener("DOMContentLoaded", function () {
145+
let loadL10nSplashScreen = function () {
146+
console.debug("The browser is set to " + navigator.language);
147+
let lang = navigator.language;
148+
if (localStorage.languagePreference) {
149+
console.debug(
150+
"Music Blocks is set to " + localStorage.languagePreference
151+
);
152+
lang = localStorage.languagePreference;
153+
}
154+
155+
console.debug("Using " + lang);
156+
if (lang === undefined) {
157+
lang = "enUS";
158+
console.debug("Reverting to " + lang);
159+
}
160+
161+
const container = document.getElementById("loading-media");
162+
163+
if (lang === "ja") {
164+
container.innerHTML = `
165+
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
166+
<img src="loading-animation-ja.svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
167+
</div>`;
168+
} else {
169+
container.innerHTML = `
170+
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
171+
<video loop autoplay muted playsinline style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;">
172+
<source src="loading-animation.webm" type="video/webm">
173+
<source src="loading-animation.mp4" type="video/mp4">
174+
</video>
175+
</div>`;
176+
}
177+
};
178+
179+
loadL10nSplashScreen();
180+
164181
setTimeout(function () {
165182
const loadingText = document.getElementById("loadingText");
166183
const texts = [_("Do, Re, Mi, Fa, Sol, La, Ti, Do"), _("Loading Music Blocks..."), _("Reading Music...")];

0 commit comments

Comments
 (0)