Web Design Blog / Web:

Przyspieszanie strony WordPress

Posiadanie szybkiej strony WordPress ma same zalety. Po pierwsze, korzystanie z takiej strony jest przyjemne z perspektywy użytkownika. Klient lub czytelnik bloga pozostanie na stronie, jego wizyta będzie trwała prawdopodobnie dłużej i będzie głębsza. Tym samym zwiększa się prawdopodobieństwo, że nasza strona spełni założony przez nas cel.

Drugą zaletą (oczywiście mającą ścisły związek z punktem powyżej) jest polepszenie pozycji w wyszukiwarce. Nie od dziś wiadomo, że szybkość działania strony to krytyczny czynnik decydujący o pozycji strony w wyszukiwarce. Mówi o tym samo Google bowiem nadrzędnym celem wyszukiwarki jest dostarczanie trafnych wyników. Strona która działa wolno jest nieprzydatna – będzie powodować frustrację użytkowników wyszukiwarki i może niekorzystnie wpływać na jej postrzeganie – dlatego strony takie są wycinane z wyników wyszukiwania lub ich pozycja jest znacznie pogorszona.

Czytaj więcej o optymalizacji SEO WordPressa

Dobra optymalizacja wydajności to najpierw eliminacja wąskich gardeł

Poprawna optymalizacja wydajności złożonych systemów takich jak WordPress to znalezienie i zlikwidowanie wąskich gardeł (ang. bottlenecks). Bardzo lubię definicję którą można znaleźć w samouczku Oracla, mówiącej o tym, że wąskie gardła to kluczowe inhibitory wydajności (ang. KPI: Key Performance Inhibitor).

 Wąskie Gardło WordPress

Wąskie gardła w kontekście WordPressa to wszelkie zasoby, które w największym stopniu ograniczają prędkości przepływu zasobów strony internetowej oraz wydłużają czas potrzebny na ich poprawne załadowanie się w przeglądarce użytkownika.

Identyfikacja wąskich gardeł, która de facto powinna być przeprowadzana już w trakcie projektowania strony WordPress pozwala zaplanować działania optymalizujące tak, aby były wykonywane w odpowiedniej kolejności i dały maksymalną korzyść z punktu widzenia użytkownika. Ich eliminacja pozwala ponadto na efektywne wykorzystanie zasobów, którymi aktualnie dysponuje WordPress oraz efektywne rozwijanie strony.


W pierwszej kolejności, warto poświęcić czas na optymalizację, która poprawi wydajność działania WordPressa w większym stopniu a dopiero potem przystąpić do prac, które dadzą relatywnie mniejszą korzyść . Przykładowo, jeżeli 70% czasu potrzebnych na załadowanie się strony WordPress stanowią zdjęcia, to właśnie w optymalizacji zdjęć, powinniśmy szukać rozwiązań, które pozwolą przyspieszyć działanie WordPressa w tym konkretnym przypadku w największym stopniu.

TL;DR

Obsesja na punkcie wyniku w PageSpeed Insights albo GTMetrix tak naprawdę nie jest poprawnym podejściem w przyspieszaniu strony WordPress.

Poprawne podejście to najpierw eliminacja wąskich gardeł a dopiero potem spełnienie ogólnie rozumianych dobrych praktyk w konstruowaniu stron internetowych.

Minimalizacja stylów CSS, która zaoszczędzi niecałe 7 KB podczas kiedy na stronie znajduje się niepoprawnie przeskalowane zdjęcie, które marnuje 250KB – co jest bardzo częstym zjawiskiem na stronach WordPress 😉 – to jak można się domyślić, dowód sporej niekompetencji lub braku staranności web deweloperów.

Jak badać prędkość WordPressa?

Istnieje kilka podejść, dzięki którym możemy stwierdzić czy nasza strona działa stosunkowo szybko czy wolno.

Pierwszym z nich jest testowanie przy pomocy własnej przeglądarki. Przykładowo Google Chrome ma wbudowany zestaw narzedzi do symulowania powolnego łącza i wyświetlania wodospadu pobieranych przez sieć zasobów.

Druga technika to skorzystanie ze wspomnianych narzędzi GTMetrix, Page Speed Insights, Pingdom itd…

Trzecia technika to monitorowanie zakładki wydajność w Google Analytics. Przechodzimy do: Zachowanie >> Szybkość witryny

W WordPressie wąskie gardła mają bezpośredni wpływ na jego wydajność i skalowalność. Mogą one występować w wielu miejscach. Poniżej lista potencjalnych wąskich gardeł na stronie WordPressa oraz praktyczne porady jak sobie z nimi radzić. Opis uzupełni zdefiniowane także dobrych praktyk.

1. Optymalizacja pod kątem czasu odpowiedzi serwera (wydajność po stronie back-endu)

Zbyt długa odpowiedź serwera (pow. 0.2 sekundy) to konsekwencja zbyt rozbudowanej logiki, która ma miejsce w przypadku korzystania z tony różnego rodzaju wtyczek. Daj sobie spokój z wtyczkami do RODO, kreatorami wizualnymi, jakimiś pseudo-zabezpieczeniami, automatyczną optymalizacją obrazków czy Yoastami.

Jeżeli potrzebujesz niestandardowej funkcjonalności w WordPressie, której nie ma w jego podstawowej paczce, zleć web deweloperowi edycję szablonu lub napisanie dedykowanej wtyczki, która będzie napisana tak aby nie poświęcać szybkości działania CMSa (CMS – system zarządzania treścią).

Długa odpowiedź może być także konsekwencją źle skonfigurowanego hostingu. Poniżej kilka technik radzenia sobie z tym problemem, które w 90% powinny zdać egzamin.

Technika 1.1: Wyłączenie niepotrzebnych wtyczek

Przejdź do Wtyczki >> Zainstalowane wtyczki i wyłącz a potem usuń wszystko co się da i co nie jest kluczowe dla twojej strony internetowej. Przed usunięciem sprawdź czy strona poprawnie się wyświetla.

Jeżeli twoja strona jest skonstruowana tak, że wyłączenie wtyczki rozsypuje całą stronę to już wiesz, że twoją stronę wykonywały osoby, które nie potrafią programować a tworzenia stron nauczyli się na tygodniowym kursie 😉

Technika 1.2: Zmiana wersji PHP 5.X na wersję 7.X

PHP czyli język za pomocą, którego WordPress jest napisany ciągle ewoluuje i wykorzystuje coraz to nowsze technologie. PHP w wersji 7 jest kilkakrotnie bardziej wydajny co przekłada się na szybkość działania stron i aplikacji w jego środowisku.

Aby aktywować PHP w wersji 7 będziemy musieli skorzystać z panelu dostawcy hostingu lub skontaktować się z dostawcą. Włączenie PHP 7 zarówno w OVH, nazwie i home polega na skorzystaniu z opcji jakie są nam udostępnione w panelu do zarządzania hostingiem. W niektórych hostingach może działać dyrektywa SetEnv umieszczana w .htaccess.

W serwerach VPS i dedykowanych Ubuntu będzie to kwestia kilku komend – aktualizacji pakietów, zainstalowania PHP7, aktywowania go jako wersji domyślnej i restartu usługi serwera.

Technika 1.3: Wykorzystanie pamięci podręcznej w warstwie CMS

Ideę pamięci podręcznej wykorzystuje się uniwersalnie w wielu systemach komputerowych. Skorzystanie z Cache polega na na przeniesieniu części danych z pamięci o długim czasie dostępu (lub niższej przepustowości) do pamięci o krótszym czasie dostępu . W WordPressie technika ta jest bardzo efektywna ponieważ system ten częściej odczytuje dane, które z drugiej strony stosunkowo rzadko ulegają modyfikacji.

W tym celu (jak na ironię) zalecam zainstalowanie wtyczki WP Super Cache. Działa ona tak, że zapisuje zawczasu wyrenderowany kod HTML na dysku w postaci statycznego, gotowego dla przeglądarki pliku z kodem HTML. Potem usuwa go przy jakiejkolwiek aktualizacji i odtwarza ponownie taki plik. Zapobiega to sytuacji, że użytkownik otrzymuje nieaktualne dane. Posiadanie gotowych danych do przesłania użytkownikowi zwalnia system z odtwarzania treści na podstawie logiki i bazy danych przy każdej kolejnej wizycie.

2. Optymalizacja pod kątem szybkości wczytywania

Warto też mieć na uwadze, że wąskim gardłem może być powolne łącze klienta. Dlatego warto minimalizować ilość potrzebnego pasma do poprawnego wyświetlania się naszej strony.

W optymalizacji szybkościowej, przyspieszenie WordPressa polega na zminimalizowaniu wymagań pod kątem pasma potrzebnego do załadowania się strony i wyrenderowania, jak to PageSpeed mówi „czegoś znaczącego”.

Technika 2.1: Dopasowanie rozmiaru grafik

Skalowanie zdjęć to krytyczna procedura mająca na celu minimalizację pasma potrzebnego do załadowania się strony po stornie klienta. Nieprawidłowy rozmiar grafik marnuje transfer zarówno hostingu jak i użytkownika.

Ustawienia dotyczące skalowania zdjęć udostępnia sam WordPress.. W tym celu należy przejść w Ustawienia >> Media i w sekcji rozmiary obrazków podać odpowiednie wartości. Zmierz długość tekstu w artykule dla widoku desktop. Zrób zrzut ekranu bloga, wklej go sobie do Painta 😉 i zobacz jaki maksymalnie obrazek można wkleić u mnie jest to 750px.

PROTIP: Dokładniejszy wynik otrzymamy badając element kontenera treści w konsoli przeglądarki.

Taką otrzymaną wielkość ustawiasz dla „średniej wielkości”. Ważne jest aby przy redagowaniu treści wybierać tę właśnie wielkość (jest to możliwe w starszych WordPressach oraz w tym nowym – z Gutenbiergiem):

Pamiętaj że na urządzeniach mobilnych o większym ppi, WordPress automatycznie wybierze większy rozmiar, aby zapewnić lepsze wrażenia wizualne. Jest to możliwe dzięki wbudowanej funkcji wp_calculate_image_srcset, dlatego nie trzeba zawyżać rozdzielczości w obawie przed tym że będą niewyraźnie na wyświetlaczach mobilnych.


Technika 2.2: Wybór formatu grafik

Dobór formatu to równie krytyczny krok. Proste grafiki zapisujemy w PNG skomplikowane w JPG albo w formatach nowej generacji np. WebP (uwaga, WebP nie będzie się wszystkim wyświetlał poprawnie).

Odnośnie WebP: jest też opcja z ustawianiem src-set dla wspierających go przeglądarek ale według mnie jest to pewnego rodzaju over-engineering (przeinżynierowanie), które zaśmieca system plików kolejnymi wariantami grafik. Rozwiązanie bardzo mało skalowalne.

O formatach pisałem szeroko w: Optymalizacji zdjęć dla potrzeb stron WWW. Nie ma najmniejszego sensu aby tutaj to wszystko powtarzać. Zachęcam do przeczytania i zrozumienia tego przewodnika.

Technika 2.3: Dostosowanie stopnia kompresji JPEG

Stopień kompresji JPEG też tam jest dokładnie poruszany w WordPressie można go zmienić dopisując w pliku functions.php poniższy kod:

add_filter('jpeg_quality', function($arg){return 80;});

Technika 2.4: Wykorzystanie pamięci podręcznej HTTP

Pamięć podręczna HTTP powoduje, że raz ściągnięty plik z internetu może być przechowywane na dysku klienta i każdorazowe przyszłe żądania do niego mogą odbywać się bez pobierania go ponownie. Jest to możliwe za pomocą wykorzystania nagłówków Expires lub Cache-Control.

Jest to przydatna opcja w przypadku posiadania na stronie zasobów w postaci plików CSS, JS, zdjęć itp… Edycja pliku .htaccess w celu dodania nagłówków expires:

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/xhtml+xml "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

Technika 2.5: Wykorzystanie kompresji deflate / GZIP

Dane wysyłane z serwera zawierają hipertekst, który tak jak zwykły tekst może być skompresowany. Taka niewidoczna kompresja podczas transmisji może radykalnie zmniejszyć objętość danych a tym samym przyspieszyć wczytywanie się strony WordPress. Przeglądarka odbierając dane dekompresuje je i prezentuje we właściwy sposób.

Dopisujemy do .htaccess:

<ifModule mod_deflate.c> <filesMatch "\.(js|css)$"> SetOutputFilter DEFLATE </filesMatch> </ifModule>

Czytaj więcej w artykule: kompresja GZIP / deflate

Technika 2.6: Minimalizacja plików CSS, JS, HTML

Dane można zmniejszyć stosując minifikację. Jest to możliwe za pomocą specjalnych narzędzi online, lub automatyzując pracę za pomocą front-endowych narzędzi takich jak gulp. Jest też opcja aby wykorzystać wtyczkę Autoptimize. Czytaj więcej na czym polega minifikacja.

Technika 2.7: Wklejenie zasobów w ciało szablonu WordPress

Bardzo przydatna technika przyspieszenia wczytywania stron z dużym współczynnikiem odrzuceń (powyżej 50%), stron One-Page, Single Page Application i AMP.

Polega na wklejeniu zawartości kodu CSS w tagi <style> oraz skryptów JavaScript w tagi <script>. Można wykonać ręcznie lub przy pomocy Autoptimize.

Technika ta zmniejsza ilość zapytań HTTP, oczywiście poświęca możliwość zadziałania pamięci podręcznej ale w na stronach WordPress AMP (gdzie wklejenie stylów w ciało jest wymagane), WordPress SPA (gdzie praktycznie nigdy nie doświadczamy „prawdziwego” odświeżenia strony) i stron z małym odsetkiem odsłon na wizytę i tak by nie doszło do jej wykorzystania.

Technika 2.8: Skorzystanie z technik lazy-load i infinite-scroll

Synchroniczne ładowanie się wszystkich zdjęć i zasobów, nawet do bardzo nisko położonych (do których trzeba kilka razy przewinąć cały widok) marnuje łącze i blokuje szybkie pojawianie się treści położonych wyżej.

Przebuduj stronę aby niewidoczne w pierwszym ekranie zdjęcia i video ładowały się z odpowiednim opóźnieniem. Dobrą praktyką jest załączanie video z atrybutem preload=”none” i ładowanie ich dopiero jak będą widoczne dla użytkownika.

Technika 2.9: Cache zasobów za pomocą CDN

CDN jest zoptymalizowany pod szybkie serwowanie statycznych zawartości, eliminuje opóźnienia w działaniu strony. Jego system plików szybciej zwraca dane i jest w stanie skracać geograficzną odległość pomiędzy urządzeniami transmitującymi dane. Odciąża główny hosting i tym samym eliminuje powstanie wąskich gardeł.

Czytaj więcej o CDN.

3. Optymalizacja pod kątem wydajności (po stronie front-endu)

Szybkość polega nie tylko na tym jak szybko dane zostaną pobrane przez przeglądarkę. Istotne jest także to, jak bardzo skomplikowany będzie front-end i w jakim stopniu obciążamy możliwości obliczeniowe końcowego urządzenia.

Technika 3.1: Minimalizacja zasobów i skryptów

Tym bardziej krytycznych, które nie mogą być pobrane z opóźnieniem (fonty, obrazki, wideo, skrypty, animacje itd..). Wystrzeganie się slajderów, wodotrysków, skomplikowanych animacji i SVG itd…

Technika 3.2: Zastosowanie wszystkich praktyk z punktu 2

Czyli minimalizacja objętości wszystkich zasobów (grafik, skryptów) odraczanie pobierania i odtwarzania multimediów.

Technika 3.3: Skrócenie łańcuchów żądań krytycznych

Dołączanie skryptów z atrybutem async lub defer lub wklejać instrukcje w ciało strony.

Podsumowanie

Jak widać na szybkość działania strony WordPress wpływa wiele elementów. Działania wykonane w kierunku optymalizacji i przyspieszania WordPressa na pewno będą się opłacać i będą długofalowo przynosić pozytywne efekty, które będą niczym innym jak konsekwencją pozytywnych wrażeń użytkowników twojej witryny.

Źródła:

https://www.oracle.com/technetwork/oem/grid-control/overview/wp-rapid-1.pdf

https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint

https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency

https://developers.google.com/web/tools/lighthouse/audits/first-cpu-idle

Przyspieszanie strony WordPress
4.8 (95%) głosów: 4

Autor:

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail