Szybkość wyświetlenia się witryny na urządzeniach, czyli “lekka strona internetowa"

czas wyświetlania strony

Photo by RODOLFO BARRETO on Unsplash

Kto określa czy nasza strona jest wolna/szybka?

  1. Nasza cierpliwość:
  • Jesteśmy niecierpliwi.
  • Żyjemy w czasach “szybkich” postów na FB i IG.
  • W 2000 roku czekaliśmy ok 12 sekund na wyświetlenie zawartości strony, w 2016 roku — ok 7 sekund.
  • Badania informują, że prędkość strony wpływa na sprzedaż i pozostanie na stronie — link do badań.
  1. Wytyczne Google’a — 2 sekundy. Możemy próbować spełnić te kryteria, ale bywa, że nawet lekka strona wizytówka ma problem. Dlatego trzeba nauczyć się prawidłowo odczytywać i interpretować wyniki.
Jak prędkość strony łączy się z SEO?
  1. Bardzo wolna strona nie będzie polecana przez Google’a w wynikach wyszukiwania.
  2. Próby podniesienia prędkości ładowania się strony to jedno z działań SEO.
Co wpływa na prędkość ładowania się strony?
  1. To zależy od strony: treści, zdjęcia, ilość osób, które w danym momencie ją przeglądają.
  2. Dobre praktyki + proces ulepszania.
Jaki jest nasz cel?
  1. Sprawić by nasza strona była “lekka” w granicach naszych możliwości.
  2. Poza granicami — mogę mieć lekką stronę jeśli np. usunę połowę informacji z Home.

Elementy wpływające na prędkość ładowania się strony

Serwer

  1. dedykowany — ruch jest ustawiony pod Twoją stronę, odpowiednio do ruchu, indywidualnie zoptymalizowany kod (ok 10 000 zł / rok)
  2. współdzielony — kupujesz miejsce na serwerze gdzie jest 100 innych stron (ok 200 zł / rok)
serwer SEO

Photo by Taylor Vick on Unsplash

Zdjęcia

Nazwa

  1. nie dodawaj zdjęć o nazwach DS000034.png — nazwa ma opisywać to, co przedstawia zdjęcie
  2. w nazwie pliku nie wpisujemy polskich znaków diakrytycznych, spacji oni znaków specjalnych — w ten sposób unikniesz błędów w wyświetlaniu zdjęć na niektórych przeglądarkach
  3. zalecane — małe litery, zamiast spacji myślnik, np. dobre-zdjecie.png
Waga
  1. Zdjęcie może być lekkie lub ciężkie. 
  2. Wagę zdjęcia wyrażamy w bajtach:
  • kB (kilobajt) — waga preferowana, lekka
  • MB (megabajt) — zdjęcia w MB są ciężkie, obciążają stronę, spowalniają ją
  • GB (gigabajt) — filmy mają kilka gigabajtów, nie wgrywamy ich na stronę!!!

Rozmiar

  1. rozmiar zdjęcia podajemy w pikselach, np: 2000 px X 800 px
  2. lepiej w poziomie niż w pionie — większość ekranów jest horyzontalna
  3. szerokość full HD 1920 px — teoretycznie WordPress sam generuje pozostałe miniatury, zalecam 2000 px dla dłuższego boku
  4. rozdzielczość dobra na potrzeby ekranów urządzeń elektronicznych to 72 dpi
Format
  1. png — jest minimalnie lżejszy od jpg (może mieć przezroczyste tło), konieczne w przypadku logo i ikon, zalecany do grafik stosowanych na ekranach urządzeń elektronicznych
  2. jpg — brak przezroczystego tła, dużo kolorów, zalecany do zdjęć, których celem jest wydruk
  3. gif — w przypadku animowanych obrazków
  4. nie używaj: .bmp i .tiff 

WordPress

  1. Aktualizacje: nowe funkcje, zmiany w kodzie, poprawki, zabezpieczenia. Kod jest fundamentem szybkości ładowania się strony.
  2. Działania w tle:
  • Automatyczne kopie strony: ustaw czas robienia kopii na czas kiedy masz mniejszy ruch na stronie (np. w nocy).
  • Crawlery (roboty internetowe lub indeksujące) chodzące po stronie. Są to program, które zbierają informacje o stronach internetowych, takich jak struktura, kod źródłowy czy treści. Sprawdź w Google Search Console czy Crowlery Google’a nie trafiają na błędy indeksowania na stronie. Jeśli tak, napraw je.

Motyw

  1. Lepszy jest prostszy motyw.
  2. Fajna cegła to Avada, cegła ze złą opinią SEO to Bridge.
  3. Warto przemyśleć konieczność każdej kolejnej zakładki.
  4. Slidery bardzo obciążają stronę.
  5. Animacje również stronę spowalniają.

Wtyczki

  1. Dużo wtyczek = ogromna ilość kodu.
  2. Każdą wtyczkę trzeba przemyśleć, sprawdzić jakie ma wymagania, co do parametrów serwera.
  3. Im mniej wtyczek tym lepiej.
  4. Wtyczka, wtyczce nie jest równa — mogą robić to samo, ale liczy się jakoś kodu.
  5. Testuj wtyczki, szukaj najlepszych rozwiązań — testy prędkości strony z dodaną i skonfigurowaną wtyczką.

Zewnętrzne kody

  1. Kody pobierające dane z innych stron, np: Facebook, Google Fonts, Crazy Egg i inne kody śledzące do badania zachowań użytkowników,
  2. Wszystkie delikatnie spowalniają stronę. Im jest ich więcej tym wolniejsza strona.

Test szybkości strony

Narzędzie Google’a do testowania szybkości strony — PageSpeed Insights:
  • otrzymujemy odrębne wyniki dla każdej zakładki: Home, Kontakt, Sklep,
  • narzędzie jest bardzo precyzyjne,
  • dla wersji mobilnych ma zdecydowanie wyśrubowane wyniki.
O prędkość strony należy zadbać zarówno na dużych urządzeniach, jak i na urządzeniach mobilnych.

Zadanie

  • wykonaj na swojej stronie testy za pomocą PageSpeed Insights
  • pamiętaj, że testy wykonujemy dla każdej zakładki osobno
  • zastanów się nad tym, co możesz poprawić
  • sporządź swoje wnioski, które włączysz do audytu SEO