optimized js

static/js/script.js

@@ -1,18 +1,18 @@
 class ThemeManager {
     constructor() {
-        // Cache DOM elements once
         this.toggle = document.getElementById('theme-toggle');
+        if (!this.toggle) return;
+        
         this.icon = document.getElementById('theme-icon');
-
-        // Get data attributes once
         const { iconBase, iconDark, iconLight, soundSrc } = this.toggle.dataset;
         this.iconBase = iconBase;
         this.iconDark = iconDark;
         this.iconLight = iconLight;
-
+        
-        // Create audio element only when needed
+        // Create audio element lazily only when needed
-        this.sound = new Audio(soundSrc);
+        this.sound = null;
-
+        this.soundSrc = soundSrc;
+        
         this.init();
     }
 
@@ -34,31 +34,31 @@ class ThemeManager {
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const newTheme = isDark ? 'light' : 'dark';
 
-        document.body.classList.add('theme-transition');
         document.documentElement.setAttribute('data-theme', newTheme);
-
-        // Use the inverse to update the icon to match the new theme
         this.updateIcon(!isDark);
-
         localStorage.setItem('theme', newTheme);
-
+        
-        // Use requestAnimationFrame for better performance on transition
+        // Lazy load sound only when needed
-        requestAnimationFrame(() => {
+        if (!this.sound && this.soundSrc) {
-            setTimeout(() => {
+            this.sound = new Audio(this.soundSrc);
-                document.body.classList.remove('theme-transition');
+        }
-            }, 300);
+        
-        });
+        if (this.sound) {
-
+            this.sound.play().catch(() => {});
-        this.sound.play().catch(() => {});
+        }
     }
 
-
-    // Extracted common functionality
     updateIcon(isDark) {
-        this.icon.setAttribute('href', 
+        if (this.icon) {
-            `${this.iconBase}${isDark ? this.iconDark : this.iconLight}`);
+            this.icon.setAttribute('href', 
+                `${this.iconBase}${isDark ? this.iconDark : this.iconLight}`);
+        }
     }
 }
 
-// Use modern syntax
+// Initialize when content is loaded
-document.addEventListener('DOMContentLoaded', () => new ThemeManager());
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => new ThemeManager());
+} else {
+    new ThemeManager();
+}

templates/shortcodes/youtube.html

@@ -1,6 +1,7 @@
 <div {% if class %}class="{{class}}"{% endif %}>
     <iframe 
         src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
+        loading="lazy"
         frameborder="0" 
         allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
         webkitallowfullscreen