Optymalizacja czasu ładowania strony

calendar 2021/06/18
  • niezbędnik właściciela e-sklepu

W e-handlu tzw. pagespeed ma kolosalne znaczenie. Liczy się każda sekunda. Optymalizacja czasu ładowania...

example_image
W e-handlu tzw. pagespeed ma kolosalne znaczenie. Liczy się każda sekunda. Optymalizacja czasu ładowania strony pozwala nieco zaoszczędzić te sekundy.
 
  Prędkość ładowania witryn internetowych jest jednym z kluczowych czynników wpływających na doświadczenie użytkowników, o czym pisaliśmy m.in. we wpisie Prędkość ładowania strony a sprzedaż w e-sklepie. Dodatkowo ma ona niebagatelny wpływ na pozycje, jakie dana witryna osiąga w wynikach wyszukiwania zapytań internautów. Żaden właściciel e-sklepu nie powinien więc mieć wątpliwości, czy optymalizacja czasu ładowania strony jest ważna. Pytanie powinno brzmieć: jak to robić?  

Optymalizacja czasu ładowania strony e-sklepu

  Wiedza dotycząca sprawdzonych trików na skrócenie czasu ładowania witryny nie wymaga wtajemniczenia w meandry projektowania stron www, zarządzania user experience czy SEO. Większość dostępnych narzędzi służących do diagnozy prędkości ładowania (opis kilku znajdziesz we wpisie 6 darmowych narzędzi umożliwiających samodzielny test prędkości witryny) oprócz wyniku testu pagespeed podrzuca także garść sposobów na jego poprawę.   My także dorzucamy od siebie kilka dobrych praktyk w zakresie optymalizacji czasu ładowania strony.  
Zmniejszenie wielkości grafik
Grafiki oraz zdjęcia (w tym packshoty) nie powinny przekraczać 200 kb. W przeciwnym razie mogą negatywnie wpływać na czas ładowania strony.  Jak jednak pogodzić wysoką jakość z niską wagą plików? Służy temu kompresja obrazów do formatu .png, który zachowuje satysfakcjonującą jakość, a jednocześnie plik zachwyca lekkością.  
Wybór sprawdzonego hostingu
Przy wyborze hostingu cena nie powinna przysłonić szybkości serwera. Szczególną ostrożność należy zachować w przypadku tzw. hostingu współdzielonego, czyli takiego, który obsługuje wiele niezależnych witryn. Wówczas łatwo nie tylko o przekroczenie limitu dla pojedynczej strony www (np. w wyniku skokowego przyrostu odwiedzających). Zupełnie niezamierzenie można zostać ofiarą cudzego sukcesu, ponieważ przekroczony transfer jednej witryny może negatywnie wpływać na czas ładowania pozostałych stron. Stabilniejszym, choć z pewnością bardziej kosztownym rozwiązaniem jest hosting dedykowany.  
Kompresja Gzip
Umożliwia ona kompresję kodu HTML oraz CSS po stronie serwera – i to nawet o 80 proc. Skompresowany kod w dużo mniejszym stopniu zużywa transfer, więc finalnie nie obciąża tak bardzo serwera.  
Unikanie łańcucha przekierowań
Przekierowania 301 pozwalają automatycznie przenieść użytkownika z wyłączonej podstrony na inną (np. z wycofanego asortymentu na ten najbardziej zbliżony i aktualnie dostępny). Należy przy tym uważać na tzw. łańcuch przekierowań, który istotnie spowalnia działanie witryny.  
Wykorzystanie pamięci podręcznej
Każda przeglądarka ma wbudowaną tzw. pamięć podręczną, w której zapisuje wygenerowany kod HTML. Przy powtórnym ładowaniu witryny niektóre jej elementy zostają właśnie wczytane z pamięci podręcznej. W rezultacie witryna o wiele szybciej ładuje się.  
Optymalizacja widgetów
Dodatkowe wtyczki (np. służące integracji z portalami społecznościowymi, choć nie tylko) mogą spowolnić stronę internetową. O ile z części z nich trudno byłoby zrezygnować, tak warto prześledzić, czy w systemie do zarządzania treścią nie są zainstalowane nieużywane widgety. Ich odinstalowanie może wpłynąć pozytywnie na szybkość ładowania się witryny internetowej.  
Minifikacja kodu HTML, CSS oraz JavaScript
Niepotrzebne znaki, linie czy podwójne spacje obciążają kody HTML, CSS oraz JavaScript. Odchudzenie ich o wymienione elementy potrafi znacząco wpłynąć na wynik witryny w testach prędkości ładowania. To także jedna z najczęstszych podpowiedzi, którą proponują narzędzia do samodzielnego mierzenia czasu ładowania – z Google PageSpeed Insights na czele.  
Przyspieszone strony mobilne
Korzystający ze smartfonów oraz tabletów użytkownicy należą do grona najmniej cierpliwych internautów. Jednocześnie zazwyczaj to strony mobilne najgorzej wypadają w testach pagespeed. Google od lat próbuje pogodzić ograniczenia technologiczne z oczekiwaniami użytkowników, m.in. przez przyspieszone strony mobilne (ang. accelerated mobile pages) oraz aplikacje progresywne (ang. progressive web apps, PWA). W znacznym stopniu rozwiązują one większość problemów z wolnym ładowaniem się stron mobilnych. Wymagają przy tym sporo pracy, ale są warte uwzględnienia w wieloletniej strategii rozwoju e-sklepu.  
Optymalizacja czasu odpowiedzi serwera
Kiepski serwer zawsze będzie kiepskim serwerem. Nie oznacza to, że nie można go nieco zoptymalizować. Regularne czyszczenie bazy danych, odpowiednia konfiguracja systemu do zarządzania treścią oraz zmianą dostawcy DNS mogą pomóc w pokonaniu ograniczeń wynikających ze zbyt długiego czasu odpowiedzi serwera.  
Asynchroniczne ładowanie plików
Umożliwia ładowanie wielu elementów jednocześnie, co w praktyce pozwala zaoszczędzić nawet do kilku sekund. W odróżnieniu od innych wspomnianych wskazówek uruchomienie asynchronicznego ładowania to kwestia zaledwie kliknięcia odpowiedniego przycisku w panelu CMS. [grwebform url="https://news.ucancommerce.com/view_webform_v2.js?u=A&webforms_id=4" css="on" center="off" center_margin="200"/]