Buforowanie przeglądarki WordPress

Opublikowany: 2015-05-18

Przyspiesz swoją witrynę WordPress drastycznie, korzystając z pamięci podręcznej przeglądarki, znanej również jako pamięć podręczna wygasania .

Wielu dostawców optymalizacji szybkości i testów będzie określać to jako „ Pamięć podręczna przeglądarki ”, „ Wykorzystanie buforowania przeglądarki ”, „ Nagłówki wygasania ”, „ Nagłówki pamięci podręcznej ”, „ Kontrola pamięci podręcznej ” i „ Pamięć podręczna sieci ”. Jak wskazuje Google PageSpeed ​​Insights, GTMetrix i MaxCDN postępują zgodnie z tym przewodnikiem, aby poprawnie skonfigurować.

Co to jest buforowanie przeglądarki?

Buforowanie przeglądarki to metoda serwera WWW, która mówi przeglądarce, aby przechowywała stronę lub określone zasoby przez określony czas, aby nie trzeba było ich pobierać z serwera za każdym razem, gdy strony są ładowane. Może to buforować całą stronę i/lub zasoby, takie jak JavaScript, CSS, obrazy (jpeg, png, gif itp.) i wiele innych.

Twoja witryna WordPress za pierwszym razem ładuje się normalnie dla każdego użytkownika, ale potem będzie zauważalnie szybsza, gdy przeglądają strony i wykonują czynności. Zasoby są przechowywane w przeglądarce, w wyniku czego są ładowane lokalnie zamiast pobierać je ponownie.

Znaczenie buforowania przeglądarki

Ostatecznie celem i znaczeniem buforowania przeglądarki jest przyspieszenie witryny WordPress dla użytkowników, aby mieli przyjemniejsze wrażenia. Może to prowadzić do zwiększonego ruchu, lepszych rankingów wyszukiwania, a nawet lepszych współczynników konwersji tego, co próbujesz osiągnąć.

Dodatkowym efektem dodatkowym jest to, że obciążenie serwera WWW jest odciążane, ponieważ nie pobiera zasobów przy każdym ładowaniu strony dla tego samego użytkownika, a także oszczędza przepustowość na serwerze WWW.

Pamięć podręczna sieci zapewnia wzajemną prędkość serwera i użytkownika

Implementacja pamięci podręcznej przeglądarki

Konfiguracja pamięci podręcznej przeglądarki w witrynie WordPress jest w rzeczywistości bardzo szybka i łatwa, ale konfiguracja może się różnić w zależności od konfiguracji i serwera internetowego, z którego korzystasz. Domyślnie najpopularniejszą konfiguracją jest WordPress działający na serwerze Apache, ale dostępne są inne popularne serwery internetowe, takie jak Nginx, IIS itp.

Korzystanie z wtyczki WordPress Leverage Browser Caching Plugin upraszcza implementację.

Aby było to jeszcze łatwiejsze, dostępnych jest kilka wtyczek WordPress wykorzystujących pamięć podręczną przeglądarki. Wykorzystaliśmy, przetestowaliśmy i polecamy wtyczkę WordPress Leverage Browser Caching Ninjas. Jest to wtyczka instalacyjna i aktywująca, która zajmuje się resztą, po prostu.

Pamięć podręczna przeglądarki Apache

Apache używa pliku .htaccess do buforowania przeglądarki. W katalogu głównym instalacji WordPressa powinien znajdować się plik .htaccess , a jeśli go nie ma, możesz go utworzyć i umieścić w nim następujące wiersze kodu, na samej górze:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Pamięć podręczna przeglądarki Nginx

Jeśli używasz serwera Nginx (En-gine-ex), konfiguracja jest inna niż w Apache powyżej. Będziesz chciał dodać następujący kod do pliku konfiguracyjnego vhosta, zwykle znajdującego się w /etc/nginx/sites-enabled/default . Dodaj następujące elementy do swojego bloku serwera:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

Moduł mod_expire jest używany przez Lighttpd do kontrolowania nagłówków, które zapewniają buforowanie treści przez przeglądarkę. Może to odpowiednio przejść do konfiguracji rdzenia Lighttpd.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Pamięć podręczna przeglądarki wykorzystująca Microsoft IIS

Konfiguracja buforowania przeglądarki dla usług IIS (Internet Information Services) jest bardzo łatwa.

Wybierz go w interfejsie Administration Tools i wyświetl jego właściwości. Po wybraniu zakładki HTTP Headers powinieneś zobaczyć dwa interesujące obszary; Enable Content Expiration i Custom HTTP headers . Pierwsza powinna być oczywista, a druga może służyć do zastosowania nagłówków Cache-Control.

Techniczność buforowania przeglądarki

Wykorzystanie pamięci podręcznej przeglądarki jest osiągane przez serwer sieciowy, wysyłając nagłówki HTTP do przeglądarki przed wysłaniem kodu HTML. Informują one przeglądarkę o pewnych rzeczach dotyczących zawartości HTML, która ma nastąpić, takich jak typ zawartości, aktualna data, szczegóły serwera, kontrola pamięci podręcznej i wygaśnięcie itp.

Nagłówki Cache-Control , Expires i Etag to te, które przekazują instrukcje dotyczące pamięci podręcznej przeglądarki. Te nagłówki są tworzone automatycznie za pomocą metod wspomnianych powyżej, aby odpowiednio wykorzystać buforowanie przeglądarki w Apache, Nginx i IIS, więc nie musisz wchodzić w szczegóły, chyba że jesteś zainteresowany.

Nagłówek kontroli pamięci podręcznej

Cache-Control daje przeglądarce pewne instrukcje, takie jak czas, w którym zawartość jest uważana za „świeżą”, publiczny/prywatny stan buforowania, sprawdzanie poprawności i inne.

Kontrola pamięci podręcznej: max-age=3600, public

(https://gist.github.com/tribulant/6309926734d3c127064c)

Nagłówek wygasa

Nagłówek Expires zawiera datę HTTP tylko do momentu, kiedy zasób powinien i może być buforowany do.

Wygasa: sob, 28 listopada 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Etag nagłówek

Etag został wprowadzony w HTTP 1.1 jako metoda walidacji z tokenem wysyłanym przez serwer i używanym przez przeglądarkę do sprawdzenia, czy zmieniła się reprezentacja treści. Aż do Etag przeglądarki używały głównie nagłówka Last-Modified , ale Etag jest teraz bardziej odpowiedni. Większość serwerów internetowych i tak wygeneruje zarówno nagłówki Last-Modified , jak i Etag .

Etag: “pub1259380237;gz”

(https://gist.github.com/tribulant/2b542d76410bc047be00)

Podsumowanie buforowania przeglądarki

Buforowanie przeglądarki jest korzystne zarówno dla Ciebie (serwera internetowego), jak i dla użytkowników, zapewniając szybkość i wydajność obu stronom.

Dzięki buforowaniu przeglądarki, bądź silny i agresywny, Twój serwer sieciowy jest wystarczająco sprytny, aby wiedzieć, kiedy zmieniły się zasoby, aby wygenerować zaktualizowane nagłówki, aby użytkownicy mogli w razie potrzeby uzyskać nową zawartość. Nie panikuj, że Twoi użytkownicy utkną na starych treściach, tak nie jest.

Buforowanie przeglądarki internetowej jest wysoce zalecane w przypadku witryn WordPress i ostatecznie zalecana wtyczka WordPress Leverage Browser Caching Ninjas załatwi sprawę. Po prostu zainstaluj, aktywuj i gotowe!