Spis treści
Dlaczego warto zoptymalizować stronę pod kątem wydajności?
Google już dawno potwierdziło, że szybkość oraz łatwość poruszania się po stronie przez Googlebota są ważne. Czas wczytywania strony jest jednym z ważniejszych elementów User Experience. Ma duże znaczenie chociażby na zadowolenie użytkowników, a co za tym idzie również inne czynniki behawioralne. Z punktu widzenia pozycjonowania, TTFB (Time To First Byte) i TTLB (Time To Last Byte) to jedne z najważniejszych parametrów wydajności witryny. Szybkość ładowania strony ma więc wpływ na SEO, ale również na efektywność, ruch na stronie, współczynnik odrzuceń czy konwersje, a także wynik jakości w Ads co przekłada się na niższe ceny i wyższe pozycje reklam. Jeśli strona ładuje się zbyt wolno, tracisz potencjalnych klientów.
Badanie Google pokazało, że zwiększenie czasu wczytywania strony mobilnej z 1s do 5s powoduje wzrost prawdopodobieństwa odrzucenia aż o 90%.
Należy też pamiętać, że dużo osób korzysta z urządzeń mobilnych, które ogranicza nieduża moc obliczeniowa i wolniej działający internet, więc ten czynnik ma w tym przypadku jeszcze większe znaczenie.
Jak sprawdzić czas ładowania strony?

1. Raport szybkość witryny w Google Analytics w sekcji Zachowanie > Szybkość Witryny. Można sprawdzić ile wynosił czas wczytywania strony i poszczególnych dokumentów.
2. Google PageSpeed Insights podaje ocenę szybkości ładowania strony na komputerach jak i urządzeniach mobilnych oraz uwagi dotyczące elementów wymagających poprawy i ich rozwiązania.
3. Test My Site przedstawia czas wczytywania strony na urządzeniach mobilnych, wraz z jego oceną i szacunkowym odsetkiem utraconych użytkowników. Są również porady na temat zoptymalizowania najważniejszych elementów z przybliżonym czasem, o który może skrócić się wczytywanie. Można też porównać parametry strony z innymi witrynami z tej samej lub innych branż.
Sposoby skrócenia czasu ładowania się strony
1. Zmniejszenie rozmiaru grafiki i dynamiczne ładowanie zdjęć

2. Odinstaluj nieużywane wtyczki

3. Eliminuj zbędne przekierowania

4. Korzystaj z pamięci podręcznej przeglądarki – Expire headers

5. Kompresja kodu CSS, JS czy HTML – minifikacja
Usuń zbędne znaki jak spacje, znaki nowych linii, komentarze. W plikach JS skróć nazwy zmiennych. Do minifikacji CSS i JS można użyć narzędzi online.
6. Minimalizacja liczby zapytań do serwera
Zmniejszenie liczby plików CSS
Połącz kilka plików css w jeden pamiętając o zachowaniu kolejności w jakiej były wczytywane na stronie.
Zmniejszenie liczby plików JS

Wyeliminowanie ładowania niepotrzebnych elementów
Sprawdź w kodzie strony czy nie są ładowane czcionki lub skrypty, które nie są już wykorzystywane. Realizując ten punkt zastanów się również czy wszystkie funkcjonalności strony są istotne dla użytkownika.
7. Miejsce plików CSS i JS w kodzie strony
Odwołanie do pliku CSS powinno znajdować się na końcu sekcji head, a odwołanie do pliku JS na końcu znacznika body. Ponieważ skrypt JS blokuje ładowanie się innych komponentów to jego wczytywanie powinno odbywać się jak najpóźniej. Można też użyć parametru async lub defer.
8. Kompresja GZIP

9. CSS Sprites
Jeśli na Twojej stronie jest dużo małych elementów graficznych to dzięki temu rozwiązaniu można połączyć je w jeden plik i wykorzystać je za pomocą stylów CSS.
10. Hosting

11. CDN (ang. content delivery network)
Czyli ładowanie treści z kilku serwerów jednocześnie. Sieć dostarczania treści oferuje Microsoft czy Google.
Wyświetlanie na urządzaniach mobilnych
Trzeba również wspomnieć o przystosowaniu strony do wyświetlania na urządzeniach mobilnych, gdzie jest największe ryzyko ograniczonej przepustowości łącza, a jednocześnie nie ma potrzeby wyświetlania grafik o bardzo dużej rozdzielczości. Zastosowanie bardziej skompresowanych i o mniejszych wymiarach grafik w wersji mobilnej jest jednym z najprostszych sposobów na skrócenie czasu ładowania. Najlepiej aby strona była w pełni responsywna, ale można też stworzyć osobną stronę lub aplikację dedykowaną specjalnie dla smartfonów i tabletów.
Można również stworzyć wersję strony AMP (ang. Accelerated Mobile Pages). Przyspieszone strony mobilne to inicjatywa open source, dostarczająca witryny, które ładują się szybko i dobrze wyglądają na urządzeniach mobilnych, nawet w przypadku wolnych sieci. Są to strony oparte na statycznych treściach, które mają się szybko renderować. Taka strona może się zapisać i ładować na przykład z cache Google.
Jak widać zmniejszyć czas ładowania witryny można dzięki podstawowym zabiegom nie wymagającym specjalistycznej wiedzy, a jeśli mamy możliwości to warto również skorzystać z bardziej zaawansowanych technik. Wprowadzenie wszystkich opisanych zmian będzie niestety czasochłonne, ale wdrożenie nawet jednego z opisanych rozwiązań np. optymalizacji grafik może przyczynić się skrócenia czasu ładowania strony i poprawę współczynnika konwersji.
Ania
Bardzo konkretny artykuł i przewodnik w jednym. Jedyne, co dodałabym od siebie to kwestia stron we Flashu i ciężkich „upiększaczy”, takich jak animacje, wideo, wirtualne spacery, itp. Wielu osobom wydaje się, że to wpływa na atrakcyjność witryny i w sumie mają rację. Z tym, że obciążają stronę tak, że użytkownik szybciej ją opuści niż zobaczy ten atrakcyjny element. Myślę, że w tym przypadku warto zastosować złoty środek i sprawdzać, co ile waży i jak wpływa na ładowanie strony.