Skip to content

Commit

Permalink
perf: fix large-layout-shift and render-blocking issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@apsinghdev
apsinghdev committed Feb 1, 2025
1 parent 4ffa134 commit 10723b3
Showing 1 changed file with 64 additions and 47 deletions.
111 changes: 64 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,27 @@
<link rel="manifest" href="android_chrome_manifest.json">

<!-- Stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="fonts/material-icons.css">
<link rel="stylesheet" href="css/activities.css">
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="dist/css/keyboard.css">
<link rel="stylesheet" href="dist/css/windows.css">
<link rel="stylesheet" href="lib/materialize-iso.css">
<link rel="stylesheet" href="css/darkmode.css">
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="fonts/material-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="css/activities.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="dist/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="dist/css/keyboard.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<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'">

<!-- Fallback for browsers that don't support preload -->
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="fonts/material-icons.css">
<link rel="stylesheet" href="css/activities.css">
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="dist/css/keyboard.css">
<link rel="stylesheet" href="dist/css/windows.css">
<link rel="stylesheet" href="lib/materialize-iso.css">
<link rel="stylesheet" href="css/darkmode.css">
</noscript>

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

<body id="body" onload="init();" data-title="index" id="body" style="background: #f9f9f9;">
<div id="loading-image-container"
style="position: absolute; width: 100%; height: 100%;cursor: wait; text-align: center; background-color: #FFFFFF;">
<script>
let loadL10nSplashScreen = function () {
console.debug(
"The browser is set to " + navigator.language
);
let lang = navigator.language;
if (localStorage.languagePreference) {
console.debug(
"Music Blocks is set to " +
localStorage.languagePreference
);
lang = localStorage.languagePreference;
}

console.debug("Using " + lang);
if (lang === undefined) {
lang = "enUS";
console.debug("Reverting to " + lang);
}
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;">
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>

// Intentional placement of SVG image per user request by Japanese Schools.

if (lang === "ja") {
document.getElementById(
"loading-image-container"
).innerHTML =
'<img src="loading-animation-ja.svg" style="width: 100%; margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" />';
} else {
document.getElementById(
"loading-image-container"
).innerHTML =
'<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>';
}
};
<div class="loading-text" id="loadingText" style="margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
</div>

loadL10nSplashScreen();
</script>
<div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs">
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs"
style="position: fixed; bottom: 20px; right: 20px;">
<div class="logo-container" id="bottom-right-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 501 167" height="50" width="150">
<!-- Logo paths -->
<path
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"
class="color-change" />
Expand Down Expand Up @@ -159,8 +139,45 @@
</svg>
</div>
</a>

<script>
document.addEventListener("DOMContentLoaded", function () {
let loadL10nSplashScreen = function () {
console.debug("The browser is set to " + navigator.language);
let lang = navigator.language;
if (localStorage.languagePreference) {
console.debug(
"Music Blocks is set to " + localStorage.languagePreference
);
lang = localStorage.languagePreference;
}

console.debug("Using " + lang);
if (lang === undefined) {
lang = "enUS";
console.debug("Reverting to " + lang);
}

const container = document.getElementById("loading-media");

if (lang === "ja") {
container.innerHTML = `
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
<img src="loading-animation-ja.svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;" alt="Loading animation" />
</div>`;
} else {
container.innerHTML = `
<div class="media-wrapper" style="width: 100%; max-width: 800px; aspect-ratio: 16/9; position: relative;">
<video loop autoplay muted playsinline style="position: absolute; top: 0; left: 0; 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>`;
}
};

loadL10nSplashScreen();

setTimeout(function () {
const loadingText = document.getElementById("loadingText");
const texts = [_("Do, Re, Mi, Fa, Sol, La, Ti, Do"), _("Loading Music Blocks..."), _("Reading Music...")];
Expand Down

0 comments on commit 10723b3

Please sign in to comment.