Przyśpiesz ładowanie swojej strony!

Sposobów na przyśpieszenie ładowania strony jest wiele, czasami nie wszystkie da się zaimplementować na pojedynczej witrynie. Większość metod powinna jednak zadziałać na dowolnej stronie internetowej, bez względu na to czy mamy do czynienia z blogiem, sklepem internetowym, stroną firmową czy portalem oraz bez względu na to jaki CMS jest wykorzystywany.

Dlaczego przyśpieszenie wczytywania strony jest takie ważne?

Ogólnie rzecz biorąc, o ile czas ładowania strony nie ma dużego wpływu na ranking w Google, o tyle może się przyczynić do spadku współczynnika konwersji. Pamiętaj, że zmniejszając o każdą sekundę czas ładowania strony przyczynisz się do zwiększania zaufania klientów i budowania zaufania do Twojej strony. W efekcie klienci przywiązani do stabilnej i szybkiej witryny będą również polecać ją swoim znajomym. W tym przypadku te zaledwie parę sekund może robić kolosalną różnicę.

Raport Radware

Firma Radware – dostawca rozwiązań optymalizujących dystrybucję aplikacji sieciowych i dbająca o zabezpieczenia infrastruktury IT – zadała sobie trud przetestowania ok. 500 amerykańskich witryn. Ostatni raport z 2014 roku wyglądał następująco:

• Serwisy internetowe wykazują tendencję do coraz dłuższego czasu ładowania. Średnio 10 sekund (w 2013 było 7.72 sekundy, natomiast w 2012 – 6.8 sekund. Jest to 47% spadek szybkości wczytywania stron tylko w przeciągu 2 lat!
• Średni rozmiar strony wynosi 1510 kB i zawiera 99 elementów (skrypty JS, CSS, grafika itp.). Strony stają się większe i grubsze. Typowa strona jest o ok. 20% grubsza niż jeszcze 6 miesięcy wcześniej. Tylko w 2013 wartości te wynosiły odpowiednio: 1,095kB i 91.
• Dla sklepów internetowych parametr TTI – Time to Interactive wynosi 4 sekundy. TTI jest to czas, po którym ładowane są podstawowe elementy interaktywne strony (np. banery z wezwaniem do akcji) w związku z czym użytkownik może wykonać jakąkolwiek akcję zanim załaduje się cała strona. W połowie 2013 roku parametr TTI wynosił 4.9 sekundy, obecnie jest to ok. 10% więcej. Co ciekawe jeśli ten czas jest dłuższy niż 3 sekundy, większość użytkowników odwiedzających sklep internetowy opuszcza stronę.
• Testowane serwisy internetowe, które korzystały z sieci CDN miały o dziwo gorsze wyniki od serwisów, które nie korzystały z tego typu infrastruktury. Rozwiązanie CDN pozwala zmniejszyć opóźnienia w ładowaniu serwisów internetowych, gdyż strona jest serwowana użytkownikowi z serwera geograficznie najbliżej mu położonego. Gorsze wyniki w testach mogły wynikać z określonej złożoności serwisów – witryny nie korzystające z sieci CDN prawdopodobnie były mniej złożone co przekładało się na szybsze wczytywanie strony.
• Właściciele witryn internetowych nie zadają sobie trudu, żeby stosować sprawdzone metody optymalizacji witryn, przez co tracą sporo potencjalnych zysków. W większości stron internetowych nie była wykonana podstawowa optymalizacja zdjęć, ani sprawdzone techniki buforowania i kompresji treści.

Co mogę zrobić, aby przyśpieszyć wczytywanie mojej strony?

• Zmniejszyć liczbę zapytań http
  Według Yahoo, 80% czasu ładowania przeznaczony jest na pobieranie różnych elementów strony: grafiki, arkuszy stylów CSS, skryptów JS, Flash, itp. Skoro dla każdego pojedynczego elementu kierowane jest jedno zapytanie HTTP to przy dużej liczbie komponentów liczba zapytań HTTP urasta do niebotycznych rozmiarów.
• Zrobić “porządki” w kodzie
  Ponieważ każdy zbędny fragment kodu powiększa nam rozmiar pliku, ważne jest, aby wyeliminować zbędne spacje, puste linie, tabulacje czy komentarze i uczynić nasz plik tak “chudym” jak to jest możliwe.
• Zoptymalizować i połączyć pliki CSS w jeden plik (podobnie w przypadku plików JS)
  Usunięcie zbędnych spacji, tabulacji i komentarzy z plików CSS/JS pozwoli na zmniejszenie ich rozmiaru, co automatycznie przełoży się na mniejsze zużycie transferu. Jeśli dodatkowo połączymy wszystkie pliki w jeden, zredukujemy tym samym dodatkowe zapytania HTTP wysyłane przez przeglądarkę.
• Zmniejszyć czas oczekiwania na odpowiedź z serwera
  Google zaleca, aby czas odpowiedzi serwera nie przekraczał 200ms. Jeśli nie jesteśmy właścicielami serwera i nie możemy nim zarządzać to raczej nie mamy zbyt dużego pola manewru. Jedyne co możemy zrobić to sprawdzać przy pomocy narzędzi monitorowania jaki czas odpowiedzi uzyskuje testowany przez nas serwer i jeżeli wynik nie jest zadowalający można spróbować coś zwojować u dostawy hostingu. W ostateczności jeśli nie jest możliwa poprawa wydajności serwera – zawsze można zmienić hosting.
• Korzystać z CSS sprites w przypadku grafiki
  Pomimo, że technologia ta istnieje już od dłuższego czasu, mało osób z niej jeszcze korzysta. A szkoda. CSS Sprites to technika, która pozwoli na łączenie kilku mniejszych obrazów w jeden duży plik, dzięki czemu wystarczy raz załadować plik, a rozłożeniem poszczególnych fragmentów pliku na stronie zajmą się style CSS. Oszczędzamy w ten sposób pasmo oraz redukujemy liczbę zapytań HTTP – bo w końcu wczytujemy tylko jeden plik!
• Skompresować pliki graficzne i tekstowe
  Najlepszym sposobem na redukcję ilości wczytywania danych jest zastosowanie techniki kompresji, która spowoduje zmniejszenie ilości danych przesyłanych z serwera do przeglądarki użytkownika. Pliki kompresujemy po stronie serwera i najlepiej jest poddać kompresji pliki tekstowe typu HTML, XML, CSS, JavaScript czy XML. Ten sposób optymalizacji strony pozwoli zredukować rozmiar plików tekstowych nawet o 70%-80%, więc jak widać gra jest warta świeczki.
• Zastosować metodę buforowania treści
  Buforowanie jest stosunkowo proste do skonfigurowania i pozwala przyśpieszyć wczytywanie strony. Przeglądarka zapisuje kopię pliku (np. nagłówek graficzny) i korzysta z zapisanej (zbuforowanej) kopii na każdej stronie, gdzie występuje ten element. Pozwala to na uniknięcie konieczności ponownego pobierania tego samego zasobu.
• Sprawdzić, czy wszędzie stosowane są odpowiednie formaty graficzne
  Stosowanie niewłaściwych formatów grafiki (np. duże grafiki w formacie *.gif) może mieć negatywny wpływ na szybkość ładowania strony. Grafika zapisana w niewłaściwym formacie może mieć nawet kilkukrotnie większy rozmiar niż gdyby została zapisana w optymalnym formacie. Grafiki takie niepotrzebnie zabierają dodatkowy transfer, wolniej się wczytują i zajmują więcej miejsca w buforze.
• Zredukować przekierowania
  Przekierowania to dodatkowe zapytania HTTP i dłuższy czas ładowania strony. Staraj się zminimalizować liczbę przekierowań w swoim serwisie.
• i wiele więcej porad, o których dowiesz się z nowego poradnika…

Poradnik optymalizacji – sprawdzone metody

Ponieważ coraz częściej przychodzi mi optymalizować blogi, platformy szkoleniowe oraz strony sprzedażowe postanowiłam stworzyć specjalny przewodnik, w którym znajdą się najlepsze i sprawdzone metody optymalizacji strony poparte konkretnymi przykładami.

Ten przewodnik to efekt wielomięsięcznej pracy nad optymalizacją serwisów o różnej wielkości i różnym stopniu złożoności, więc możesz mieć pewność, że w tym opracowaniu znajdziesz najlepsze i przetestowane rozwiązania.

[Aktualizacja 01.2020] Przewodnik nie jest obecnie dostępny  w sprzedaży.