Czy tak bardzo jest ważne aby strona internetowa była szybka? Nikt z nas nie lubi oglądać wirujących ślimaków, biegających kropeczek i innych wynalazków zwanych preloader – mających w teorii umilić nam czas oczekiwania na pełne wczytanie strony. Z pomocą przychodzi nam optymalizacja kodu strony. Ważna także dla procesu pozycjonowania. O tym że pozycjonowanie strony w wyszukiwarce Google jest procesem napiszę niebawem.
Szybkość wczytywania strony – dlaczego tak ważna.
Google w swoich opracowaniach z 2016 roku wskazuje, że 40% internautów rezygnuje z wejścia na stronę gdy ta wczytuje się dłużej niż 5 sekund (w porównaniu do strony ładującej się 1 sekundę). Nikt nie lubi czekać w naszym szybkim świecie. Nic nas tak bardzo nie irytuje jak działające powoli “coś”, co może i powinno być szybkie. Konkurencja w sieci jest tak wielka, że internauta odpuści sobie wejście na taką stronę internetową i poszuka innej. A my stracimy potencjalnego klienta. Czy można stworzyć stronę www tak aby była atrakcyjna wizualnie (multimedia to istotny element tworzący nowoczesne strony internetowe) a jednocześnie “lekka” i szybka w transferze?
Jak zmierzyć czy strona internetowa jest szybka?
Zaczniemy od przetestowania naszej strony. Internet oferuje nam wiele narzędzi do testowania, ja opiszę pokrótce te podstawowe (chociaż to oczywiście wybór subiektywny). Ponieważ w naszym pięknym kraju 90% internautów korzysta z wyszukiwarki google.com ważnym jest zatem przetestowanie strony internetowej własnie na narzędziu udostępnionym przez Google. To narzędzie nie do końca wskazuje szybkość wczytywania strony www, co raczej jej przyjazność dla robotów Googla. Tych, które uruchamiamy wpisując frazę do wyszukania. Stąd jest to ważna dla nas informacja w procesie optymalizacji. Zatem sprawdźmy PageSpeed Inshights.
Pierwszy wynik określa nam szybkość na mobilu – czyli smartfonach, drugi zaś dla wersji desktopowej – na komputer stacjonarny. Dobrze jest mieć “zimny” zielony wynik – co nie jest łatwe dla mobila. Pod wynikami Google podpowiada nam, co należy zrobić by poprawić swoją stronę.
Innym polecanym narzędziem jest GT METRIX – który powie nam ile czasu potrzeba na wczytanie strony, jak jest duża (w branży mówimy ile “waży”) i jak plasuje się na tle innych stron. Również GT METRIX podpowiada nam, jak ulepszyć stronę – robi to nawet bardziej szczegółowo niż PSI.
Musimy jednak wiedzieć, że na wyniki testów wpływ ma wiele czynników. Nawet takie jak pora dnia/doby o której dokonujemy testu – internet tak jak nasze drogi – ma swoje godziny szczytu w których potrafi się “korkować”. Dla poprawnego obrazu naszej strony powinniśmy przeprowadzić kilka/naście testów o różnych porach.
Grafika na nowoczesnej stronie – dobrodziejstwo i wyzwanie.
Grafiki czynią nasze strony internetowe ciekawymi, urozmaicają i ułatwiają przekaz, wręcz go przyspieszają. Bo przecież jeden obrazek bywa wart tysiąca słów. Niestety, od strony technicznej ten jeden obrazek to zawsze będzie więcej niż tysiąc słów. Pliki graficzne czy też ogólnie – multimedialne są stosunkowo duże i wymagają dłuższego transferu. To ogólnie przekłada się na szybkość strony. Prawie zawsze gdy czekacie aż wczyta się jakaś strona internetowa – czekacie aż Wasza przeglądarka pobierze i przeskaluje jakąś grafikę/plik multimedialny. Średniej jakości zdjęcia wykonywane np. smartfonem mają rozdzielczość rzędu 5-6 MPx i wielkość 2-3 MB. Oznacza to, że np. ich szerokość wynosi jakieś 3600 pikseli, podczas gdy ekran monitora Full HD ma szerokość 1920 pikseli. Aby takie zdjęcie zmieścić na ekranie – i to zazwyczaj nie na całości widoku, lecz jego części – przeglądarka musi go przeskalować. Ostatecznie okazuje się, że z naszego serwera wysyłam niepotrzebnie do 80% ilości danych.
Grafiki to w optymalizacji stron najłatwiejszy element, jednocześnie jeden z najbardziej znaczących. Dlatego, tu się powtórzę, multimedia należy optymalizować. W skrócie przyciąć i skompresować bądź przekonwertować na nowoczesny, leciutki format webp. Do optymalizacji polecam między innymi usługę online tinypng. Chociaż gdy poszukacie w sieci znajdziecie kilka innych propozycji
Optymalizacji grafik może dokonać większość z internautów samodzielnie, i tym samym poprawić wynik swojej strony. Kolejne działania związane są z kodem strony internetowej i jest to zagadnienie raczej dla bardziej wtajemniczonych. W kolejnych wpisach omówimy minifikację kodów css, js czy html. Cacheowanie strony, wklejanie kodu css i js w dokument html, korzystanie z technologi serwerowych czy usuwanie zbędnego kodu css (zazwyczaj). Zapraszam