Przyspieszenie ładowania witryny dla Google Page Speed Insight

przyspieszanie stron internetowych

Co to jest Google Page Speed Insight?

Google Page Speed insight jest to narzędzie do testowania szybkości ładowania się witryny.  Aktualnie jest ono oparte o narzędzie audytowe Lighthouse, dostępne z poziomu przeglądarki Google Chrome. Weryfikuje ono wiele obszarów w tym następujące:

  • czy witryna posiada certyfikat bezpieczeństwa i szyfrowanie danych za pomocą SSL,
  • czy nasza witryna jest statyczną stroną ładowaną z cache serwera,
  • czy wszystkie pliki css, js i html uległy minifikacji (zostały zmniejszone i pozbawione zbędnych odstępów oraz akapitów),
  • czy obrazy zawarte w witrynie maja optymalny rozmiar i poziom kompresji,
  • czy zastosowano najnowsze technologie kompresji plików
  • czy zastosowano kompresję g-zip, czy to na poziomie serwera czy też na poziomie witryny,
  • czy nadano priorytet treści w witrynie,
  • czy ustawiono czas wygasania ciasteczek i plików aby nie obciążać nadmiernie użytkowników korzystających z witryny.

Dlaczego moja strona powinna ładować się jak najszybciej?

Szybkość ładowania witryny jest wysoce istotna z perspektywy botów indeksujących dla wyszukiwarki Google oraz dla botów Google Ads. Na podstawie wyniku szybkości ładowania oraz danych historycznych Google szacuje jakość odwiedzanej witryny i ten wskaźnik jest brany pod uwagę przy określeniu ogólnego wyniku jakości reklam Google. Nie znam algorytmu Google ale śmiem twierdzić, że szybkość ładowania się witryny i te dodatkowe kwestie podlegające analizie w Google Speed Insight wpływają również na pozycję w wynikach wyszukiwania organicznego. Dlatego podczas optymalizacji strony, jest to dla mnie wiodący temat.

Co przedstawia raport z Google Speed Insight?

Omówię dane na podstawie nowo stawianego bloga, bugslife.eu którego jeszcze nie analizowałem pod kątem wyświetlania. Witryna została uruchomiona przy użyciu WordPress, z motywem potomnym przebudowanym przeze mnie, na potrzeby projektu – bugs_twentyseventeen. Poniżej ilustracje i opisy najważniejszych, moim zdaniem, elementów raportu.

Wynik testu:

Na skali od 0-100 zaznaczono poziom na którym plasuje się witryna w PageSpeed Tools. Jak widać wskaźnik jest różny w zależności od urządzenia. Aktualnie strony dobrym wynikiem mobilnym mają pierwszeństwo w indeksie. Strona wypada aktualnie bardzo blado, jest to WordPress i jest naszpikowany dużymi objętościowo zdjęciami, specjalnie zadbałem o to aby było co poprawiać.

wynik testu szybkości przed zastosowaniem optymalizacji

Wskazówki optymalizacyjne:

Poniżej ilustracja ze wskazanymi obszarami do poprawy. Zostaną omówione poniżej.

wskazówki optymalizacyjne

Skracanie czasu odpowiedzi serwera

Każdy serwer na którym instalujemy witrynę, aplikację czy po prostu przechowujemy dane ma, swoje limity, które powinniśmy sprawdzić zanim zainstalujesz cokolwiek, biorąc pod uwagę szacunkowy ruch który uda nam się w witrynie wywołać. Jeśli serwer ma wolny procesor, łącze, nie posiada dysku SSD, ładowana strona jest dynamiczna i ciężka może to wydłużyć czas jego odpowiedzi. Istnieje narzędzie diagnostyczne, które pozwoli nam na wywołanie szczegółowych parametrów serwera. Wystarczy jedynie odrobina chęci, bo zadanie jest proste. Mianowicie:

    1. Tworzymy plik info.php w którym wklejamy poniższy kod:
1
<!--?php // Show all information, defaults to INFO_ALL phpinfo(); // Show just the module information. // phpinfo(8) yields identical results. phpinfo(INFO_MODULES); ?-->
  1. Kopiujemy plik do folderu w którym umieszczone są pliki wykonywalne witryny.
  2. Wywołujemy funkcję wpisując w przeglądarkę „http://twojawitryna.pl/info.php”

Na podstawie danych z serwera, możemy zadać pytanie dostawcy usług, co oznaczają poszczególne parametry oraz zapytać o ich poprawę.

Eliminowanie blokującego kodu JavaScript i stylów CSS

Tutaj sprawa jest nieco trudniejsza i z całą pewnością wymaga szerszego spojrzenia na programowanie w JavaScript oraz na funkcje php wywoływane przez naszą stronę. Często funkcje oraz skrypty zawierają fragmenty kodu Java, które wykonywane blokowo mogą zatrzymać dalsze renderowanie strony do czasu przejścia do następnego bloku. Oczywiście są metody które umożliwiają wywoływanie kodu w tle lub opóźnienie jego wykonania (w sposób asynchroniczny) ale jeśli nasza strona jest zbudowana w taki sposób, że w pierwszej kolejności muszą załadować się określone moduły, klasy czy zmienne, dokonując zmian możemy doprowadzić do tego, że kod działający w tle nie wczyta niektórych elementów które po prostu nie będą dostępne, ponieważ jakaś część kodu używana przez inny skrypty nie załadowała się.

Poniższe diagramy ilustrują prawidłowe i nieprawidłowe wywoływanie skryptów w sposób asynchroniczny które powoduje powstanie błędu. Więcej o asynchronicznym ładowaniu skryptów znajdziecie na pluralsight.com, tam też znajdują się sztuczki na optymalizację kodu i ustawienie kolejności ładowania zasobów.

nieprawidłowe asynchroniczne ładowanie kodu

 

prawidłowe asynchroniczne ładowanie kodu

Innym przypadkiem problemów z blokowaniem renderowania witryny mogą być sytuacje w których zasoby takie jak pliki CSS lub skrypty Java pobierane są z serwerów zewnętrznych. Tutaj jeśli chodzi o pliki CSS, możemy spokojnie pozwolić aby nie zablokowały ładowania się strony na czas ich ładowania. W moim przykładzie sprawa dotyczy używanych czcionek z Google Fonts które umieszczone są w zewnętrznych zasobach. Zanim jednak opiszę jak sobie z tym poradzić, warto nadmienić że w przypadku plików *.js pobieranych z zasobów zewnętrznych, zaraz po otwarciu tagu „<script” należy dodać async gdzie wywołanie będzie miało taką postać: <script async src=”http://serwer.zewnetrzny.com/skrypty/tenskryptjava.js”></scrip>

Co do Google Fonts, sprawa jest prosta ponieważ dostępna jest wtyczka, która wyłączy nam dostęp do Google Fonts i tym samym przyspieszy ładowanie strony. Wtyczka nazywa się Disable Google Fonts.

Wykorzystaj pamięć podręczną przeglądarki

W tym konkretnym przypadku, otrzymałem informację że nie ustalono czasu wygasania plików pobranych przez przeglądarkę. Ten problem możemy rozwiązać na dwa sposoby.

  1. Edytujemy plik .htaccess znajdujący się w katalogu głównym naszej witryny i zadajemy cazsy trwania wszystkich zasobów, które mogą zostać pobrane przez przeglądarkę
  2. Instalujemy wtyczkę która pomoże nam wybrać jakie zasoby i na jaki okres powinny zostać pobrane przez przeglądarkę. Ja do tego celu preferuję WP Super Cache. Wtyczka dodatkowo pomaga nam wykorzystać cache naszej strony aby ładować statyczne pliki zamiast dynamicznych, co znacznie przyspiesza ładowanie strony.

Zoptymalizuj obrazy

W przypadku gdy mamy na stronie jeden lub dwa obrazki, tak jak w moim przypadku, podmiana ich na bardziej skompresowane i szybciej ładujące się nie stanowi problemu. Dużo gorszą sytuacją jest gdy mamy setki czy tysiące obrazów w galeriach i nie tylko, ładowanych na stronie głównej. Takiego zabiegu się nie stosuje aczkolwiek np. w branży foto, galerie są kluczowe i część zdjęć prezentowana jest od razu. Ogólnie optymalizacja obrazów jest kluczowa w każdej dziedzinie w której wykorzystywana jest grafika, w celu ograniczenia zużycia cennych zasobów. Umiejętne magazynowanie danych to podstawa. Przy dużej ilości zdjęć warto użyć wtyczki. Przy niewielkiej można to zrobić ręcznie i cieszyć się przyspieszonym ładowaniem strony.

Zastosowane rozwiązania optymalizacyjne:

W przypadku bugslife.eu okazuje się że zastosowałem rozwiązania optymalizacyjne. Otóż, motyw z którego korzystam czyli TwentySeventeen jest na tyle dobrze przygotowany technicznie, że automatycznie nadaje priorytet treści widocznej na ekranie, co jest dobrze widoczne zwłaszcza na urządzeniach mobilnych, brakuje w nim przekierowań (ale to akurat nie dotyczy motywu), zastosowano kompresję Gzip (Tu raczej stawiam na serwer który robi to za mnie, ponieważ nie instalowałem wtyczek). Poniżej ilustracja:

zastosowane na stronie czynności optymalizacyjne

 

Motyw zawiera również minifikowany skompresowany kod css, html oraz java script, dzięki czemu nie tracę milisekund przy ładowaniu tych plików.

PageSpeed Tools dają nam jeszcze jedną wisienkę, mianowicie automatycznie optymalizuje niektóre pliki, dzięki czemu możemy je samodzielnie podmienić i poprawić swój wynik.

Wynik testu PageSpeed po uwzględnieniu wszystkich zaleceń.

Żeby nie przedłużać, tutaj poniżej ilustracja z wynikiem jaki osiągnąłem podczas tworzenia tego artykułu i stosowania się do zasad które opisałem. Taki wynik jest solidny, i umożliwia nam osiągnięcie wyniku jakości reklam w AdWords na poziomie 10/10. Myślę że to dobry wynik, tanie reklamy i większe zyski.

poprawiony wynik testu po optymalizacji

Jeśli podobało się, proszę oceń artykuł. Na semsos.pl znajdziesz dodatkowe, podstawowe informacje i terminologię potrzebną do pełnego zrozumienia artykułu. Jeśli potrzebujesz dodatkowych informacji, proszę napisz do mnie.

 

Optymalizacja Nagłówków w Witrynie

stosowanie prawidłowych znaczników nagłówków

Dzisiejszy wpis opieram o studium przypadków nad stroną – lądowiskiem (LP a ang. Landing Page), projektowaną pod grupę reklam w kampanii reklamowej Google AdWords, dotyczącą pogotowia hydraulicznego.

Jaką wartość mają nagłówki w witrynie?

Jako copywriter, tworząc zawartość pod różnego rodzaju serwisy internetowe często napotykałem na barierę w postaci wyboru nagłówków do treści, w taki sposób aby były przyjazne czytelnikowi, wskazywały na otwartość i zrozumienie omawianego zagadnienia oraz zachęcały do dalszego czytania treści pod nagłówkiem.

Jednakże oprócz czytelnika, semantykę treści skanuje robot indeksujący, który decyduje o poprawności naszej witryny pod kątem budowy i zgodności z zasadami projektowania witryn oraz ilości i jakości znaczników oraz modyfikatorów tekstu zawartych w witrynie.

Kiedy powstaje konieczność analizy nagłówków w treści?

W tym konkretnym przypadku dotyczącym pogotowia hydraulicznego, analizowałem współczynnik konwersji pochodzących z połączeń telefonicznych, dla reklam z rozszerzeniem połączeń. Niestety wskazany niski poziom konwersji oznaczał problem ze stroną docelową. Dodatkowo, z raportu wynika że jakość strony docelowej jest przeciętna, zatem jest to definitywnie obszar wymagający poprawy. Otóż po otwarciu strony docelowej okazało się że strona jest naszpikowana nagłówkami, które nie mają żadnej wartości i występują w nadmiarze. Dodatkowo treść tam zawarta nie zachęcała do skorzystania z usługi. Zauważyłem również że cały nagłówek strony wymaga kompletnej przebudowy. Aktualny ranking reklamy wskazuje 7/10 w grupie reklam dotyczących pogotowia. Moim celem jest wynik 9/10 lub 10/10. Więcej o konwersjach w witrynie…  

Konieczność analizy nagłówków w sytuacji w której nasza witryna nie jest połączona z kampanią AdWords może wynikać z narzędzi których używamy na stronie. Jako że buduję strony w oparciu o WordPress z pomocą przychodzi narzędzie w postaci wtyczki Yoast SEO, gdzie w automatyczny sposób jest zliczana zawartość słów kluczowych w treści i w nagłówkach.

Jak powinien brzmieć poprawny nagłówek?

Z uwagi na indeksację Google bota (robota indeksującego), nagłówek powinien zawierać frazę kluczową z uniknięciem duplikacji treści o ile fraza może się powtarzać, kontekstowo nagłówki powinny się różnić. I tak w zawartym przykładzie – Nagłówkiem H1 – frazą pod słowo kluczowe będzie Pogotowie Hydrauliczne 24h. Jako nagłówek h2, dopełniający użyłem również – Nagła pomoc w usuwaniu zatorów kanalizacyjnych i hydraulicznych – Pogotowie 24h. Co do wartości treściowej, dopełniłem tekstem z akapitu. O ile nagłówków H2 możemy użyć dowolną ilość, choć zawsze dopełnionych tekstem o tyle nagłówek h1 musi być tylko jeden. Więcej o indeksowaniu witryny…

Sam nagłówek strony, czyli „header” nie powinien zawierać menu, żeby nie rozpraszać użytkownika, bo w tym przykładzie pracuję na stronie docelowej budowanej pod kampanię AdWords.

Mam nadzieję że udało mi się w sposób przyjazny przybliżyć techniczną stronę znaczników nagłówków w witrynie. Teraz sprawdzę treść, prześlę stronę do indeksu , uruchomię reklamy i zweryfikuję zmianę współczynnika jakości.

Jeśli artykuł się podobał, proszę oceń go i napisz komentarz, z przyjemnością odpowiem na każdy.