Jak naprawić buforowanie przeglądarki w WordPressie w 2021 roku?

Opublikowany: 2020-08-02

Jak naprawić pamięć podręczną przeglądarki w WordPress

Spis treści

Wstęp

Czy Twoja witryna ładuje się wolno? Szukasz skutecznego rozwiązania problemu z ostrzeżeniem o wykorzystaniu pamięci podręcznej przeglądarki w WordPressie ? Szybkość strony jest istotnym aspektem doświadczenia użytkownika. W tym poście podzielę się podstawowymi, zaawansowanymi punktami o tym, jak naprawić buforowanie przeglądarki w WordPress. Więc jeśli masz również do czynienia z tym problemem, musisz przeczytać cały post, aby lepiej zrozumieć.

Czas potrzebny na załadowanie żądanej strony w przeglądarce użytkownika ma duży wpływ na to, że użytkownik sam pozostaje na Twojej stronie, np. w celu sfinalizowania sprzedaży. Czas ładowania strony zależy od kilku czynników: jednym z nich jest pamięć podręczna przeglądarki.

Najpierw przyjrzymy się, czym jest buforowanie przeglądarki dźwigni i jak może przyspieszyć działanie Twojej witryny. Zobaczymy więc, jak ocenić, czy witryna WordPress wymaga buforowania przeglądarki. Na koniec przyjrzymy się kilku sposobom rozwiązania ostrzeżenia o wykorzystaniu pamięci podręcznej przeglądarki w WordPress, z użyciem wtyczki i bez niej.

Co to jest buforowanie przeglądarki wykorzystujące dźwignię?

leverage-browser-caching-wp

Pamięć podręczna to tymczasowe miejsce do przechowywania. Gdy odwiedzający zażąda strony w Twojej witrynie, serwer zbiera niezbędne informacje z bazy danych, organizuje je w dokument HTML i przekazuje do przeglądarki. Przeglądarka analizuje ten dokument i pobiera wszystkie odpowiednie zasoby, aby wyświetlić stronę.

Buforowanie to proces przechowywania części ładunku strony w pamięci podręcznej w celu przyspieszenia ładowania stron w przyszłości. Pamięć podręczna może znajdować się na serwerze lub urządzeniu odwiedzającego.

W pamięci podręcznej serwera możesz przechowywać zapytania do bazy danych i statyczną odpowiedź HTML dla żądanej strony.

Wykorzystanie pamięci podręcznej przeglądarki to proces tymczasowego wykorzystania pamięci na urządzeniu odwiedzającego w celu przechowywania zasobów, takich jak arkusze stylów, skrypty i obrazy przez określony czas.

Kolejne wizyty na stronie powodują, że przeglądarka wielokrotnie pobiera te same zasoby za każdym razem, gdy użytkownik żąda strony. Ponieważ te statyczne zasoby stanowią znaczną część ładunku witryny WordPress, buforowanie przeglądarki skraca czas ładowania strony.

Czy wymagane jest buforowanie przeglądarki?

Leverage-Browser-Caching-In-WordPress

Kontrola witryny dotycząca dystrybucji rozmiaru zasobów ładunku generalnie ujawnia, jak duże są zasoby i ile żądań musi wysłać przeglądarka, aby je pobrać przed wyświetleniem strony. Jeśli zauważysz, że znaczna część Twojej strony internetowej składa się z plików statycznych, powinieneś rozważyć buforowanie przeglądarki, aby przyspieszyć działanie strony.

Bardziej naturalnym sposobem określenia, czy buforowanie przeglądarki jest potrzebne, jest użycie narzędzia do testowania szybkości strony, takiego jak GTmetrix. Wystarczy wpisać adres URL swojej witryny, aby rozpocząć szczegółowy test. Wyniki testu pokażą Ci, jak przyspieszyć działanie Twojej witryny. Jak widać, powszechnym ostrzeżeniem w sekcji wyników jest wykorzystanie pamięci podręcznej przeglądarki.

Możesz też użyć Think with Google, narzędzia do testowania szybkości strony, aby ocenić swoją witrynę na urządzeniach mobilnych. Kluczową rekomendacją tego narzędzia jest skorzystanie z buforowania przeglądarki dla Twojej witryny.

PageSpeed ​​Insights, kolejne narzędzie Google do testowania szybkości strony internetowej, może sugerować stworzenie skutecznej polityki pamięci podręcznej w celu poprawy szybkości strony. Buforowanie przeglądarki jest ważną częścią skutecznej polityki pamięci podręcznej.

Rozwiąż ostrzeżenie o korzystaniu z pamięci podręcznej przeglądarki w WordPress bez wtyczek

How-To-Leverage-Browser-Cache-In-WordPress

Jeśli nie chcesz używać wtyczki, możesz zmienić ustawienia serwera WWW, aby naprawić buforowanie przeglądarki. W takim przypadku serwer internetowy poinstruuje przeglądarkę odwiedzającego, aby zapisywała określone zasoby w pamięci podręcznej przeglądarki. Przeglądarka będzie przechowywać te pliki lokalnie przez określony czas i będzie z nich korzystać podczas kolejnych wizyt na stronie.

Konfiguracja serwera WWW w celu instruowania przeglądarek odwiedzających, aby rozpocząć buforowanie, różni się w zależności od serwera. W tym poście pokażemy, jak włączyć buforowanie przeglądarki na dwóch najpopularniejszych serwerach internetowych: Apache i Nginx.

Możesz poprawić pamięć podręczną przeglądarki, wykonując następujące kroki:

  1. Dodawanie nagłówków Expires: Te nagłówki informują przeglądarkę, kiedy zażądać nowej wersji zasobu z serwera.
  2. Zmień nagłówki sprawdzania pamięci podręcznej: możesz użyć tych nagłówków, aby ustawić kryteria pamięci podręcznej.
  3. Ustawienie nagłówków tagów encji (ETags): możliwe jest określenie, czy zasób na serwerze zmienił się w porównaniu z plikiem lokalnym.

Popraw pamięć podręczną przeglądarki w Apache

1. Utwórz lub edytuj plik .htaccess

Na serwerze Apache możesz ustawić wszystkie niezbędne parametry w pliku .htaccess. Ten plik umożliwia ręczną konfigurację ustawień Apache. Jest to prosty plik tekstowy, który przechowuje parametry Apache i ustawia uprawnienia i konfiguracje dla katalogu, w którym się znajduje.

Przeczytaj więcej: Lista kontrolna SEO na stronie: 10 praktycznych wskazówek dotyczących optymalizacji, aby uzyskać lepszą pozycję

Jeśli umieścisz plik .htaccess w głównym katalogu Twojej witryny, jego reguły zostaną zastosowane do wszystkich stron Twojej witryny. Możesz także umieścić inny plik .htaccess w jednym z podkatalogów, aby ustawić określone uprawnienia tylko dla tej lokalizacji. Zauważ, że pliki .htaccess niższego poziomu zastępują ustawienia plików .htaccess w katalogach głównych.

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

Jeśli masz dostęp terminalowy do serwera, możesz zalogować się zdalnie, aby utworzyć plik .htaccess w odpowiedniej lokalizacji (w przypadku reguł buforowania przeglądarki na poziomie witryny powinien to być folder główny).

Alternatywnie, jeśli używasz menedżera plików cPanel, przejdź do wymaganej lokalizacji i utwórz plik .htaccess .

Jeśli masz już plik .htaccess , możesz po prostu dodać nowe reguły buforowania przeglądarki.

2. Dodaj nagłówki wygasa

Pierwszym ustawieniem w pliku .htaccess jest włączenie funkcji wygasania nagłówków. Dodaj następujący wiersz do pliku:

WygasaAktywny wł.

Następnie możesz ustawić okres dla różnych plików tekstowych, korzystając ze składni pokazanej poniżej:

ExpiresByType tekst / CSS „dostęp 1 miesiąc”

ExpiresByType tekst / HTML „dostęp 1 miesiąc”

Aby ustawić czas wygaśnięcia obrazów, użyj obrazu zamiast ukośnika i rozszerzenia obrazu.

ExpiresByType image / jpeg „dostęp 1 miesiąc”

ExpiresByType image / svg „dostęp 1 miesiąc”

Aby ustawić termin składania wniosków, użyj aplikacji i określ rozszerzenie pliku.

Aplikacja ExpiresByType / pdf „dostęp 1 miesiąc”

W przypadku wszystkich innych plików nieobjętych żadnym konkretnym ustawieniem użyj definicji ExpiresDefault:

ExpiresDefault „dostęp 1 miesiąc”.

3. Zdefiniuj politykę pamięci podręcznej

Następnie musisz zdefiniować kryteria pamięci podręcznej za pomocą ustawień Sprawdzanie pamięci podręcznej.

Istnieją trzy główne części zasad pamięci podręcznej:

  • jak zasób jest buforowany
  • lokalizacja buforowania
  • czas do wygaśnięcia zasobu

Publiczna pamięć podręczna wskazuje przeglądarce, że zasoby można przechowywać w dowolnym miejscu. Natomiast prywatna pamięć podręczna umożliwia przechowywanie tylko na urządzeniu klienckim.

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

Na przykład strona profilu zalogowanego użytkownika powinna być buforowana tylko na urządzeniu klienckim.

I odwrotnie, strona główna bloga może być również buforowana w sieci CDN. Możesz skonfigurować zasadę publicznej pamięci podręcznej, dodając następującą regułę:

<IfModule mod_headers.c>

Zestaw nagłówków kontroli publicznej pamięci podręcznej

</ IfModule>

Możesz także określić różne kryteria dla różnych typów plików, dodając następujące filtry do modułu nagłówka:

<ifModule mod_headers.c>

<plikiDopasuj „\. (ico | jpeg | jpg | png) $”>

Zestaw nagłówków kontroli publicznej pamięci podręcznej

</ FilesMatch>

<plikiDopasuj „\. (php) $”>

Prywatny zestaw nagłówków kontroli pamięci podręcznej

</ FilesMatch>

</ IfModule>

Powyższy kod określa, że ​​przeglądarka może przechowywać pliki obrazów w dowolnym miejscu, ale pliki PHP muszą być przechowywane na urządzeniu klienckim.

Możesz również dodać konfigurację Wygasa do każdej reguły dopasowania plików. Czas wygaśnięcia należy określić w sekundach. Ustawiając go na zero, przeglądarka musi żądać pliku za każdym razem, gdy strona jest ładowana:

Zestaw nagłówków Wygasa 0

4. Wyłącz tagi jednostek w Apache

Na koniec konieczne jest wyłączenie tagów jednostek za pomocą następującego kodu:

FileETag Brak

Wyłączenie ETag wymaga, aby przeglądarka opierała się na kryteriach pamięci podręcznej i unikała ponownego sprawdzania poprawności plików za każdym razem, gdy strona jest ładowana.

Zapisz plik .htaccess i uruchom ponownie Apache, aby zmiany zaczęły obowiązywać.

Rozwiąż buforowanie przeglądarki dźwigni w Nginx

W Nginx możesz znaleźć plik konfiguracyjny nginx.conf w lokalizacji / etc / nginx / site-enabled / default.

Możesz dodać nagłówek Expires do określonych typów plików, używając następującego kodu:

lokalizacja ~ * \. (ico | jpeg | jpg | png) $ {

wygasa 30d;

}

Możesz także dodać nagłówek Cache-Control do tego samego bloku kodu:

lokalizacja ~ * \. (ico | jpeg | jpg | png) $ {

wygasa 30d;

add_header Cache-Control „public”;

}

Zapisz plik konfiguracyjny i uruchom ponownie Nginx, aby zmiany zaczęły obowiązywać.

Rozwiąż pamięć podręczną przeglądarki dźwigni za pomocą wtyczki

leverage-browser-caching

Jeśli używasz wtyczki buforującej dla WordPress, może ona już obsługiwać buforowanie przeglądarki.

Zobaczmy teraz, jak rozwiązać problem z wykorzystaniem pamięci podręcznej przeglądarki za pomocą niektórych z najbardziej znanych wtyczek pamięci podręcznej.

1. Rakieta WP

WP Rocket to jedna z najszybszych i najbardziej polecanych wtyczek do WordPressa, która może zarządzać wszystkimi optymalizacjami prędkości za pomocą zaledwie kilku kliknięć. WP Rocket nie tylko pozwala rozwiązać problem z buforowaniem przeglądarki, ale także umożliwia optymalizację witryny przy użyciu różnych technik, takich jak:

  • kompresja plików statycznych (GZip) – w celu zmniejszenia całkowitego rozmiaru danych (przeczytaj cały post o tym, jak włączyć kompresję GZip w WordPressie)
  • włączyć pamięć podręczną plików (w tym wstępne ładowanie pamięci podręcznej) – aby zmniejszyć obciążenie serwera (i odzyskać wstępnie zeskanowaną kopię każdej strony)
  • Optymalizacja czcionek Google – aby zapewnić szybkie ładowanie większych czcionek,
  • Lazy loading – aby obrazy były ładowane tylko wtedy, gdy użytkownik przewinie w dół do sekcji strony, na której obraz jest wymagany
  • Minifikacja i łączenie – redukcja rozmiaru i kombinacji zasobów tekstowych w celu szybszego dostarczenia ich użytkownikowi końcowemu
  • Odkładaj ładowanie JS – aby strona pojawiła się szybko, zamiast czekać na pobranie wszystkich zasobów.
  • Zintegruj i włącz sieć CDN – aby cięższe obrazy były dostarczane szybciej
  • Wstępne pobieranie DNS – aby skrócić czas potrzebny na rozpoznanie pochodzenia treści stron trzecich

To wszystko może wydawać się niezrozumiałe dla każdego, kto nie jest bezpośrednio zaangażowany w optymalizację strony internetowej. Jednak w rzeczywistości są to wszystkie środki, które musisz podjąć, jeśli chcesz przyspieszyć działanie WordPressa.

Gorąco polecamy przeczytanie naszej recenzji WP Rocket,

2. Pamięć podręczna LiteSpeed

LiteSpeed ​​​​Cache to wtyczka do buforowania, która pozwala rozwiązać problem z buforowaniem przeglądarki poprzez samo włączenie tej funkcji. Zainstaluj i aktywuj wtyczkę i przejdź do ustawień pamięci podręcznej. Przejdź do karty Przeglądarka i zezwól na opcję pamięci podręcznej przeglądarki .

Możliwe jest również ustawienie czasu wygaśnięcia. Pamiętaj jednak, że to ustawienie dotyczy wszystkich plików z pamięci podręcznej w witrynie.

3. Najszybsza pamięć podręczna WP

WP Fastest Cache to kolejna wtyczka pamięci podręcznej WordPress z prostymi opcjami dostosowywania. Darmowa wersja umożliwia włączenie buforowania przeglądarki. Przejdź do strony ustawień i zaznacz pole wyboru buforowania przeglądarki.

4. Całkowita pamięć podręczna W3

W3 Total Cache to kolejna szeroko stosowana wtyczka pamięci podręcznej przeglądarki. Pozwala dostosować szeroką gamę opcji buforowania. Po zainstalowaniu przejdź do sekcji Przeglądarka pamięci podręcznej na stronie ustawień.

Ta wtyczka umożliwia ustawienie uprawnień dla wielu kategorii plików, takich jak obrazy, skrypty i arkusze stylów. Dla każdej grupy można ustawić nagłówki Expires, okresy ważności Expires i ETags.

Często Zadawane Pytania

Co to jest buforowanie w przeglądarce?

Gdy odwiedzający zażąda strony w Twojej witrynie, serwer zbiera niezbędne informacje z bazy danych, organizuje je w dokument HTML i przekazuje do przeglądarki. Dzięki temu, gdy później odwiedzisz witrynę, witryna załaduje się natychmiast. Informacje o witrynie są przechowywane na dysku twardym, tj. w pamięci podręcznej

Co to jest buforowanie przeglądarki wykorzystujące dźwignię?

Wykorzystanie pamięci podręcznej przeglądarki to proces tymczasowego wykorzystania pamięci na urządzeniu odwiedzającego w celu przechowywania zasobów, takich jak arkusze stylów, skrypty i obrazy przez określony czas.

Czy wymagane jest buforowanie przeglądarki?

Ponieważ znaczna część Twojej strony internetowej składa się z plików statycznych, powinieneś rozważyć buforowanie przeglądarki, aby poprawić szybkość strony.

Jak rozwiązać problemy z buforowaniem przeglądarki?

Korzystanie z .htaccess
1. Przejdź do pliku .htaccess
2. Dodaj następujący kod na końcu pliku
WygasaAktywny wł.
ExpiresByType tekst / CSS „dostęp 1 miesiąc”
ExpiresByType tekst / HTML „dostęp 1 miesiąc”
ExpiresDefault „dostęp 1 miesiąc”.
4. Zapisz plik .htaccess i odśwież stronę

Wniosek

W tym poście zbadaliśmy znaczenie szybkości strony i dlaczego należy naprawić buforowanie przeglądarki w WordPressie. Widzieliśmy narzędzia do testowania prędkości, które wskazują, czy Twoja witryna WordPress wymaga buforowania przeglądarki. Następnie omówiliśmy, jak skonfigurować różne serwery internetowe, aby umożliwić buforowanie przeglądarki bez użycia wtyczki. Na koniec przyjrzeliśmy się trzem popularnym wtyczkom, które pozwalają naprawić buforowanie przeglądarki w WordPressie.