Optymalizacja strony z pagespeed insights

Optymalizacja strony z pagespeed insights

Szybkość wczytywania strony to jeden z ważniejszych czynników jej wartości zarówno dla seo, jak i użytkowników. I nie ma tu nic dziwnego, bo każdy lubi jak podstrony przeskakują płynnie i nie trzeba czekać po kilka sekund na załadowanie wyników. Na rynku jest wiele narzędzi wspomagających sprawdzanie szybkości wczytywania strony – fast page speed od pingdoma, gtmetrix czy pagespeed insights od google. I temu ostatniemu przyjrzymy się z bliska.

Kilka miesięcy temu przy zakładaniu hostmark.pl zdecydowałem się na postawienie wszystkiego na wordpressie ze skórką z themeforest . Jak powszechnie wiadomo szablony z tego serwisu w większości są nastawione na to by miały jak najwięcej ulepszeń w postaci animacji, przejść, szybkiego tworzenia elementów na stronie czy całych podstron, co nie zawsze idzie w parze z szybkością i wydajnością.

Najczęściej pojawiające się uwagi to:

  • Zoptymalizuj obrazy
  • Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie
  • Wykorzystaj pamięć podręczną przeglądarki
  • Zmniejsz JavaScript
  • Włącz kompresję
  • Zmniejsz HTML
  • Zmniejsz CSS
  • Skróć czas odpowiedzi serwera

Omówmy pokrótce każdy z nich:

Zoptymalizuj obrazy

Tutaj zazwyczaj mamy dwie wytyczne:

  • kompresja https://adres.witryny/obraz.jpg pozwoli zaoszczędzić xx% (xx kb)
  • kompresja i zmiana rozmiaru https://adres.witryny/obraz.jpg pozwoli zaoszczędzić xx% (xx kb)

Pierwsza wytyczna tyczy się jakości obrazu – krótko mówiąc jeśli nie jesteś fotografem gdzie zdjęcia faktycznie muszą być wysokiej jakości warto dokonać kompresji obrazków .
Można to zrobić dwoma narzędziami – jednym to kompresji png i drugim do kompresji jpg. Wystarczy wgrać obrazki na wskazane witryny, dokonać automatycznej kompresji i po ich pobraniu umieścić spowrotem na stronie.

Druga, a w zasadzie fragment “i zmiana rozmiaru” pojawia się wtedy, gdy wczytywany jest obraz o pełnym rozmiarze  i zmniejszany ręcznie w kodzie za pomocą ustawienia “width” czy “height”. W tym przypadku zależy wziąść pod uwagę czy obraz jest zmniejszony w tym miejscu celowo ( np miniaturka wpisu), i czy zmiana jego rozmiaru nie spowoduje problemów na stronie docelowej. Decyzje czy zmniejszać obrazek, czy używać osobnej wersji jako miniaturki i stronie docelowej zostawiam tobie – dwie wersje to zawsze więcej zajętego miejsca.
Prawda że proste?

Zmniejsz css/javascript/html

Tutaj również wymagana jest od Nas podstawowa znajomość obsługi stron, a całą resztę zrobią narzędzia online. Podobnie jak w kompresji obrazków wystarczy otworzyć plik który powinien ulec zmniejszeniu, skopiować jego zawartość i wgrać w jedno z bezpłatnych narzędzi dostępnych w google – dla css polecam szukanie pod frazą “css minifier”, dla pozostałych ormatów zmieniamy pierwszy człon.

Wykorzystaj pamięć podręczną przeglądarki

W większości przypadków głównym serwerem www jest nadal apache – modułem odpowiedzialnym za powyższy punkt jest mod_expires.
Wystarczy więc dodać do pliku .htaccess następujący kod:

Skróć czas odpowiedzi serwera

Ten punkt specjalnie zostawiłem na koniec. Dlaczego? Bo większość osób które pierwszy raz zrobią test i widzą ten komunikat odrazu pisze do firmy hostingowej że serwer długo odpowiada 🙂
A w 80% wystarczy sumiennie zająć się powyższymi punktami, a czas odpowiedzi magicznie przestanie być problemem.

Nie znam/nie chce mi się grzebać na stronie – może jest od tego jakiś plugin?

Osobiście wydaje mi się że większość osób na wszystkie braki w wordpressie ma jedną odpowiedź – zainstaluję plugin ??
I mam dla Ciebie czytelniku pocieszenie – tak, możesz zainstalować plugin który rozwiąże część powyższych problemów automatycznie.
Osobiście mogę polecić plugin o nazwie “WP Fastest Cache”, który w darmowej wersji zajmie się pamięcią podręczną przeglądarki, minifikacją css/html oraz przede wszystkim aktywuje system cache.
Są też pluginy-narzędzia do kompresji obrazków, ale z darmowych nie jestem w stanie niczego polecić -testowałem 3, i żaden nie dał takich efektów jak ręczna kompresja.

O czym warto jeszcze pamiętać?

Jeśli postanowiłeś zająć się optymalizacją serwisu warto dokonać też przeglądu swojego cms-a. Rzeczy które warto wykonać to:

  • Usunąć nieużywane pluginy i szablony – zawsze to mniej kodu do przetworzenia, aktualizacji i większe bezpieczeństwo serwisu
  • Jeśli używany zewnętrznego kodu doklejanego do strony – przenieść go do google tag manager
  • Sprawdzić czy serwis zadziała na nowszej wersji PHP – większość firm ( w tym nasza) oferuje kilka wersji php zmienianych jednym kliknięciem, a im nowsza wersja tym szybsza witryna
    Jeśli twoja firma tego nie oferuje – sprawdź nasze serwery vps z administracją, lub tańszy hosting www
  • Zweryfikować uruchomione wtyczki, czy oby napewno są nam potrzebne – niektóre z nich zapewne były zainstalowane na testy, innyc od roku nie używamy.
  • Zadbać o mobilną wersję swojej strony – wszak google już oficjalnie potwierdza że najpierw będzie indeksował i oceniał wersję mobilną

Wolę to komuś zlecić niż samemu grzebać

Jeśli nadal wolisz zlecić komuś optymalizację swojej witryny oraz pomoc w dostosowaniu do najnowszych standardów SEO – napisz do Nas, pomożemy!

By nie być gołosłownym poniżej wykres wyniku strony głównej hostmark.pl przed  i po optymalizacji – prawda że robi wrażenie?

pagespped insights wynik

Optymalizacja strony z pagespeed insights
5 (100%) 1 głosy[głosów]

Tagi: , , ,

Leave a Reply

Your email address will not be published.