feat: enhance performance and accessibility with non-blocking font loading, lazy-loading images, and mobile navbar toggle

php/head.php

@@ -160,10 +160,12 @@
 <!-- Include Favicon -->
 <?php echo Theme::favicon('img/favicon.png'); ?>
 
-<!-- Inter typeface (Blowfish-like typography) -->
+<!-- Inter typeface (Blowfish-like typography) — loaded non-render-blocking:
+     fetched as print media, then flipped to all once it arrives. -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'">
+<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
 
 <!-- Include Bootstrap CSS file bootstrap.css -->
 <?php echo Theme::cssBootstrap(); ?>

php/page.php

@@ -7,7 +7,7 @@
 	<!-- Cover image -->
 	<?php if ($page->coverImage()): ?>
 	<div class="cover-image-wrapper">
-		<img class="card-img-top" alt="<?php echo htmlspecialchars($page->title()); ?>" src="<?php echo $page->coverImage(); ?>"/>
+		<img class="card-img-top" alt="<?php echo htmlspecialchars($page->title(), ENT_QUOTES, 'UTF-8'); ?>" src="<?php echo $page->coverImage(); ?>" fetchpriority="high" decoding="async"/>
 	</div>
 	<?php endif ?>
 
@@ -25,7 +25,16 @@
 
 		<!-- Full content -->
 		<div class="content">
-			<?php echo $page->content(); ?>
+			<?php
+				// Lazy-load + async-decode in-content images that don't already
+				// set a loading attribute. Operates on the rendered HTML, so
+				// carousel/tabs fences (still raw text inside <pre>) are untouched.
+				echo preg_replace(
+					'/<img(?![^>]*\bloading=)/i',
+					'<img loading="lazy" decoding="async"',
+					$page->content()
+				);
+			?>
 		</div>
 
 		<!-- Tags and Category -->