Jak wykorzystać buforowanie przeglądarki w WordPress (z wideo)

Ostatnia aktualizacja - 8 lipca 2021

Jeśli jesteś właścicielem lub prowadzisz witrynę WordPress, będziesz chciał stale ulepszać jej wygląd i działanie. Jednak im więcej wtyczek, programów do tworzenia stron i elementów treści używasz, tym wolniej działa Twoja witryna.

A wolno ładująca się strona internetowa jest dużym zniechęceniem dla odwiedzających, niezależnie od tego, jak dobrze wygląda Twoja witryna lub jak ważna jest jej praca.

Dlatego zarządzanie witryną WordPress wymaga korzystania z każdej miary wydajności witryny, którą możesz znaleźć. Ważnym środkiem, który warto podjąć, jest wykorzystanie pamięci podręcznej przeglądarki.

W tym artykule dowiesz się, co to oznacza i jak wykorzystać buforowanie przeglądarki w WordPressie.

Co to jest buforowanie przeglądarki?

Za każdym razem, gdy użytkownik uzyskuje dostęp do Twojej witryny, zasoby, takie jak obrazy, JavaScript, CSS i inne, muszą zostać przesłane na jego komputer z serwera. Oznacza to, że użytkownik musi wielokrotnie ładować te same zasoby między kolejnymi stronami i wizytami w witrynie.

Wprowadź: buforowanie.

Buforowanie wskazuje okres czasu, przez który przeglądarki przechowują lokalnie buforowane zasoby dostępne w witrynie. Gdy użytkownik zażąda strony internetowej, informacje są natychmiast pobierane z jego komputera.

W ten sposób możesz wykorzystać pamięć podręczną przeglądarki w WordPress, aby zapewnić szybszą wydajność witryny.

Możesz użyć narzędzi takich jak Google PageSpeed ​​Insights i GTmetrix , aby sprawdzić, czy Twoja witryna korzysta już z pamięci podręcznej przeglądarki.

Po prostu wklej adres URL swojej witryny w odpowiednim polu i kliknij „Analizuj”. Narzędzie zapewni Twojej witrynie wynik od 0 do 100 w przypadku PageSpeed ​​i ocenę alfabetyczną w przypadku GTmetrix.

Narzędzie dostarczy Ci również sugestii dotyczących poprawy wydajności Twojej witryny. Częstą sugestią jest skorzystanie z pamięci podręcznej przeglądarki w WordPress. Jeśli otrzymasz tę sugestię, możesz to zrobić na dwa sposoby.

Ręcznie wykorzystuj buforowanie przeglądarki w WordPress

Możesz ręcznie wykorzystać pamięć podręczną przeglądarki w WordPressie, dodając trochę kodu do pliku .htaccess. W rzeczywistości musisz dodać trzy fragmenty kodu w trzech różnych celach:

1. Dodaj nagłówki wygasa
2. Dodaj nagłówki kontroli pamięci podręcznej
3. Wyłącz tagi ETag

Aby dodać ten kod, musisz uzyskać dostęp do plików swojej witryny, co możesz zrobić, logując się na swoje konto hostingowe lub cPanel. Musisz przejść do menedżera plików i opcji „Włącz ukryte pliki” w ustawieniach witryny.

Następnie znajdziesz plik .htaccess w folderze public_html. Kliknij plik prawym przyciskiem myszy i edytuj go, aby dodać kod podany poniżej.

1. Dodaj kod pamięci podręcznej przeglądarki

Skopiuj poniższy kod i wklej go na końcu zawartości pliku .htaccess. Nie wprowadzaj żadnych innych zmian w pliku.

 #Dostosuj wygasanie startu pamięci podręcznej - dostosuj okres do swoich potrzeb
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
WygasaAktywny wł.
ExpiresByType text/html „dostęp 600 sekund”
ExpiresByType application/xhtml+xml "dostęp przez 600 sekund"
ExpiresByType text/css „dostęp 1 miesiąc”
ExpiresByType text/javascript „dostęp 1 miesiąc”
ExpiresByType text/x-javascript „dostęp 1 miesiąc”
ExpiresByType aplikacja/javascript „dostęp 1 miesiąc”
ExpiresByType application/x-javascript "dostęp 1 miesiąc"
Aplikacja ExpiresByType/x-shockwave-flash „dostęp 1 miesiąc”
ExpiresByType application/pdf "dostęp 1 miesiąc"
ExpiresByType obraz/x-icon „dostęp 1 rok”
ExpiresByType image/jpg „dostęp 1 rok”
ExpiresByType image/jpeg „dostęp 1 rok”
ExpiresByType image/png „dostęp 1 rok”
ExpiresByType image/gif „dostęp 1 rok”
ExpiresDefault „dostęp 1 miesiąc”

</IfModule>
#Wygasa koniec pamięci podręcznej

Powyższy kod mówi przeglądarce, aby wyświetlała wersję strony z pamięci podręcznej zamiast pobierać nową wersję.

Ustawienia obejmują również następujące czasy odświeżania/wygaśnięcia:

• 600 sekund na HTML
• Miesięczny CSS i JavaScript
• Jeden rok na obrazy

Dzięki tym okresom wygaśnięcia odwiedzający nie muszą zbyt często pobierać niektórych zasobów. W razie potrzeby możesz jednak łatwo edytować czasy wygaśnięcia.

2. Dodaj nagłówki kontroli pamięci podręcznej (Apache)

Musimy dodać nagłówki Cache Control, aby określić zasady buforowania przeglądarki dotyczące sposobu buforowania zasobu, miejsca jego buforowania i maksymalnego wieku przed wygaśnięciem. Jednak powyżej określiliśmy już czasy wygaśnięcia, więc nie musimy ich tutaj powtarzać.

Skopiuj i wklej następujący kod:

 # POCZĄTEK nagłówków kontroli pamięci podręcznej

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Dołączanie nagłówka Cache-Control „public”
</filesMatch>
<filesMatch "\.(css)$">
Dołączanie nagłówka Cache-Control „public”
</filesMatch>
<filesMatch "\.(js)$">
Dołączanie nagłówka Cache-Control „prywatne”
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Dołączanie nagłówka Cache-Control „prywatne, należy ponownie zweryfikować”
</filesMatch>
</IfModule>
</IfModule>

3. Wyłącz etagi

Wyłączymy tagi elektroniczne, aby zmusić przeglądarki do polegania na kontroli pamięci podręcznej i wygasania nagłówków zamiast sprawdzania poprawności plików. Oto kod:

 <IfModule mod_headers.c>
Nagłówek nieskonfigurowany ETag
</IfModule>
FileETag Brak

Buforowanie przeglądarki dla serwera NGINX

Nie będziesz w stanie zlokalizować pliku .htaccess, jeśli Twoja witryna korzysta z NGINX. W takim przypadku przejdź do /etc/nginx/sites-enabled/default i wklej poniższy kod:

 serwer {
posłuchaj 80;
nazwa_serwera host lokalny;
Lokalizacja / {
root /usr/share/nginx/html;
indeks index.html index.htm;
}
lokalizacja ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
wygasa 365d;
}
lokalizacja ~* \.(pdf)$ {
wygasa 30d;
}
}
Dodaj nagłówki kontroli pamięci podręcznej (NGINX)
lokalizacja ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
wygasa 90d;
add_header Cache-Control "publiczny, bez transformacji";
}

Po edycji NGINX zapisz plik, aby wykorzystać buforowanie przeglądarki na serwerze NGINX.

Wykorzystaj buforowanie przeglądarki w WordPressie za pomocą wtyczek

Edycja pliku .htaccess może być rzeczywiście dość ryzykowna, ponieważ pojedynczy błąd może zepsuć całą witrynę. Więc jeśli nie chcesz niepotrzebnego ryzyka, możesz użyć wtyczek takich jak W3 Total Cache i WP Fastest Cache .

Oto, jak możesz wykorzystać buforowanie przeglądarki za pomocą wtyczki W3 Total Cache, jednej z najlepszych do tego zadania.

Po zainstalowaniu wtyczki przejdź do jej strony ustawień. Tutaj upewnij się, że pamięć podręczna przeglądarki jest włączona. Następnie przejdź do ustawień pamięci podręcznej przeglądarki z paska bocznego. I upewnij się, że nagłówek wygasania, nagłówek kontroli pamięci podręcznej i ustawienia opcji e-tagów są włączone.

Zapisz ustawienia, jeśli dokonałeś jakichkolwiek zmian.

Dzięki temu z powodzeniem wykorzystujesz buforowanie przeglądarki w swojej witrynie WordPress. Możesz upewnić się, że jest włączony, ponownie używając narzędzia Insights lub GTmetrix.

Jeśli wolisz wersję wideo, obejrzyj poniższy film:

Dalsza lektura:

• Najlepsze bezpłatne wtyczki do optymalizacji baz danych WordPress w 2021 r.
• Jak włączyć kompresję GZIP w witrynie WordPress?