Jak przyspieszyć stronę na WordPressie

Szybkość ładowania strony ma kluczowe znaczenie z wielu powodów, co potwierdzają liczne badania. Oto dlaczego szybkość strony jest tak ważna:

• SEO – Google wykorzystuje szybkość strony jako jeden z czynników rankingowych. Szybsze strony mają tendencję do lepszego pozycjonowania w wynikach wyszukiwania, co przekłada się na większy ruch organiczny.
• Konwersja – Amazon odkrył, że każda dodatkowa sekunda ładowania strony może kosztować 1% spadku w sprzedaży. Google również stwierdziło, że opóźnienie o 0,5 sekundy w czasie ładowania strony spowodowało 20% spadek ruchu.
• Wpływ na wskaźnik odrzuceń – badania wykazały, że strony ładowane dłużej niż 3 sekundy mogą spowodować wzrost wskaźnika odrzuceń nawet o 32%. Im dłuższy czas ładowania, tym większa szansa, że użytkownik opuści stronę przed jej załadowaniem.
• Doświadczenie użytkownika – szybka strona zapewnia lepsze doświadczenie użytkownika. Użytkownicy oczekują szybkiego dostępu do informacji i usług. Wolne ładowanie strony może prowadzić do frustracji i negatywnie wpływać na postrzeganie marki.
• Mobilność – w erze mobilnej, gdzie coraz więcej użytkowników korzysta z internetu na urządzeniach mobilnych, szybkość ładowania jest jeszcze bardziej krytyczna. Sieci mobilne często mają wolniejsze połączenia, co sprawia, że optymalizacja szybkości strony jest niezbędna.
• Zużycie zasobów – szybsze strony zużywają mniej danych, co jest ważne dla użytkowników z ograniczonymi pakietami danych oraz dla ogólnej wydajności sieci.

Każda sekunda ładowania strony ma bezpośredni wpływ na sukces strony internetowej, od zadowolenia użytkowników, przez konwersję, po SEO i widoczność w wyszukiwarkach.

Jak poprawić prędkość WordPressa?

1. Użyj wtyczki Autoptimize

• Zainstaluj i aktywuj wtyczkę Autoptimize.
• W ustawieniach wtyczki upewnij się, że są włączone opcje: „Optimize JavaScript Code?”, „Optimize CSS Code?” oraz „Optimize HTML Code?”.
  W najnowszej wersji pluginu te opcje są domyślnie włączone.

2. Skorzystaj z rozwiązań Cloudflare

• Załóż konto na Cloudflare, dodaj domenę.
• Zmień ustawienia DNS na serwery Cloudflare. Płatna wersja CloudFlare potrafi także minifikować HTML, JS i CSS. Jeśli skorzystasz z tej opcji to nie musisz instalować pluginu Autoptimize.
• Zainstaluj plugin CloudFlare i aktywuj Automatic Platform Optimization dla szybszego TTFB. Jest to również płatna opcja warta wdrożenia. Więcej o tym punkcie przeczytasz w osobnym rozdziale.

3. Kompresuj obrazy

• Kompresuj obrazy przed dodaniem ich do WordPress’a. Użyj compressor.io lub programu ImageOptim (jeśli korzystasz z Maca).
• Rozważ użycie pluginów takich jak Smush i ShortPixel Image Optimizer jeśli Twoje niezoptymalizowane obrazy są już na serwerze.

4. Używaj nowoczesnych formatów dla plików obrazów

• WebP jest domyślnie wspierane przez WordPress’a od wersji 5.8.
• AVIF jest domyślnie wspierane przez WordPress’a od wersji 6.5. AVIF kompresuje obrazki jeszcze wydajniej niż WebP.

6. Zmień szablon na najszybszy i działający poprawnie z pluginami

• Szablon Multi jest zoptymalizowany pod kątem szybkości. Używa minimalnej liczby zapytań HTTP, ma bardzo lekki kod CSS, JS oraz używa natywnego JavaScriptu zamiast biblioteki jQuery. Ponadto nie generuje inline CSS i działa poprawnie ze wszystkim popularnymi pluginami (m.in. tymi, które zostały rekomendowane i opisane w tym ebooku, np. Autoptimize i DiagnoSEO).

7. Użyj swap Google Fonts display

• W szablonie Multi użyj opcji swap font display. Pozwala to na szybsze wyświetlanie tekstu.

8. DiagnoSEO Pro – użyj ustawień dot. poprawy wydajności

Dzięki pluginowi DiagnoSEO pro w “Performance settings” możesz wyłączyć niepotrzebne funkcje WordPressa:

1.  Opcja “Disable emoji” – Wyłącz emoji

• Zmniejsza liczbę zapytań HTTP: Emoji dodają dodatkowe zapytanie do pliku JavaScript na WordPressie, co może spowolnić ładowanie strony.
• Poprawia wydajność: Usunięcie skryptu emoji zmniejsza czas ładowania strony, co jest korzystne dla użytkowników i SEO.

2. Opcja “Disable asset query string” – Wyłącz “query string” dla zasobów statycznych

• Usprawnia cachowanie przez przeglądarki: Usunięcie “query stringa” z URL-i do zasobów (CSS, JS) pozwala na lepsze cache’owanie tych zasobów przez przeglądarki.
• Poprawia ocenę strony: Niektóre narzędzia do testowania wydajności strony, jak Google PageSpeed Insights lub GTMetrix, zalecają usunięcie “query stringa” dla lepszego wyniku.

3. Opcja “Remove Gutenberg CSS library” – Usuń bibliotekę CSS Gutenberg

• Zmniejsza rozmiar strony: Jeśli nie korzystasz z bloków Gutenberg, usunięcie ich stylów CSS zmniejsza ogólny rozmiar strony, co przyspiesza jej ładowanie.
• Zmniejsza liczbę zapytań: Usunięcie niepotrzebnych plików CSS zmniejsza liczbę zapytań do serwera, co poprawia szybkość ładowania strony.

4. Opcja “Remove comment-reply script” – Usuń skrypt dot. odpowiedzi na komentarze

• Zmniejsza liczbę zapytań JavaScript: Jeśli Twoja strona nie potrzebuje funkcji odpowiedzi w komentarzach, usunięcie tego skryptu zmniejsza czas ładowania.
• Poprawia szybkość strony: Mniej skryptów JavaScript oznacza szybsze przetwarzanie strony przez przeglądarkę.

5. Opcja “Remove embed script” – Usuń skrypt embed

• Zmniejsza liczbę zapytań: Mniej skryptów do załadowania to mniej zapytań do serwera.
• Optymalizuje wydajność: Mniej kodu do załadowania to szybsze ładowanie strony.

Pamiętaj, każda sekunda ładowania się strony ma znaczenie. Optymalizując swoją stronę WordPress, nie tylko poprawisz doświadczenie użytkowników, ale także SEO. 

9. (Opcjonalnie) Wtyczka W3 Total Cache dla cache strony

Jeśli nie korzystasz z CloudFlare APO i szukasz możliwość cache’owania strony w celu skrócenia TTFB to darmową alternatywą jest włączenie cachowania przy pomocy pluginu W3 Total Cache. W tym celu:

• Zainstaluj plugin W3 Total Cache.
• W „General Settings > Page Cache” zaznacz „Enable”, aby włączyć cache’owanie.
• Optymalizuj cache przeglądarki w „Browser Cache > General”:
  • Włącz kompresję HTTP (gzip): Zaznacz „Enable HTTP (gzip) compression”.
  • Ustaw entity tag (ETag): Zaznacz „Set entity tag (ETag)”.
  • Ustaw cache control header: Zaznacz „Set cache control header”.
  • Ustaw expires header: Zaznacz „Set expires header”.
  • Ustaw Last-Modified header: Zaznacz „Set Last-Modified header”.
  • Usuń query strings z zasobów statycznych: Zaznacz „Remove query strings from static resources”.

Te ustawienia pomagają w lepszym zarządzaniu cache przeglądarki, co przekłada się na szybsze ładowanie strony dla powracających użytkowników. Ustawienie odpowiednich nagłówków cache i kompresji danych pozwala na efektywniejsze wykorzystanie pamięci cache przeglądarki, co jest kluczowe dla wydajności strony.

10. (Opcjonalnie) Leniwe ładowanie obrazów – zainstaluj a3 Lazy Load 

Od wprowadzenia WordPress 5.5, leniwe ładowanie (lazy loading) stało się standardową funkcją dla wszystkich obrazów dodanych do biblioteki mediów witryny. WordPress 5.7 rozszerzył tę funkcję o leniwe ładowanie dla iframe’ów, a wersja 5.9 przyniosła dodatkowe usprawnienia wydajności. Wciąż jednak istnieje wtyczka a3 Lazy Load, która współpracuje z tymi wbudowanymi funkcjami WP, oferując jednak dodatkowe korzyści i rozszerzenia:

• Wsparcie dla starszych przeglądarek – a3 Lazy Load zapewnia leniwe ładowanie obrazów również w tych przeglądarkach, które nie obsługują nowego atrybutu WP wprowadzonego w WordPress 5.5. Dzięki temu, niezależnie od przeglądarki, użytkownicy mogą doświadczać szybszego ładowania strony.
• Leniwe ładowanie zewnętrznych obrazów – w przeciwieństwie do standardowego leniwego ładowania w WordPressie, które dotyczy tylko obrazów z biblioteki mediów, a3 Lazy Load umożliwia leniwe ładowanie obrazów załadowanych z zewnętrznych źródeł. To rozszerza optymalizację wydajności na całą stronę.
• Leniwe ładowanie iframe’ów i wideo – chociaż WordPress 5.7 wprowadził leniwe ładowanie dla iframe’ów, a3 Lazy Load poszerza tę funkcję, zapewniając leniwe ładowanie dla wszystkich iframe’ów i wideo, w tym tych, które nie są domyślnie obsługiwane przez WordPress. To szczególnie ważne dla treści osadzonych, takich jak filmy z YouTube czy Vimeo, które mogą znacząco wpływać na czas ładowania strony.

Jak skonfigurować a3 Lazy Load?

• Zainstaluj plugin a3 Lazy Load.
• Ustaw „Effect & Style > Fade” i usuń kolor tła w „Loading Background Colour”. Dzięki temu ograniczysz wpływ pluginu na wygląd ładowanych obrazków.

HTTPS – dlaczego i jak wdrożyć najlepiej od samego początku istnienia serwisu?

Dlaczego HTTPS jest ważny?

• SEO – Google potwierdziło, że HTTPS jest czynnikiem rankingowym.
• Bezpieczeństwo – HTTPS szyfruje dane, chroniąc informacje użytkowników. Jest to szczególnie ważne w sklepach internetowych.
• Zaufanie użytkowników – Strony z HTTPS są oznaczane jako bezpieczne, budując zaufanie.
• Unikanie ostrzeżeń – Przeglądarki oznaczają strony HTTP jako niebezpieczne, odstraszając odwiedzających.

Jak wdrożyć HTTPS?

• Wdrożenie od początku – Zainstaluj certyfikat SSL przed uruchomieniem strony. To ułatwia zarządzanie i unika problemów z przekierowaniami.
• Aktualizuj linki zewnętrzne: Upewnij się, że linki zewnętrzne prowadzą do wersji HTTPS. To zwiększa moc linków, eliminując potrzebę przekierowań 301.
• Użyj Let’s Encrypt. To darmowy certyfikat SSL dostępny dla każdego. Wiele hostingów oferuje łatwą integrację.
• Skorzystaj z CloudFlare – Jeśli Twój hosting nie oferuje darmowego certyfikatu SSL możesz skorzystać z CloudFlare. CloudFlare oferuje darmowe SSL i dodatkowe korzyści, jak ochrona przed DDoS.
• Zaktualizuj ustawienia w Google Search Console: Po wdrożeniu HTTPS, dodaj swoją stronę jako nową właściwość w Google Search Console.

Dobre praktyki dot. HTTPS

• Ustaw przekierowania 301 z HTTP na HTTPS, aby uniknąć problemów z duplikacją treści.
• Linki do HTTPS – upewnij się, że wszystkie linki wewnętrzne prowadzą do https zamiast do http, żeby uniknąć niepotrzebnego przekierowania.
• Testuj certyfikat – po wdrożeniu, użyj narzędzi online do testowania certyfikatu SSL i upewnij się, że wszystko jest poprawnie skonfigurowane.
• Wykonaj crawl strony – możesz użyć narzędzia DiagnoSEO Audit oraz Crawler lub Screaming Frog, żeby upewnić się, że wszystkie linki prowadzą do https oraz zwracają status 200.
• Linkuj tylko do wersji HTTP z serwisów zewnętrznych. Unikaj niepotrzebnych przekierowań na których lekko traci się moc linka.

Wdrożenie HTTPS od samego początku istnienia serwisu to najlepsza praktyka. Zapewnia bezpieczeństwo, buduje zaufanie i wspiera SEO. Nie czekaj, zadbaj o to już teraz.

Jakich błędów unikać w celu zachowania wysokiej wydajności w systemie WordPress?

Unikaj poniższych błędów, aby Twoja strona ładowała się szybko i bez problemów. Pamiętaj, że szybka strona to lepsze doświadczenie użytkownika i wyższe pozycje w wyszukiwarkach.

Unikaj nadmiaru wtyczek

Nie instaluj zbyt wielu wtyczek. Każda dodatkowa wtyczka spowalnia Twoją stronę. Wybieraj mądrze.

Nie wgrywaj obrazów bez optymalizacji

Zawsze optymalizuj obrazy przed dodaniem. Duże pliki obciążają serwer i spowalniają ładowanie strony.

Unikaj wolnego hostingu

Unikaj tanich rozwiązań hostingowych. Wybierz dostawcę, który oferuje dedykowane rozwiązania dla WordPressa z najnowszą wersją PHP.

Unikaj wolnych motywów

Unikaj „ciężkiego” kodu. Zbyt wiele JavaScriptu lub CSS spowalnia stronę. Używaj szybkich i lekkich motywów z semantycznym kodem SEO, jak np. motyw Multi.

Brak aktualizacji WordPress’a, wtyczek i motywów

Regularnie aktualizuj wtyczki i motywy. Nieaktualne komponenty mogą być wolniejsze i mniej bezpieczne.

Brak minifikacji CSS, JS oraz HTML

Włącz minifikację HTML, CSS oraz w pluginie Autoptimize, aby zmniejszyć objętość strony. To poprawia szybkość ładowania.

Brak włączonych opcji dot. poprawy performance w pluginie DiagnoSEO Pro.

Włącz wybrane opcje w pluginie DiagnoSEO Pro w zakładce Performance settings. Pomogą one zoptymalizować Twoją witrynę do granic możliwości. Dla przykładu jeśli Twój serwis nie potrzebuje wyświetlać emoji oraz nie embeduj’e video oraz kart X’a (twittera) to można wyłączyć ładowanie niepotrzebnych skryptów.

Brak użycia CDN’a

Jeśli Twój serwis obsługuje użytkowników z różnych krajów to CDN, np. CloudFlare dostarczyć treść z serwerów bliżej użytkownika. To przyśpiesza ładowanie.

Jak przygotowywać obrazki przed uploadowaniem do WordPress’a?

Optymalizacja obrazków w WordPressie jest kluczowa dla poprawy szybkości ładowania strony, co bezpośrednio wpływa na doświadczenie użytkownika i pozycjonowanie w wyszukiwarkach. Oto kilka zaleceń dotyczących ustawień i praktyk, które warto zastosować:

1. Wybierz odpowiedni format obrazu

• JPEG: najlepszy dla zdjęć i obrazów z dużą ilością kolorów.
• PNG: idealny dla grafik z przezroczystością i obrazów z mniejszą ilością kolorów.
• WebP: nowoczesny format oferujący doskonałą kompresję przy zachowaniu jakości; wspierany przez większość nowoczesnych przeglądarek. WordPress domyślnie nie wspiera tego formatu. Wymagana jest instalacja pluginu takiego jak SVG support.
• SVG: format, który nadaje się najlepiej na proste grafiki wektorowe, typu logo, ikony, ilustracje. Jego zaletę jest niski rozmiar oraz zachowanie ostrości nawet na urządzeniach o wysokiej rozdzielczości (retina). 

2. Kompresuj obrazy przed przesłaniem

Użyj narzędzi do kompresji obrazów, takich jak https://compressor.io/ pluginów WordPress, aby zmniejszyć rozmiar plików bez znaczącej utraty jakości.

Jeśli posiadasz system operacyjny Mac OS to godnym polecenia programem do kompresji obrazów jest ImageOptim.

3. Dostosuj rozmiar obrazów

Przed przesłaniem na stronę dostosuj rozmiar obrazów do maksymalnych wymiarów, jakie będą wyświetlane. Nie ma potrzeby przesyłania obrazów o rozdzielczości większej niż maksymalna szerokość strony lub miejsca, w którym mają być wyświetlane. Na przykład jeśli szerokość strony posta to 1000px to nie ma potrzeby przesyłania obrazu o wymiarach (szerokości) większej niż 1000px. Staraj się, aby obrazek nie przekraczał 500 KB.

5. Optymalizuj obrazy dla SEO

• Nazwy plików: używaj opisowych, ale krótkich nazw plików z odpowiednimi słowami kluczowymi, np. pies-golden-retriever.jpg
• Tekst alternatywny (alt text): zawsze dodawaj tekst alternatywny do obrazów, opisując ich zawartość. Jest to ważne dla SEO i dostępności. Przykład: “Aportujący pies rasy golden retriever”

6. Wykorzystaj CDN dla obrazów

Jeśli z twojego serwisu korzystają użytkownicy z różnych krajów to warto wdrożyć CloudFlare.  Ten Content Delivery Network (CDN) może znacznie przyspieszyć ładowanie obrazów, przechowując kopie na serwerach rozlokowanych na całym świecie.

7. Ustawienia WordPressa

W WordPressie możesz również dostosować domyślne rozmiary obrazów (miniaturka, średni, duży) w sekcji Ustawienia -> Media. Możesz dostosować te rozmiary do swoich potrzeb, aby uniknąć niepotrzebnego przetwarzania obrazów.

CloudFlare plugin do WordPress’a

CloudFlare stworzyło plugin do WordPress’a, który znacząco przyspiesza ładowanie stron, poprawia SEO i chroni przed atakami DDoS oraz specyficznymi dla WordPress’a lukami w zabezpieczeniach. Z jego pomocą możesz łatwo zintegrować swoją stronę z usługami CloudFlare, korzystając z szybkiej instalacji i ustawień zoptymalizowanych specjalnie dla platformy WordPress.

Główna korzyść pluginu to poprawa prędkości i SEO. Dzięki przyspieszeniu ładowania stron i zwiększeniu bezpieczeństwa, plugin CloudFlare pozytywnie wpływa na SEO.

Plugin CloudFlare cache’uje całą stronę (nie tylko obrazki, czy pliki JS lub CSS). Dzięki temu strona może być przechowywana w formie statycznej na rozproszonych serwerach CloudFlare na całym świecie. To znacząco skraca czas ładowania.

Funkcje pluginu:

• Łatwa konfiguracja: Umożliwia szybkie i łatwe wdrożenie CloudFlare na Twojej stronie WordPress.
• Firewall dla aplikacji webowych (WAF): Specjalnie opracowane dla WordPress’a, chronią przed zagrożeniami.
• Automatyczne czyszczenie cache przy aktualizacjach strony: Zapewnia, że odwiedzający zawsze widzą najświeższą wersję Twojej strony.
• APO (Automatic Platform Optimization): Serwuje całą Twoją stronę z sieci CloudFlare (nie tylko obrazki, JS i CSS jak tradycyjne CDNy), zapewniając szybkie ładowanie niezależnie od lokalizacji użytkownika.

Pozostałe korzyści związane z CloudFlare:

• SSL dla WordPress: CloudFlare oferuje darmowe certyfikaty SSL, zwiększając bezpieczeństwo danych przesyłanych między stroną a użytkownikami.
• Ochrona przed atakami DDoS: Darmowa ochrona CloudFlare minimalizuje ryzyko ataków DDoS.
• Integracja CloudFlare z WordPress’em to prosta droga do szybszej, bezpieczniejszej i lepiej pozycjonowanej strony. Niezależnie od tego, czy zarządzasz blogiem, sklepem internetowym, czy stroną firmową, CloudFlare zapewni Ci narzędzia niezbędne do osiągnięcia lepszych wyników w internecie.

Instalacja i konfiguracja pluginu CloudFlare w WordPressie

1. Przejdź do „Wtyczki” → „Dodaj nową”. Wyszukaj „CloudFlare” i zainstaluj.
2. Aktywuj plugin. Zaloguj się do swojego konta CloudFlare, aby połączyć stronę.
3. Skonfiguruj ustawienia. Skup się na optymalizacji prędkości i zwiększeniu bezpieczeństwa.

Koszt korzystania z pluginu wynosi od 5$ miesięcznie.