/************************************************ * 1. Inject Font Preload + Stylesheet into ************************************************/ var linkPreconnect1 = document.createElement("link"); linkPreconnect1.rel = "preconnect"; linkPreconnect1.href = "https://fonts.googleapis.com"; document.head.appendChild(linkPreconnect1); var linkPreconnect2 = document.createElement("link"); linkPreconnect2.rel = "preconnect"; linkPreconnect2.href = "https://fonts.gstatic.com"; linkPreconnect2.crossOrigin = "anonymous"; document.head.appendChild(linkPreconnect2); var linkPreload = document.createElement("link"); linkPreload.rel = "preload"; linkPreload.as = "style"; linkPreload.href = "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap"; document.head.appendChild(linkPreload); var linkStylesheet = document.createElement("link"); linkStylesheet.rel = "stylesheet"; linkStylesheet.href = "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap"; document.head.appendChild(linkStylesheet); /************************************************ * 2. Lazy Load for all images except hero banner * + Preload hero image to improve LCP ************************************************/ document.addEventListener("DOMContentLoaded", function () { var heroImg = document.querySelector('section:first-of-type img'); // Preload hero image to improve LCP if (heroImg && heroImg.src) { var preloadHero = document.createElement("link"); preloadHero.rel = "preload"; preloadHero.as = "image"; preloadHero.href = heroImg.src; document.head.appendChild(preloadHero); } // Lazy load for all other images var imgs = document.querySelectorAll("img"); imgs.forEach(function (img) { if (heroImg && img === heroImg) return; if (!img.getAttribute("loading")) { img.setAttribute("loading", "lazy"); } }); });