Enhance image loading performance by adding preload links and setting loading attributes for logos in app.html (#24011)

src/app.html

@@ -71,6 +71,16 @@
 					metaThemeColorTag.setAttribute('content', '#171717');
 				}
 
+				const preloadHref = document.documentElement.classList.contains('dark')
+					? '/static/splash-dark.png'
+					: '/static/splash.png';
+				const preload = document.createElement('link');
+				preload.rel = 'preload';
+				preload.as = 'image';
+				preload.href = preloadHref;
+				preload.setAttribute('fetchpriority', 'high');
+				document.head.appendChild(preload);
+
 				window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
 					if (localStorage.theme === 'system') {
 						if (e.matches) {
@@ -90,6 +100,8 @@
 				logo.id = 'logo';
 				logo.style =
 					'position: absolute; width: auto; height: 6rem; top: 44%; left: 50%; transform: translateX(-50%); display:block;';
+				logo.loading = 'eager';
+				logo.fetchPriority = 'high';
 				logo.src = isDarkMode ? '/static/splash-dark.png' : '/static/splash.png';
 
 				document.addEventListener('DOMContentLoaded', function () {
@@ -139,6 +151,8 @@
 					id="logo-her"
 					style="width: auto; height: 13rem"
 					src="/static/splash.png"
+					loading="eager"
+					fetchpriority="high"
 					class="animate-pulse-fast"
 				/>