Jak wykorzystać buforowanie przeglądarki w WordPress?

W tym samouczku dowiemy się, jak wykorzystać buforowanie przeglądarki w WordPressie, aby przyspieszyć działanie witryny.

Ogólnie rzecz biorąc, istnieje wiele sposobów na przyspieszenie witryn WordPress, jednak podczas analizy optymalizacji szybkości witryny najczęściej wykrywanym problemem jest buforowanie przeglądarki.

Możesz korzystać z różnych narzędzi internetowych, w tym Google PageSpeed ​​Insights, GTMetrix i Pingdom, aby śledzić i testować szybkość swojej witryny. Dają precyzyjne wyniki i pokazują, gdzie Twoja strona internetowa powinna działać. Podczas oceny szybkości witryny mogłeś zobaczyć ostrzeżenie „Wykorzystaj pamięć podręczną przeglądarki”.

Możesz także przeczytać: Obsługuj statyczne zasoby z wydajną polityką pamięci podręcznej

Co to jest buforowanie przeglądarki z wykorzystaniem dźwigni?

Buforowanie to czas, przez jaki przeglądarki przechowują buforowane zasoby witryny w swoich systemach lokalnych.

Wśród nich są obrazy, JavaScript, CSS i inne zasoby. Materiały, które można przechowywać w pamięci podręcznej, które są zapisywane na twoim komputerze, są ładowane z powrotem za każdym razem, gdy ktoś widzi witrynę. Tym samym zauważalny jest wzrost szybkości ładowania strony. Z tego powodu ludzie chcą korzystać z pamięci podręcznej przeglądarki w WordPressie.

Jak działa buforowanie przeglądarki w WordPress?

Za każdym razem, gdy użytkownik wchodzi do określonej domeny, w tle działa wiele procesów.

Twoja witryna WordPress jest widoczna przez wszystko, co jest przekazywane przeglądarce użytkownika. Te elementy witryny obejmują skrypty, grafikę, arkusze stylów, treść i inne. W razie potrzeby należy je przenieść z serwera witryny do przeglądarki użytkownika. Oto kroki w tym procesie:

1. Adres URL jest wprowadzany do przeglądarki odwiedzającego.
2. Przeglądarka wysyła żądanie do serwera, na którym znajduje się Twoja witryna (żądanie HTTP).
3. Użytkownik otrzymuje dane po ich skompletowaniu przez serwer. W tym momencie użytkownicy zaczynają odczuwać spowolnienie. Ludzie mogą zminimalizować rozmiar wycinków, zoptymalizować rozmiary obrazów i zastosować inne środki, aby zatrzymać to spowolnienie.
4. Przeglądarka może teraz wreszcie wyświetlić stronę internetową po przesłaniu danych. Gdy użytkownicy uzyskują dostęp do różnych stron, procedura jest powtarzana. Niska wydajność może wynikać z tego, że serwer otrzymuje jednocześnie dużą liczbę żądań. Dlatego ludzie muszą optymalizować swoje strony internetowe, aby utrzymać ich szybkość.

Zarówno przeglądarki internetowe, jak i programy wykorzystują zawartość pamięci podręcznej. Jest on chwilowo zapisywany na dysku lokalnym. Termin „Pamięć podręczna sieci Web” lub „Pamięć podręczna HTTP” odnosi się do tych danych. Przeglądarka będzie przesyłać dane z Twojego komputera i pobierać zawartość witryny za każdym razem, gdy odwiedzasz tę samą witrynę.

Musisz użyć konkretnego narzędzia, aby określić, czy Twoja witryna WordPress skutecznie wykorzystuje buforowanie przeglądarki.

Różnica między buforowaniem przeglądarki a buforowaniem serwera

Aby zmniejszyć obciążenie i opóźnienia na serwerach internetowych, buforowanie stron internetowych po stronie serwera (do buforowania po stronie serwera zawsze zalecamy LiteSpeed ​​Cache dla WordPressa) często wiąże się z użyciem serwera proxy, który przechowuje odpowiedzi sieciowe z serwerów internetowych, przed którymi stoi. Buforowanie sieci Web po stronie klienta może również obejmować buforowanie oparte na przeglądarce, które zapisuje zbuforowaną kopię poprzednio otwieranej zawartości sieci Web.

Ta procedura wiąże się z wykorzystaniem serwera WWW do tworzenia buforowanych stron internetowych dla Twojej witryny. Wyżej wymienione działania są przykładem buforowania stron internetowych, czyli przede wszystkim po stronie serwera.

Możesz ulepszyć system buforowania serwera na kilka różnych sposobów. Najlepszym wyborem byłaby aktualizacja nagłówków Apache. Kolejnym etapem byłoby użycie wtyczek WordPress, a następnie dodanie CDN.

Metoda 1: Ręcznie wykorzystuj buforowanie przeglądarki w WordPress

Uwaga: ta metoda działa tylko z LiteSpeed ​​Enterprise lub Apache.

Dołączając trochę kodu do pliku .htaccess, możesz ręcznie wykorzystać buforowanie przeglądarki w WordPressie. Aby uzyskać trzy różne cele, musisz dodać trzy bity kodu:

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

Musisz mieć dostęp do plików swojej witryny, aby dodać ten kod, co możesz zrobić, logując się na swoje konto hostingowe lub CyberPanel.

Przejdź do pulpitu CyberPanel

Kliknij WordPress -> Lista WordPress z menu po lewej stronie

Wejdziesz na listę stron internetowych WordPress . Stąd kliknij tytuł swojej witryny WordPress

To jest Twój CyberPanel WordPress Manager . Kliknij Menedżer plików.

W public_html znajdziesz . plik htaccess . Pamiętaj, że reguły htaccess są obsługiwane tylko przez LiteSpeed ​​Enterprise. Nie jest obsługiwany przez OpenLite Speed. Kliknij prawym przyciskiem myszy i kliknij CodeMirror

Dodaj następujący kod na końcu . zawartość pliku htaccess poprzez jego skopiowanie i wklejenie. Nie modyfikuj pliku w żaden inny sposób.

 #Customize expires cache start - adjust the period according to your needs <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 ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

Wspomniany kod instruuje przeglądarkę, aby dostarczyła zbuforowaną kopię zasobów statycznych, zamiast pobierać nową.

Czasy odświeżania/wygaśnięcia są również uwzględnione w ustawieniach:

HTML zajmuje 600 sekund.
JavaScript i CSS przez miesiąc
W przypadku obrazów rok

Odwiedzający nie będą musieli zbyt często pobierać określonych zasobów dzięki terminom ich ważności. W razie potrzeby możesz szybko zmienić czas wygaśnięcia.

Aby ustalić zasady buforowania przeglądarki dotyczące sposobu buforowania zasobu, miejsca jego buforowania i maksymalnego wieku przed wygaśnięciem, musimy uwzględnić nagłówki kontroli pamięci podręcznej. Nie musimy powtarzać czasów wygaśnięcia, o czym już wspomnieliśmy wcześniej.

następujący kod, a następnie wklej go:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

E-tagi zostaną wyłączone, aby przeglądarki musiały używać nagłówków wygasających i kontroli pamięci podręcznej zamiast weryfikacji plików. Oto klucz:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Po zakończeniu kliknij Zapisz .

Metoda 2: Wykorzystaj buforowanie przeglądarki w WordPress za pomocą wtyczek

Pojedynczy błąd może całkowicie zrujnować Twoją witrynę, dlatego edycja pliku.htaccess może być dość niebezpieczna. Dlatego możesz używać wtyczek takich jak W3 Total Cache, jeśli nie chcesz podejmować niepotrzebnego ryzyka.

Wtyczka W3 Total Cache

Oto jak używać W3 Total Cache, jednej z najlepszych wtyczek do tego celu, aby wykorzystać buforowanie przeglądarki.

Wprowadź swój pulpit nawigacyjny WordPress

Kliknij Wtyczki -> Dodaj nowy z menu po lewej stronie

Wyszukaj W3 Total cache . Teraz zainstaluj i aktywuj tę wtyczkę

Po lewej stronie pojawi się zakładka Wydajność . Kliknij Wydajność -> Ustawienia ogólne z menu po lewej stronie

Przewiń w dół do pamięci podręcznej przeglądarki i upewnij się, że jest włączona i zapisz zmiany

Teraz kliknij Wydajność -> Pamięć podręczna przeglądarki z menu po lewej stronie

Upewnić się, że

1. Ustaw nagłówek wygaśnięcia
2. Ustaw kontrolę pamięci podręcznej
3. Ustaw tag jednostki

są włączone. Zapisz wszystkie zmiany.

Wtyczka pamięci podręcznej LiteSpeed

CyberPanel domyślnie zapewnia każdemu użytkownikowi LiteSpeed ​​Cache przy każdym wdrożeniu witryny WordPress. Jeśli nie korzystasz z CyberPanel, możesz go pobrać stąd.

Wystarczy włączyć tę funkcję, a wtyczka pamięci podręcznej LiteSpeed ​​Cache umożliwia wykorzystanie pamięci podręcznej przeglądarki.

Wejdź do swojego pulpitu nawigacyjnego WordPress

Kliknij LiteSpeed ​​Cache -> Cache z menu po lewej stronie

Kliknij kartę Przeglądarka z górnego paska

Upewnij się, że pamięć podręczna przeglądarki jest włączona i kliknij Zapisz zmiany

Wniosek

Pamiętaj, że czasami po zainstalowaniu wtyczki nie zauważysz od razu wprowadzanych zmian. Za to opóźnienie odpowiedzialny jest plik CSS/Arkusz stylów. Nie będziesz w stanie wyświetlić wprowadzonych zmian ze względu na pamięć podręczną przeglądarki, która została już zapisana na komputerze. Zaleca się korzystanie z funkcji incognito przeglądarki w celu przeglądania strony internetowej, aby po wielokrotnych modyfikacjach widzieć ją poprawnie. Jeśli użyjesz tej funkcji, nie zużyjesz zasobów pamięci podręcznej i powinieneś być w stanie wyraźnie zauważyć zmiany.

Podejście, które wybierzesz, aby wykorzystać buforowanie przeglądarki, jest ostatecznie nieistotne. Liczy się tylko obserwacja go w akcji. Metoda, której użyłeś, aby się tam dostać, jest nieistotna, o ile wykorzystanie buforowania przeglądarki w WordPress działa zgodnie z przeznaczeniem. Nie ma dobrego ani złego podejścia; wynik będzie taki sam niezależnie od Twojego wyboru. Wykorzystanie buforowania przeglądarki skróci czas ładowania, niezależnie od tego, czy zdecydujesz się wprowadzić zmiany w pliku .htaccess, czy zastosować wtyczkę.