Dużo błędów popełnionych podczas optymalizacji. W kodzie widać bardziej oszukiwanie googla niż realną optymalizacje. Dużo artykułów o optymalizacji obrosło w mity lub są nieaktualne więc nie dziwi Ci się że trudno się w tym połapać.
Pierwsza zasada preload nie jest do niczego potrzebny jeśli możesz podać wprost zasób który pobierasz.
Druga zasada jak najmniej JavaScriptu, najlepiej gdyby JS nie był wcale potrzebny do wyświetlenia strony. a służył tylko do interaktywności PO wczytaniu strony. Tak abyś mógł wczytać JSy gdy user już ogląda treść.
--------------------------
Obie zasady łamiesz juz przy wczytywaniu CSSów
<link rel="preload" as="style" onload="this.onload=null; this.rel='stylesheet'" href="fonts/social/styles.min.css">
Nie dość że nie potrzebnie użyty preload to dodatkowo wymagasz uruchomienia JSa po załadowaniu.
--------------------------------------
Jeśli nie próbowałeś ustaw wczytywanie WSZYSTKICH plików JS jako defer. Nie musisz też umieszczać znaczników <script> na dole strony jeśli używasz atrybutów defer lub async :)
----------------------------------
Ale wracając do Twoich problemów:
Główny obrazek ma class="lazy-img" data-src="images/lexdex/roofing/top-slide1.webp" więc znów łamiesz zasadę z JSem. Aby Twój obrazek się wyświetlił musisz wczytać wszystkie JSy odpowiedzialne za lazy-img i dopiero po tym wszystkim przeglądarka może wyświetlić obrazek. Dodatkowo przez łamanie pierwszej zasady z preload przeglądarka niezaleznie od rozdzielczości wczytuje duży obrazek który jest w preload. Niepotrzebnie tracisz transfer na wczytywanie dużego obrazka a cała reszta zasobów traci na prędkości wczytania.
Jak to naprawić? USUŃ lazy-loading dla głównego obrazka. lazy-loading używaj tylko do pozostałych slidów jeśli będą obecne. Do innych obrazków zamiast JSa użyj natywnego lazyloadingu z przeglądarek
<img loading="lazy" src="image.jpg" alt="..." />
Zamiast używania JSa do zmiany obrazka
var bannerImage = document.getElementById('baner-image');
if (window.screen.width <= 800) {
bannerImage.dataset.src = 'images/lexdex/roofing/top-slide1-700x.webp';
}
użyj atrybutu srcset i sizes dzięki temu obrazek będzie mógł się wczytać bez używania JSa i preload i wczyta się tylko jeden :)
<img
srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
---------------------------------------
Kolejna rzecz usuń loader który zasłania stronę. Potrzebujesz JSa aby schować loader więc jest zaprzeczeniem optymalizacji :) Gdy usuniesz loader zobaczysz co się dzieje z czcionką i łatwiej będzie doradzić rozwiązanie :)
PS daj znać jak wszystko poprawisz to będziemy mogli zerknąć na pozostałe błędy. Ten loader na całą stronę utrudnia debugowanie co się tam pod spodem dzieje.
