Szybka strona na WordPressie (100/100 mobile) – 12 lekcji (2020 r.)
Czyli czego nauczyłem się w ostatnim czasie.

Szybka strona na WordPressie (100/100 mobile) – 12 lekcji (2020 r.)

optymalizacja prędkości strony internetowej
Optymalizacja prędkości strony internetowej - wynik. Źródło: narzędzie Lighthouse

Prędkości wczytywania na urządzeniach mobilnych 100/100 punktów – to wynik, do jakiego dąży wiele osób które zetknęły się z tematem optymalizacji prędkości strony internetowej. Prędkość strony ma ogromne znaczenie. Wpływa na SEO, użyteczność i współczynnik konwersji oraz doświadczenie użytkownika na Twojej stronie. Dlatego prędkość, to jeden z najważniejszych elementów, na które należy zwrócić uwagę w pracy ze stroną internetową. 

Przez ostatnie miesiące spędziłem sporo godzin zagłębiając się w temat optymalizacji prędkości strony internetowej.

Proces nie jest skończony i wiem jak dużo jest jeszcze do zrobienia. Osiągnałem jednak przyzwoite wyniki, z których – na tym etapie – jestem zadowolony:

Przy takim wyniku prędkość strony nie stanowi przeszkody na drodze do realizacji celów, może też być przewagą konkurencyjną, co pozwoli osiągnąć lepsze rezultaty np. w wynikach wyszukiwania Google.

Optymalizacja prędkości strony dla WordPressa

We wrześniu ubiegłego roku napisałem post jak poprawić prędkość strony internetowej, w którym opisałem 11 sposobów na polepszenie prędkości strony. Dla przypomnienia są to na przykład: skalowanie i kompresja obrazków, minifikacja kodu strony, włączenie kompresji GZIP, wykorzystanie pamięci podręcznej przeglądarki, zmniejszenie ilości zapytań, lazy load czyli leniwe / odłożone ładowanie obrazków. Są to quick wins, dzięki którym możesz szybko, w znaczący sposób poprawić prędkość swojej strony.

Jeśli jesteś osobą podobną do mnie i “quick wins” Ciebie nie zadowalają, to prawdopodobnie z czasem będziesz chcieć jeszcze lepiej zoptymalizować stronę, polepszając jej prędkość.

W tym poście przedstawiam 12 lekcji, które dały mi lepsze zrozumienie zagadnienia optymalizacji prędkości strony internetowej. Wykorzystaj je u siebie, aby w znaczący sposób polepszyć prędkość strony!

Prędkość strony internetowej - 12 lekcji

“Nie wolno korzystać z motywów graficznych bo są przeładowane i niepotrzebnie obciążają stronę” – to mit. To znaczy… owszem, są przeładowane motywy. Ale o nich należy zapomnieć.

Wyniki jakie osiągnałem (100/100 mobile LightHouse, +90% GTMetrix, czas wczytywania <3 sekund na desktopie i mobile) to strony zbudowane w oparciu o motyw graficzny. A pierwsza lekcja to:

Lekcja 1: wybierz odpowiedni motyw graficzny dla projektu

Jeśli budujesz stronę w oparciu o motyw graficzny, zadbaj o to, aby projekt graficzny był możliwie jak najlżejszy. 

Jest wiele motywów, które świecą i błyszczą, ale czar pryska po wykonaniu pierwszego testu prędkości. W przeładowanych motywach może być problem z poprawieniem wielu rzeczy, bo mogłoby to zaburzyć funkcjonowanie strony dlatego radzę unikać takich rozwiązań.

Druga sprawa, to wsparcie dla motywu. Zmiany postępują w ogromnym tempie i dlatego potrzebne są regularne aktualizacje. Warto więc znaleźć firmę, która istnieje nie od wczoraj i gwarantuje wsparcie dla użytkowników. Regularne aktualizacje motywu to także szansa na zwiększenie prędkości strony w przyszłości.

Przykłady szybkich motywów graficznych dla WordPressa:

  • Astra – firma istnieje od 10 lat i zapewnia wsparcie bez ograniczenia czasowego. Motyw jest lekki i posiada przydatne funkcje (hooks & filters), co pozwala wygodnie i bez przeszkód rozbudowywać stronę.
  • Hellomotyw stworzony przez twórców Elementora, głównym celem jest wydajność strony. Ilość dodatkowych funkcji jest ograniczona do całkowitego minimum, dlatego jeśli zaczynasz przygodę ze stronami zastanów się czy nie lepiej wybrać inne rozwiązanie. 
  • GeneratePress –  nie korzystałem, ale motyw znam bo regularnie pojawia się na forach i w tutorialach. Dobre wyniki w testach prędkości i ponad 2 mln pobrań.

Lekcja 2: Hostuj czcionki lokalnie (Google Fonts).

W przypadku stron, z którymi pracowałem, czynnikiem który negatywnie wpływał na prędkość witryny, były czcionki Google (Google Fonts), które docelowo są pobierane z zewnętrznego serwera. 

Jak hostować czcionki Google lokalnie?

Krok 1: Zablokuj odwołania do zewnętrznego serwera z Twojej strony. Możesz to zrobić za pomocą fragmentu kodu lub z wykorzystaniem wtyczki Disable and Remove Google Fonts. Ze względów bezpieczeństwa rekomenduję ten pierwszy sposób, jednak wtyczka nie obciąża znacząco strony i można ją wykorzystać doraźnie.

Krok 2: Pobierz czcionki, z których korzystasz i umieść je na swoim serwerze. Później należy już tylko dodać fragment kodu CSS, aby czcionki były wyświetlane na stronie. Poradnik jak to zrobić znajdziesz tutaj (EN).

Lekcja 3: Deaktywuj WP-Cron

WP Cron to system do zarządzania harmonogramem działań WordPressa. Odpowiada za publikacje zaplanowanych postów czy sprawdzenie dostępności aktualizacji.

Problem jest to, że WP-Cron aktywuje przy każdym załadowaniu strony. A to znaczy, że każdorazowo, kiedy ktoś odwiedza Twoją stronę, system sprawdza czy nie zostały zaplanowane jakieś zadania.

Na mojej stronie zadania z harmonogramu obsługuję w ten sposób, że WP Cron jest wywoływany tylko raz na godzinę, niezależnie od ilości odwiedzin witryny. Tobie też polecam takie rozwiązanie jeśli chcesz poprawić wydajność strony.

Lekcja 4: Korzystaj z najnowszej wersji PHP.

Większość stron korzysta z wersji PHP 5, która nie jest aktualna. Jak pokazują testy, PHP w wersji 7 jest w stanie procesować dwa razy więcej zapytań w tym samym czasie, przy dwukrotnie mniejszym opóźnieniu.

Najnowsza wersja PHP 7.4. została opublikowana na przełomie listopada i grudnia 2019 i oferuje usprawnienia, w tym poprawę prędkości. Autorzy opracowania czekają już na wersję 8, która ma stanowić prawdziwy przełom jak chodzi o prędkość działania. Ja też na nią czekam.

Lekcja 5: Narzędzia do mierzenia prędkości strony - stosuj zasadę ograniczonego zaufania.

Narzędzia, które możesz wykorzystać do mierzenia prędkości strony:

Dlaczego należy mieć ograniczone zaufanie do tych narzędzi? Podam kilka przykładów, które pokazują że korzystanie z narzędzi do mierzenia prędkości bywa mylące:

  1. PageSpeed Insight, czyli jedno z najbardziej popularnych narzędzi, do testu strony mobilnej wykorzystuje urządzenie klasy Moto G4 (źródło) czyli urządzenie z średniej półki z 2016 roku. Do tego jest dodane opóźnienie prędkości połączenia. W rzeczywistości, taka sytuacja, jak zakładam, nie zdarza się często.
  2. Nie wiemy gdzie jest zlokalizowany serwer, z którego są testowane dane Page Speed Insights. Jeśli przyjmiemy, że serwer jest gdzieś w Stanach Zjednoczonych, to wyniki testu nie będą miarodajne dla polskojęzycznych blogów etc.
  3.  Pingdom na jednej z moich stron podpowiada: “Compress components with gzip” dając w tej kategorii ocenę “F” czyli bardzo niską. Bardzo dobrze, kwestia jest taka, że na tej stronie wykorzystuję kompresję brotoli, która daje lepsze wyniki niż gzip. Zatem, jeśli GZIP=A wtedy brotoli=A+, right? Nie dla każdego. 😉
  4. “Strona jest szybsza / wolniejsza od 80% stron” – na takie podpowiedzi także należy patrzeć z dystansem. Ludzie nie wykorzystują narzędzi do testów prędkości strony jako całości, tylko do testu pojedynczej strony (zazwyczaj jest to strona główna). Zatem nie porównujemy się z innymi serwisami, tylko tak naprawę ze stroną główną tych serwisów, która często jest najlepiej zoptymalizowana.

Jak korzystać z narzędzi do mierzenia prędkości strony?

Kilka podpowiedzi ode mnie: 

  • nie patrz na punkty tylko czas wczytywania strony,
  • obserwuj jak zmiany, które wprowadzasz wpływają na prędkość działania strony i staraj się zobaczyć trend,
  • nie opieraj się tylko na wynikach testu, weryfikuj efekty zmian na swoich urządzeniach.
Po dokonaniu zmian test dokonaj trzykrotnie? Dlaczego? Odpowiedź poznasz po trzeciej próbie. 

Lekcja 6: Narzędzia do mierzenia prędkości strony - testuj i optymalizuj stronę zgodnie z zaleceniami.

Niewątpliwie dobrą stroną narzędzi do testowania prędkości strony jest to, że oprócz czasu wczytywania i wyników (punktowych, procentowych), pokazują nam też sugestie odnośnie rzeczy, na które powinniśmy zwrócić uwagę w jednym, konkretnym przykładzie. Choć czasami trzeba przymknąć oko na pewne rzeczy (przykład powyżej), to w większości przypadków sugestie są trafne i pozwalają szybko zweryfikować źródło problemu.

optymalizacja prędkości strony
Przykładowe podpowiedzi: narzędzie GTMetrix.

Lekcja 7: Analizuj wykres Waterfall

Kolejnym ciekawym narzędziem, które dostarcza sporo dobrych informacji jest wykres Waterfall w GTMetrix

Tak wygląda wykres Waterfall dla mojej strony:

wykres waterfall
Wykres Waterfall - newbusiness.website

Co mogę dowiedzieć się z tego wykresu. Na przykład: że czas odpowiedzi serwera wynosi około 0,35 sekundy, co nie jest źle, ale idealnie byłoby w okolicach 0,1-0,2. Można to jeszcze poprawić. Przy wyniku 0,8-1,2 sek. zacząłbym się mocno zastanawiać nad przyczyną opóźnionej reakcji, a przy 1,2 s.+ prawdopodobnie przerwałbym pisanie tego posta i zaczął szukać przyczyny w trybie pilnym.

Inny praktyczny przykład użycia wykresu waterfall. Do budowania stron korzystam z Elementora. Narzędzie jest zbudowane w ten sposób, że wczytuje tylko zasoby wykorzystywane na stronie, co jest dobre patrząc przez pryzmat prędkości wczytywania strony.

Znacznie mniej dobre jest to, że Elementor posiada paczki ikon. Nawet jeśli wykorzystujesz jedną ikonkę (0,5 kb?), to na stronę wczytuje się cała paczka, w której znajduje się ta ikona (~70kb).

Na wykresie Waterfall pojawia się element eicons.woff2. Tylko skąd?… Po 47 minutach udaje się znaleźć źródło – pojedyncza ikonka w menu. Z pomocą przychodzi Google. Zablokowanie pliku, zmiana ikony i po niespełna dwóch godzinach moja strona jest 70kb lżejsza. Te 70kb to coś, o co warto walczyć. Tak, jakbyśmy mieli 70km do pokonania mniej w podróży, mniej więcej.

Lekcja 8: Ogranicz wtyczki do minimum

Korzystanie z wtyczek jest kuszące, bo większość rzeczy można “wyklikać”, bez konieczności zagłębiania się w temat i szukania odpowiedzi na pytanie “jak to działa”.

Jednak każda wtyczka, to potencjalne obciążenie strony i ryzyko związane z bezpieczeństwem. Dlatego warto ograniczać korzystanie z wtyczek do niezbędnego minimum. Jeśli zdecydujesz się zainstalować nową wtyczkę wykonaj trzykrotnie test prędkości – przed i po instalacji. Zobacz jakie są wyniki i czy wtyczka nie obciąża znacząco Twojej strony.

Lekcja 9: Wykorzystaj CDN.

CDN pozwala na szybsze dostarczanie treści dla użytkowników, zmniejszenie opóźnień i odciążenie naszego serwera.

Nie będę się bawił w eksperta, sprawę oddam w ręce Pablo, który jest inżynierem w Amazonie i kilka miesięcy temu na Web Summit wytłumaczył mi i rozrysował schemat działania CDN-a:

Amazon Web Summit
CDN - schemat

Jak chodzi o dostawcę usług, to ja korzystam z Cloudflare. Cloudflare dodatkowo zwiększa bezpieczeństwo strony. Są dostępne różne plany cenowe, a podstawowy kosztuje 0 dolarów, co oznacza że możemy przetestować usługę i korzystać z niej – w podstawowym zakresie – bez opłat.

Lekcja 10: Wykorzystaj protokół HTTP2.

Administratorem sieci nie jestem, kwestię protokołu http2 ujmę w prosty sposób – http2 jest szybsze od http1. Korzystaj z http2.

Sprawdzając materiały źródłowe dowiedziałem się http2 grupuje zapytania w pakiety, dzięki czemu przesył danych jest szybszy.

Ciekawe, że obecnie trwają prace na http3, co (w połączeniu z PHP 8 i siecią 5G) może stanowić ogromny przeskok jak chodzi o prędkość wczytywania stron internetowych. Historię protokołu http i jego przyszłość poznasz czytając ten post na blogu Cloudflare.

Lekcja 11: Dokonuj aktualizacji kiedy to możliwe.

Wierzę, że każda aktualizacja może pomóc poprawić prędkość Twojej strony. Szczególnie czytając o wszystkich nowościach, można odnieść wrażenie, że już za parę miesięcy będziemy w zupełnie innym miejscu jak chodzi o prędkość wczytywania stron. Dlatego zawsze warto na bieżąco aktualizować motyw, wtyczki i samego WordPressa.

Ciekawym przykładem, na który natknałem się niedawno jest… sam WordPress.

Jak się okazuje WordPress aktualnie korzysta z przestarzałej biblioteki jQuery w wersji 1.12.4 (sprawdź: wordpress-5.3.2\wordpress\wp-includes\js\jquery\jquery.js) z maja 2016, która posiada dwie znane podatności (aktualna wersja jest z maja 2019).

– Google? O co chodzi?

Znalazłem ticket sprzed 3 lat “update to jQuery 3.*. “When this lands, it should be broadcast loudly.” – “Kiedy to będzie zrobione, trzeba to głośno zakomunikować!” napisał @jorbin dwa lata temu. Później jeszcze kilkanaście komentarzy, z których nic nie wynika i nadal korzystamy z nieaktualnej biblioteki.

Rozwiązanie? Wierzę, że sprawa będzie już wkrótce rozwiązana, jednak doraźnie możesz wykorzystać wtyczkę jQuery Manager (tak, wiem, kolejny plugin… tutaj dowiesz się jak zrobić to bez wtyczki). Czy strona będzie szybsza? Nie ma gwarancji. Na pewno wyeliminujesz podatność.

Lekcja 12: Ucz się od tych, którzy mają większą wiedzę.

Na bieżąco obserwuje portale, grupy i oglądam tutoriale związane z optymalizacją strony.

Na koniec tego posta, polecam Ci kilka wartościowych źródeł, dzięki którym możesz dowiedzieć się sporo więcej o poprawie prędkości strony. Korzystam głównie ze źródeł zagranicznych, toteż poniższe materiały są dostępne w języku angielskim:

  • Blog WP-Rocket – blog autorów jednej z najpopularniejszych wtyczek do cachowania i optymalizacji prędkości. Warto też zapisać się do ich newslettera.
  • Elementor blog – blog twórców popularnego page-buildiera dla WordPressa. Narzędzie jest tworzone z myślą o wydajności, a na blogu znajdziemy wartościowe wpisy na temat prędkości strony. Materiały szczególnie przydatne jeśli (tutaj niespodzianka) korzystasz z  Elementora.
  • SearchEngineJournal – strona poświęcona SEO, a prędkość to ważny element SEO dlatego warto zajrzeć. Polecam też ich newsletter.
  • Blog YoastSEO + newsletter. Warto zajrzeć z tych samych względów co powyżej.
  • WPTuts – ciekawe tutoriale na YouTube o WordPressie.
  • Grupa na Facebooku WordPress SpeedUp – jeśli wykres Waterfall stanowi dla Ciebie zagadkę, wtedy polecam tę grupę. 🙂 Jest dużo przykładów omawianych na prawdziwych stronach, sporo przydatnej wiedzy, a jeśli sam masz czymś problem możesz liczyć na pomoc. Na grupie móżemy spotkać ciekawe osoby, jak np. twórcę popularnej wtyczki YoastSEO.

Także… Krótkich czasów wczytywania!

Autor wpisu

Łukasz Scheibinger

Łukasz Scheibinger

Cześć. Na wstępie - nie jestem deweloperem. Ukończyłem uczelnie ekonomiczne i mam wykształcenie marketingowe. Strony internetowe postrzegam jako narzędzie marketingowe służące do realizacji celów biznesowych. Nieustannie szukam sposobów, aby poprawić skuteczność działań. Oprócz tego: sport, podróże i dobre seriale. To już ostatni sezon BoJacka?

Dodaj komentarz

avatar
  Subscribe  
Powiadom o