Оптимизировать изображения и загрузку страницы

index.php

@@ -12,5 +12,52 @@
 <?php require __DIR__ . '/fragments/cafes.php'; ?>
 <?php require __DIR__ . '/fragments/regional-food.php'; ?>
 <?php require __DIR__ . '/fragments/footer.php'; ?>
+<script>
+(() => {
+  const lazyBackgrounds = document.querySelectorAll('[data-bg]');
+  const revealItems = document.querySelectorAll('.page-title, .arch-card, .museum-card, .restaurant-card');
+
+  const loadBackground = (element) => {
+    const source = element.dataset.bg;
+    if (!source) return;
+    element.style.backgroundImage = `url("${source}")`;
+    element.removeAttribute('data-bg');
+    element.classList.add('bg-loaded');
+  };
+
+  if ('IntersectionObserver' in window) {
+    const backgroundObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        loadBackground(entry.target);
+        observer.unobserve(entry.target);
+      });
+    }, { rootMargin: '240px 0px' });
+
+    lazyBackgrounds.forEach((element) => backgroundObserver.observe(element));
+
+    const revealObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('is-visible');
+        observer.unobserve(entry.target);
+      });
+    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
+
+    revealItems.forEach((element) => {
+      element.classList.add('reveal');
+      revealObserver.observe(element);
+    });
+  } else {
+    lazyBackgrounds.forEach(loadBackground);
+    revealItems.forEach((element) => element.classList.add('is-visible'));
+  }
+
+  document.querySelectorAll('img').forEach((image) => {
+    if (!image.hasAttribute('loading')) image.loading = 'lazy';
+    if (!image.hasAttribute('decoding')) image.decoding = 'async';
+  });
+})();
+</script>
 </body>
 </html>