Jak poprawić szybkość ładowania strony?
Na szybkość działania strony ma wpływ wiele czynników, które samemu ciężko zidentyfikować. Na szczęście z pomocą przychodzi nam Google udostępniając narzędzie do weryfikacji prędkości ładowania.
Google Page Speed Insights
Narzędzie potrafiące przeanalizować Twoją stronę i wskazać miejsca, które należy poprawić w celu skrócenia czasu ładowania strony. Ocena przedstawiana jest w punktach od 0 do 100 oddzielnie dla strony w wersji na komputery i w wersji na urządzenia mobilne. Obecnie kod strony pisze się raz używając techniki Responsive Web Design przy czym ten sam kod może być napisany optymalnie dla komputerów ale już nieoptymalnie dla urządzeń mobilnych. Stronę warto przetestować na kilku smartfonach i w różnych przeglądarkach zamiast tylko zmniejszać przeglądarkę komputerową symulując urządzenie mobilne. Oprócz samego rankingu otrzymasz listę rzeczy do poprawienia oraz ogólne wskazówki jak naprawia się takie błędy.
Co to znaczy że szybka?
Szybka strona to taka, która po pierwsze ściąga się szybko z serwera do Twojej przeglądarki internetowej a po drugie renderowanie nie zajmuje dużo czasu. Renderowanie to proces przetwarzania dokumentu elektronicznego do formy graficznej. W przypadku stron internetowych będzie to wyświetlenie strony www po przetworzeniu dokumentu HTML, nałożeniu stylów CSS i wykonaniu kodu Java Script. Zarówno serwer, HTML, CSS jaki i JavaScript mogą być odpowiedzialne za opóźnienia w renderowaniu. Samodzielne znalezienie przyczyny wymaga sporo wiedzy, umiejętności i czasu. Na szczęście Google stworzyło do tego narzędzie.
Po co szybka strona
Po pierwsze chodzi tu o użytkownika Twojej strony internetowej. Szybkość jej ładowania ma wpływ na to czy w ogóle ją zobaczy. Jeśli strona nie wyświetla się w kilka sekund od kliknięcia to niezależnie od przyczyny, użytkownik przejdzie do konkurencji. Jeśli strona już się wyświetli ale w tle nadal działają skrypty Java Script, przez które klikanie w linki na stronie nie daje żadnych efektów to użytkownik stwierdzi, że strona nie działa i pójdzie gdzie indziej.
Po drugie szybkość ładowania strony to jeden ze współczynników brany pod uwagę przy rankingu Google. Paradoksalnie Google bierze pod uwagę szybkość ze względu na użytkowników. Wszystko więc sprowadza się do tego, że przyzwyczailiśmy się do przedstawiania informacji w internecie maksymalnie kilka sekund po kliknięciu w link.
Co ma wpływ na szybkość
Nie musisz być programistą, żeby dostosować stronę do wytycznych, które przedstawi Ci Page Speed Insights. Nie wszystko jednak naprawisz bez przyswojenia wiedzy programistycznej. Możliwe, że po dostosowaniu kilku z zaprezentowanych w raporcie rzeczy, otrzymasz zadowalający wynik i pomoc programisty okaże się niepotrzebna. Idealnie byłoby gdybyś otrzymał 100/100 punktów ale w praktyce 80 to wartość, przy której strony ładują się już szybko z punktu widzenia użytkownika.
Podstawowa sprawa:
jeśli w raporcie znajdziesz informację o długiej odpowiedzi serwera to po pierwsze sprawdź, czy możesz włączyć kompresowanie za pomocą GZIP. Powinieneś znaleźć taką opcję w panelu administracyjnym hostingu. Następnie spróbuj zainstalować CACHE. Możesz poszukać takiej opcji w panelu administracyjnym hostingu bądź instalując odpowiedni plugin w systemie CMS jeśli taki posiadasz. Kiedy raport nadal pokazuje, że serwer wolno odpowiada to warto zastanowić się nad hostongodawcą.
Często zapominana sprawa:
zdjęcia o wysokiej rozdzielczości nie nadają się na strony internetowe! W większości analizowanych stron znalazłem tę samą informację mówiącą o tym, że obrazki można zmniejszyć. W raporcie dostaniesz zdjęcia już zoptymalizowane. Sprawdź je przed wrzuceniem na stronę bo bywa tak, że optymalny rozmiar według Google to taki, przy którym tracimy na jakości. Warto wtedy samodzielnie dostosować jakość w programie graficznym bądź narzędziu online. Istnieje narzędzie https://cloudinary.com, które posiada 2 warte uwagi funkcjonalności:
- Jest serwerem Content Delivery Network, czyli właściwie grupą serwerów, które pozwalają na bardzo szybkie dostarczanie zasobów takich jak obrazki.
- Ma narzędzie do edycji obrazków. Nie musisz ich zapisywać bo po wybraniu parametrów przedstawia URL do zmienionego obrazka.
Istnieje wtyczka do WordPress integrująca naszą stronę z Cloudinary. Narzędzie jest darmowe do pewnego limitu wyrażonego w kredytach. Jeśli mówimy o firmowej stronie internetowej to możesz być spokojny o to, że nie przekroczysz limitów.
Optymalizacja kodu:
pośród różnych błędów związanych z kodem możesz znaleźć taki, mówiący o tym, że pliki JS bądź CSS można zmniejszyć. Jeśli masz CMS to poszukaj wtyczki do kompresowania zasobów. Jeśli nie masz CMS to znajdź pliki .js i .css w katalogu ze stroną, przetwórz je przez https://jscompress.com/ oraz https://cssminifier.com/ i wrzuć z powrotem na serwer.
Inne błędy pokazane w Page Speed Insights będą wymagały więcej wiedzy. Przedstawię je w późniejszych wpisach.
Mobile First
W ubiegłym, 2018 roku Google wprowadziło indeks Mobile First co oznacza, że ważniejsze dla nich jest działanie strony na urządzeniach mobilnych niż na komputerach. Wynika to z proporcji użytkowników mobilnych do użytkowników korzystających z komputerów. Widać trend wskazujący na przenoszenie się ludzi z komputerów na bardziej przenośne urządzenia. Sprawdź statystyki swojej strony w https://analytics.google.com i pewnie zauważysz to samo. Dla właścicieli stron internetowych oznacza to, że projektując strony należy przede wszystkim zastanowić się nad wyglądem i użytecznością na urządzeniach przenośnych.
Co mogę zrobić sam
Google Page Speed Insights przedstawia listę błędów i opis jak je naprawić. W naprawie może pomóc Ci skopiowanie błędu i wyszukanie w Google. Jeśli opisy i instrukcje błędów będą nadal niezrozumiałe a wynik Twojej strony poniżej 80 to warto skontaktować się z kimś, kto robi takie rzeczy zawodowo. Na blogu będą pojawiać się wpisy na temat prędkości ładowania strony.
Prędkość ładowania strony to jedno z ważniejszych zagadnień w marketingu internetowym. Zarówno Google jak i użytkownicy lubią kiedy treści pokazują się bez zbędnej zwłoki. Pamiętaj, że strona konkurencji jest tylko jedno kliknięcie od Twojej.