Optymalizacja strony internetowej

Na czym polega optymalizacja strony?

Proces optymalizacji polega na wyeliminowaniu czynników które spowalniają działanie naszego serwisu internetowego. Szybkość działania strony internetowej jest niezwykle ważna ponieważ może spowodować frustrację użytkownika przy zbyt długim ładowaniu treści na naszej stronie. Optymalna strona to taka która ładuje się co najwyżej 2 sekundy zarówno na komputerach stacjonarnych jak i urządzeniach mobilnych.

Szybkość działania w dużej mierze decyduje o tym czy użytkownik zostanie na naszej stronie czy nie. Nie jest to jednak jedynym czynnik ponieważ zaraz obok szybkości stoi jakość. Poprawne rozmieszczenie elementów strony, wielkość czcionek oraz paleta kolorów w dużej mierze decydują o tym czy użytkownik zechce poznać treść danej witryny. W tym artykule skupimy się na rzeczach które każdy właściciel strony może zrobić aby polepszyć jakość swojej strony.

Optymalizacja zdjęć

Zdjęcia są bardzo ważnym elementem każdej strony czy sklepu internetowego. Dzięki nim możemy zachęcić użytkownika do dalszego działania w naszym serwisie. Zbyt duże obrazki mogą bardzo spowolnić naszą stronę. Poprzez wielkość mamy na myśli zarówno rozdzielczość naszego obrazku jak i jego rozmiar. Wystarczy jedno nieoptymalne zdjęcie a nasza strona staje się ogromnym ślimakiem na którego nikt nie ma czasu czekać. Obrazki można skompresować nie tracąc przy tym na jakości. Oczywiście mówimy tutaj o jakości widzianej dla ludzkiego oka. Do optymalizacji naszego obrazka możemy użyć darmowego narzędzia dostępnego z poziomu przeglądarki internetowej jakim jest Photopea. Można powiedzieć że jest to darmowa alternatywa dla Photoshopa. Podczas zapisu obrazu należy wybrać rozszerzenie nowej generacji jakim jest WebP. Jakość naszego obrazka możemy ustawić na 70%. Pamiętajmy także o rozdzielczości która ma duży wpływ na rozmiar.

Ładowanie niezbędnych zdjęć

Podczas wejścia na stronę, ładowane są wszystkie obrazy które się na niej znajdują. Nie jest to dobra praktyka ponieważ nasza strona jest spowalniana przed zbędne zasoby. Istnieje strategia leniwego ładowania obrazów, która polega na pobieraniu zasobów aktualnie widocznych przez użytkownika. Reszta zdjęć jest dociągania podczas scrolowania. Do użycia tej metody jest potrzebna podstawowa znajomość HTMLa.

Przykładowy obraz umieszczony na stronie:

<img src="pies.webp" alt="pies" />
Obraz ładowany podczas scrola:
<img loading="lazy" src="pies.webp" alt="pies" />

Optymalizacja czcionek

Czcionka jest jednym z kluczowych elementów naszej strony. Odpowiednio dobrana czcionka znacznie poprawia jakość strony oraz jej czytelność. Zasób ten jest niezbędny a im później załadowana jest czcionka tym dłużej użytkownik czeka na interesującą go teść. Ustawienie odpowiedniego atrybutu pozwala na załadowanie czcionek w pierwszej kolejności nie blokując pozostałych zasobów takich jak style.

Ładowanie czcionki w tle:

<link rel="preload" href="lato.woff2" as="font" type="font/woff2" crossorigin>

Minimalizacja css oraz js

Minimalizacja jest niczym innym jak procesem usuwania spacji, tabulatorów oraz znaków nowej lini. Proces ten może zostać zastosowany dla plików css oraz js. Aby zastosować ten proces należy skopiować zawartość interesującego nas pliku, użycie odpowiedniego narzędzia oraz zastąpienie zawartości pliku tym który otrzymaliśmy. Przykładowym narzędziem może być tutaj Minifier.

Podsumowanie

Optymalna witryna internetowa to klucz to większej ilości zadowolonych użytkowników. Optymalizacja może podnieść naszą pozycję w wyszukiwarce internetowej, ponieważ roboty indeksujące ocenią naszę stronę o wiele lepiej niż pozostałe witryny. Optymalizację może wykonać każdy kto ma dostęp do zródła witryny.