Lazy load na stronie html, czyli opóźnione ładowanie obrazków
Zabrałam się do optymalizacji i przyspieszania strony, która w google page speed test nie do końca miała zadowalające wyniki. W wersji mobilnej wynik około 70/100, a na komputerze 90 kilka na 100. Po optymalizacji udało mi się uzyskać najwyższą notę na komputerze – 100/100 punktów, a w wersji mobilnej około 90. Jedną z wielu rzeczy do poprawy były obrazki na stronie. Były za ciężkie, za wolno się wgrywały i speed test sugerował, bym użyła lazy load, czyli leniwego, opóźnionego ładowania obrazków. Działa to na takiej zasadzie, że jak przewija się stronę, to obrazki wczytują się stopniowo, dzięki czemu strona wczytuje się szybciej i uzyskuje lepszy wynik w page speed test.
Wstawiamy funkcję lazy load na stronie html
Jeśli mamy stronę na cms WordPress, to sprawa jest prosta, bo od tego są wtyczki, dużo wtyczek. Jest to dosłownie kilka sekund instalacji i gotowe, mamy działający lazy load. A jeśli mamy stronę wykonaną w html, to trzeba trochę więcej czasu na to poświęcić. Ja zanim to zrobiłam, straciłam ładnych kilka godzin na szukaniu odpowiedniego kodu, poradnika. Przewertowałam wiele stron polskich i zagranicznych, by w końcu uzyskać efekt, na jakim mi zależało i przyspieszyć stronę.
Zaczynamy od pobrania plików skryptu js TUTAJ
To wszystko co musicie pobrać. Rozpakujcie plik .zip i z katalogu „dist” —> „js” skopiujcie plik „iolazy.min.js”, który wklejcie do katalogu ze stroną. Może to być w głównym folderze lub podfolderze.
Umieszczamy kod skryptu
W nagłówku strony w <head></head> wstawiamy kod skryptu .js:
<script src="iolazy.min.js"></script>
W <body> wstawiamy kod obrazka:
<img data-src="obrazek.png" alt="obrazek" class="lazyload">
Czyli do src dodajemy data- oraz class=”lazyload”.
Przed zamknięciem znacznika </body> wstawiamy kod skryptu:
<script>
document.addEventListener("DOMContentLoaded", function () {
new IOlazy();
});
</script>
I to wszystko! Tylko te 3 czynności i efekt gotowy! Krótszego poradnika nie znajdziecie 🙂
Teraz strona się szybciej wczytuje oraz dostaje doładowanie w google page speed test oraz zapunktuje w wyszukiwarkach, dzięki lepszej optymalizacji. Przykład ładowania obrazków w lazy load możecie zobaczyć na mojej stronie: www.stronki.pl
Poniżej wklejam cały kod html dla osób które chcą się upewnić, że zrobiły to dobrze 🙂 Pominęłam linijki kodu w head ze stylem, fontem, faviconką, tytułem, słowami kluczowymi itp, bo to każdy we własnym zakresie doda.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<script src="iolazy.min.js"></script>
</head>
<body>
<img data-src="obrazek.png" alt="obrazek" class="lazyload">
<script>
document.addEventListener("DOMContentLoaded", function () {
new IOlazy();
});
</script>
</body>
</html>
