W tym przewodniku pokażę Ci, jak znacznie przyspieszyć Twoją witrynę WordPress, konfigurując kilka narzędzi.
Naucz się przyspieszać czasy ładowania witryny pięciokrotnie lub więcej. Działajmy na rzecz lepszego doświadczenia użytkownika i wyższych pozycji w wyszukiwarkach 💪
Zmniejszenie czasu ładowania strony i zwiększenie szybkości witryny znacząco poprawi doświadczenie użytkownika. Twoi odwiedzający zostaną dłużej, a liczba użytkowników, którzy opuszczają witrynę po otwarciu pierwszej strony, będzie niższa niż wcześniej. Mogłeś już słyszeć o tej metryce jako tzw. współczynniku odrzuceń.
Co więcej, szybkość witryny jest czynnikiem rankingowym Google, co oznacza, że Twoja witryna może po pewnym czasie uzyskać wyższe pozycje w wyszukiwarce Google. To spowoduje, że więcej użytkowników znajdzie Twoją witrynę i zwiększy się ruch.
Jest kilka powodów, dla których Twoja witryna WordPress może być wolna.
Najczęstsze przyczyny to „Brak buforowania" i zbyt duży rozmiar strony.
Oprócz tych dwóch głównych powodów, kilka innych zmiennych może wpływać na szybkość Twojej witryny:
- Wiele zainstalowanych wtyczek
- Konfiguracja Twojego serwera
- Zły kod w jednej lub kilku wtyczkach.
- Zły kod w motywie
- Powolna łączność sieciowa
- Wolna odpowiedź serwera
Zanim zacznę, ważne jest, aby pamiętać, że nie wszystkie zalecane działania mogą poprawić czas ładowania witryny. Jedno może działać lepiej niż inne, a niektóre wpływają na czas ładowania witryny tylko nieznacznie.
Contents
Wideo: Jak przyspieszyć WordPress
Jeśli wolisz obejrzeć wideo zamiast czytać ten artykuł o przyspieszaniu WordPressa, możesz obejrzeć cały artykuł jako wideo:
Narzędzia, których używamy do przyspieszania WordPressa
- ShortPixel Image CDN
- WP Super Cache
- Autoptimize
- wp-staging.com
- Pingdom
- Google PageSpeed Insights
- GiftofSpeed GZIP Test
Zmierz szybkość strony swojej witryny
Zacznijmy od kilku testów porównawczych, aby uzyskać przegląd i zrozumienie szybkości własnej witryny.
Do testowania i analizowania szybkości witryny możesz użyć darmowych narzędzi do pomiaru szybkości strony online Pingdom i Google PageSpeedInsights.
Te wyniki pochodzą z przykładowej witryny z WordPress 5.6, garstką popularnych wtyczek i darmową wersją motywu „Astra", oraz witryny WordPress dalekiej od szybkiego ładowania:
Aktywacja buforowania
Zacznijmy od pierwszego kroku — instalacji wtyczki cache.
Wtyczka cache zapisuje widoczne wyjście HTML witryny w plikach tymczasowych na Twojej witrynie. Wykonywanie kodu z wtyczki lub motywu jest bardzo czasochłonne, ponieważ serwer musi wykonać wiele obliczeń, aby je wykonać.
Z buforowaniem te obliczenia muszą być wykonane tylko raz, gdy odwiedzający otworzy Twoją witrynę. Wtyczka cache najpierw sprawdza, czy istnieje cache dla określonej zawartości.
Jeśli zawartość jest już buforowana, bezpośrednio zwraca wstępnie obliczone wyjście HTML, zamiast ponownie wykonywać cały kod. Wtedy serwer ma więcej wolnych zasobów do szybszego ładowania witryny. Sama instalacja wtyczki cache i jej poprawne dostosowanie może uczynić Twoją witrynę dziesięciokrotnie szybszą lub nawet bardziej.
Zanim zastosujesz się do tego przewodnika, zalecamy utworzenie klonu witryny, aby bezpiecznie przetestować wszystkie kroki z tego przewodnika przyspieszania WordPressa. Poniższe instrukcje są łatwe do wykonania, ale nadal możliwe jest, że jedna z Twoich wtyczek lub motyw nie współpracuje dobrze z tymi dostosowaniami wydajności.
Zanim coś popsuje się na witrynie produkcyjnej, zastosuj wszystkie modyfikacje w celu testowym najpierw na klonie witryny. Jeśli wszystko pójdzie dobrze, możesz wtedy zastosować te same optymalizacje na swojej witrynie produkcyjnej.
Aby szybko sklonować witrynę, możesz użyć darmowej wtyczki WP STAGING. Może utworzyć klon jednym kliknięciem, a Ty możesz wypróbować wszystkie możliwe optymalizacje przyspieszenia w bezpiecznym środowisku.
Polecam WP Super Cache. Ta wtyczka jest rozwijana przez Automattic. To ta sama firma odpowiedzialna za rozwój rdzenia WordPress. Wtyczka jest bezpłatna, potężna i prosta, jeśli rozumiesz, jak działa.
Ta wtyczka jest w wielu opcjach tak potężna jak wtyczki premium, takie jak popularny WP ROCKET, o którym mogłeś słyszeć wcześniej.
WP ROCKET ma bardziej przyjazny interfejs i może być łatwiejszy w użyciu dla początkujących. Nie martw się; wezmę Cię za rękę i pokażę wszystkie kliknięcia, które musisz wykonać, aby uzyskać podobne wyniki, jak gdybyś używał wtyczki cache premium.
Dzięki temu otrzymasz te same wyniki szybkości za darmo!
Przejdź do sklepu z wtyczkami i wyszukaj WP Super Cache.
Po zainstalowaniu i aktywowaniu wtyczki WP Super Cache, skonfigurujmy ją.
Możliwe byłoby aktywowanie cache poprzez sekcję „Easy", wybierając „caching on", ale w tym momencie przechodzimy bezpośrednio do obszaru „Advanced", ponieważ tutaj możemy bardziej precyzyjnie skonfigurować ustawienia.
- Aktywuj pole wyboru „Enable Caching".
- Simple jako metoda dostarczania cache.
- Wyłącz buforowanie dla zalogowanych odwiedzających.
- Nie buforuj stron z parametrami GET. Zapewnia, że dynamiczne strony, które są różne dla każdego użytkownika, takie jak koszyki zakupowe, nigdy nie będą buforowane.
- Kompresuj strony, aby były szybciej serwowane odwiedzającym,
i aktywuj kompresję Gzip, która znacznie przyspiesza witrynę. Należy pamiętać, że niektóre serwery już same kompresują dane, co prowadzi do błędów po uruchomieniu opcji. Aby sprawdzić, czy Twój serwer już używa kompresji gzip, możesz użyć tego testu wydajności gzip. - Cache rebuild,
pokazuje użytkownikowi buforowaną zawartość, nawet jeśli cache jest aktualizowany z powodu nowej zawartości. Oznacza to, że Twoi odwiedzający nigdy nie zobaczą niebuforowanej zawartości z wyjątkiem pierwszego wygenerowania cache. - 304 Browser Caching,
mówi użytkownikowi, aby załadował witrynę z cache przeglądarki, jeśli w przeglądarce użytkownika jest już buforowana zawartość zamiast łączenia się z serwerem. Może to jeszcze bardziej obniżyć obciążenie procesora Twojego serwera.
Następnie przewiń w dół do zakładki „Advanced".
- Aktywuj obsługę urządzeń mobilnych. Wystarczy proste kliknięcie, ale wp-super-cache wskazuje, że w zależności od projektu może być konieczne zainstalowanie dodatkowej wtyczki. Ponieważ używamy standardowego motywu WordPress, nie jest to konieczne. Jeśli Twoja witryna działa dobrze na urządzeniach mobilnych po aktywacji tej opcji, możesz jej używać.
- Gdy wpis lub strona jest publikowana lub aktualizowana, wyczyść wszystkie pliki cache i upewnij się, że cache zostanie wyczyszczony, aby można było wyświetlić nową zawartość.
Wreszcie, ostatnim krokiem w ustawieniach wtyczki cache jest opcja PRELOADING, którą można znaleźć pod zakładką „Preload":
Ustawienie preload powoduje, że wtyczka okresowo buforuje wszystkie wpisy i strony witryny. Możesz ustawić przedział czasu między każdym odświeżeniem cache. Ten przedział czasowy jest bardzo kluczowym ustawieniem.
W środowisku hostingu współdzielonego powinieneś optymalnie ustawić go na raz dziennie – co 1440 minut.
Jeśli aktualizujesz witrynę dwa razy dziennie, możesz wybrać przedział czasu między każdym odświeżeniem cache na 720 minut. Przy tym ustawieniu cały cache będzie odświeżany dwa razy dziennie. Tak niski czas odświeżania może powodować dodatkowe obciążenie serwera.
Zaleciłbym nie używać niższej wartości w środowiskach hostingu współdzielonego – ponieważ może to być, a najprawdopodobniej będzie liczone jako nadmierne wykorzystanie zasobów serwera.
Jeśli jednak korzystasz z VPS lub dedykowanego serwera, możesz ustawić częstotliwość odświeżania na zaledwie 60 minut.
Warto wiedzieć, że liczba wpisów i stron w witrynie wpływa na zasoby wymagane do każdej operacji odświeżania cache preload. Optymalnym czasem odświeżania dla dedykowanego serwera w witrynie o dużym ruchu byłoby 2 godziny.
Zaznaczyłem odpowiednie pola wyboru i ustawiłem przedział odświeżania cache na 1440 min. Możesz wybrać dowolną wartość!
Optymalizacja plików CSS, JavaScript i obrazów
Do następnych dostosowań, takich jak łączenie plików Javascript i CSS oraz optymalizacja obrazów i wyjścia HTML, używamy innej wtyczki o nazwie „Autoptimize", którą możemy zainstalować z repozytorium wtyczek WordPress.
To, czy powinieneś agregować pliki CSS i JavaScript, zależy głównie od tego, jak skonfigurowany jest Twój serwer.
Każda witryna ładuje pliki za pomocą protokołu HTTP 1.1 lub nowszego HTTP 2.
Z HTTP 1.1 wszystkie pliki będą pobierane jeden po drugim. Na przykład jeden plik musi być w pełni załadowany do odwiedzającego, zanim serwer będzie mógł rozpocząć wysyłanie kolejnego pliku.
Aby zmniejszyć liczbę plików do pobrania, Autoptimize może łączyć te pliki. Tak więc zamiast wysyłać dziesięć plików CSS, Twój serwer musi pobrać tylko jeden plik, co skutkuje szybszym całkowitym czasem ładowania. Mimo że całkowity rozmiar połączonego pliku CSS lub JS jest większy, każde pojedyncze żądanie wiąże się z dodatkowym narzutem; jak dodatkowy czas, jakiego żądanie potrzebuje na nawiązanie połączenia z serwerem. Dlatego może być szybciej załadować jeden duży pojedynczy plik niż wiele plików.
Tak więc, jeśli Twój serwer działa w HTTP 1.1, zaleca się agregowanie wszystkich plików CSS i JS w witrynie.
Z drugiej strony protokół HTTP2 może pobierać wiele plików jednocześnie. Jeśli takie jest ustawienie na Twoim serwerze, włączenie agregacji plików może być przeciwskuteczne. HTTP2 jest zwykle znacznie szybszy, ponieważ może pobierać wiele małych plików jednocześnie zamiast jednego dużego.
Dlatego łączenie plików CSS i JS często nie przynosi korzyści i może nawet spowolnić witrynę, jeśli używa HTTP2. Aby być bezpiecznym, możesz przetestować obie opcje, aby określić, które ustawienie daje najlepsze wyniki.
Aby sprawdzić, czy Twoja witryna używa HTTP 2, użyj KeyCDN http2 service.
Optymalizacja JavaScript
Wybierz zakładkę „JS, CSS & HTML".
Aktywuj Optimize JavaScript Code
Jeśli Twój serwer używa HTTP 1:
- Aktywuj Aggregate JS files, aby łączyć pliki JavaScript zgodnie z zaleceniami serwisów benchmarków szybkości strony
Wyłącz opcje:
- Force JavaScript in <head
- Exclude scripts from Autoptimize
- Add try-catch-wrapping.
Aktywuj te opcje tylko wtedy, gdy agregujesz pliki javascript i napotykasz problemy z witryną. Wtedy możesz wykluczyć konkretne pliki javascript z procesu łączenia.
Jeśli Twój serwer używa HTTP 2:
- Wyłącz Aggregate JS Files
Optymalizacja JavaScript może zepsuć rzeczy w Twojej witrynie! Zdecydowanie zalecam przetestowanie tego kroku na witrynie staging przed wprowadzeniem zmian w witrynie produkcyjnej.
Optymalizacja plików CSS
Kolejnym krokiem jest optymalizacja plików CSS.
- Kliknij Optimize CSS Code.
Jeśli Twój serwer używa HTTP 1.1, aktywuj opcje:
- Aggregate CSS-files
- Aggregate inline CSS.
To dalej poprawi wynik szybkości strony. To to samo, co agregowanie plików Javascript i plików javascript inline, ale tylko dla CSS. Pozostaw tę opcję wyłączoną, jeśli Twój serwer używa HTTP2!
Jeśli Twój serwer używa HTTP1 lub HTTP2:
- Aktywuj Generate data: URIs for images – Może to skutkować mniejszą liczbą żądań HTTP. Ale nie po skonfigurowaniu CDN i serwowaniu przez niego obrazów. W przypadku użycia CDN trzeba by go wyłączyć. Korzystając z CDN, pliki są buforowane w kilku centrach danych na całym świecie.
- Wyłącz Inline and Defer CSS
- Exclude CSS from Autoptimize:
Użyj tego tylko wtedy, gdy zagregowałeś pliki CSS i doświadczasz problemów wizualnych w witrynie. Wtedy możesz wykluczyć konkretne pliki CSS z procesu łączenia.
Optymalizacja HTML
Aktywuj opcję „Optimize HTML code".
Podczas optymalizacji plików HTML spacje i komentarze są usuwane z kodu. To zmniejszy rozmiar pliku. A mniejsze pliki zwykle ładują się szybciej niż większe.
Przed optymalizacją HTML:
Po optymalizacji HTML
Ostatnia sekcja do edycji to MISC Options w Autoptimize.
Włącz pierwsze cztery opcje:
- Save aggregated script/CSS as static files.
- Minify excluded CSS and JS files.
- Enable 404 fallbacks.
- Also, optimize for logged-in editors/administrators.
Jeśli jesteś zalogowany i napotykasz problemy z kreatorem stron, takim jak Elementor lub inną wtyczką backendową, wyłącz ostatnią opcję.
Optymalizacja Google Fonts
Przejdźmy do zakładki „Extra".
Google Fonts mogą spowolnić czas ładowania, ponieważ są pobierane z zewnętrznych zasobów. Wolę opcję „combine and link in head", ponieważ poprawia czasy ładowania bez widoczności ładowania czcionki. Jeśli jesteś w Unii Europejskiej, sprawia to również, że Twoja witryna jest bardziej zgodna z RODO, ponieważ te zewnętrzne zasoby nie są już ładowane z google.
Ale powinieneś również przetestować ostatnią opcję Google Font, „combine and load fonts asynchronously with webfont.js", i sprawdzić, która daje lepsze wyniki w narzędziu szybkości strony.
Następnie włącz „remove Emojis", ponieważ javascript odpowiedzialny za Emoji jest rozdęty i niekorzystny dla dobrego czasu ładowania.
Optymalizacja obrazów
Autoptimize może również pomóc szybciej ładować obrazy, używając zintegrowanej usługi innej firmy o nazwie ShortPixel. Jeśli chcesz to wypróbować, przejdź do sekcji Images.
Wybierz „Optimize Images"; URL-e w Twojej witrynie zostaną zmienione, aby wskazywać na CDN ShortPixel.
Shortpixel zmniejsza/adaptuje 100 zdjęć miesięcznie za darmo, co może wystarczyć, jeśli masz małą lub średnią witrynę.
Image Optimization Quality – Możesz znaleźć odpowiednią równowagę między kompresją a jakością, klikając „You can test compression levels here."
Zostaniesz przekierowany do shortpixel.com, gdzie możesz wizualnie zobaczyć różnice w każdym poziomie kompresji ShortPixel, przesyłając jedno ze swoich zdjęć.
Który jest najlepszy dla Ciebie?
- Lossy: największa kompresja, największa utrata jakości.
- Glossy: średnia kompresja, niewielka utrata jakości.
- Lossless: niska kompresja, najmniejsza utrata jakości.
Wróć do Autoptimize i wprowadź swoje ustawienia!
- Load WebP or AVIF in supported browsers – włącz to, aby Autoptimize serwował obrazy w formacie WebP, co pozwala na jeszcze większą kompresję obrazów bez znacznego pogorszenia jakości.
- Lazy-Load images – musi być również włączona i skutkuje mniejszą liczbą żądań oraz jest zalecana przez Google dla szybszych czasów ładowania.
A co z Cloudflare?
Może zastanawiasz się, dlaczego nie wspominam o CDN lub usłudze DNS, takiej jak Cloudflare, jak zalecają inne tutoriale do dalszej optymalizacji?
Prosta odpowiedź jest taka, że zmiana usługi DNS nie jest wymagana dla większości witryn, ponieważ wiąże się z pewnymi potencjalnymi wadami.
Na przykład przejście na usługę CDN opartą na DNS, taką jak Cloudflare, oddaje kontrolę nad witryną i jej ruchem. Często natykam się na witryny działające pod usługą DNS Cloudflare, gdzie muszę wypełnić captcha, zanim w ogóle będę mógł uzyskać dostęp do witryny. Takie captcha mogą prowadzić do wysokiego współczynnika odrzuceń odwiedzającego i negatywnie wpłynąć na pozycje w wyszukiwarce. Usługa DNS mogłaby również przekierować część Twojego ruchu gdzie indziej, a Ty nawet byś tego od razu nie zauważył. Pamiętaj o tym, gdy chcesz dać zewnętrznej usłudze DNS kontrolę nad swoją domeną.
Po optymalizacjach, które zastosowaliśmy, Twoja witryna jest już tak szybka, że nie ograniczy rankingu Google, więc w tym artykule nie omówimy usługi Cloudflare.
Daj mi znać, jeśli widzisz to inaczej i masz inną opinię na temat korzystania z Cloudflare.
Powiązane artykuły
- Jak zoptymalizować bazę danych WordPress dla najlepszej wydajności?
- Samouczek phpMyAdmin do naprawy i optymalizacji tabel bazy danych
- Dlaczego WordPress jest wolny + Jak to naprawić
- Jak wyczyścić pamięć podręczną i pliki cookie przeglądarki?
