Jak obsługiwać zasoby statyczne dzięki wydajnej polityce pamięci podręcznej

Witryny takie jak GTMetrix i Google PageSpeed ​​Insights dostarczają wskazówek, jak poprawić wydajność witryny. Jeśli to czytasz, przynajmniej wiesz, że każda witryna ma możliwości poprawy wydajności, albo poprzez ręczną optymalizację, albo za pomocą wtyczek, takich jak 10Web Booster.

W obu narzędziach możesz zobaczyć sugestię udostępnianiazasobów statycznych z wydajną zasadą pamięci podręcznej .Ta sugestia polega na przechowywaniu plików lokalnie, aby wielokrotne wizyty w witrynie były szybsze. Kroki mające na celu poprawę tej rekomendacji nie poprawiają pierwszej wizyty w witrynie (są na to inne ulepszenia). Mimo to wszystkie kolejne wizyty będą korzystały z wykorzystania pamięci podręcznej przeglądarki.

Należy zauważyć, że sugestia obsługi zasobów statycznych z wydajną polityką pamięci podręcznej była również określana jako wykorzystanie pamięci podręcznej przeglądarki lub pamięci podręcznej przeglądarki w WordPress.

W tym artykule wyjaśniono, jak udostępniać zasoby statyczne za pomocą skutecznych zasad dotyczących pamięci podręcznej i jak wydajna polityka dotycząca pamięci podręcznej może poprawić wydajność Twojej witryny.

Podczas korzystania z GTMetrix sugestia będzie wyglądać jak poniższy przykład na stronie wyników. Podkreśli potencjalne oszczędności wynikające z wdrożenia buforowania przeglądarki.

W Google PageSpeed ​​Insights sugestia wygląda podobnie i podaje podobne informacje.

Sugestie są podobne, ponieważ GTMetrix i PageSpeed ​​Insights używają narzędzia Lighthouse do analizy swojej strony internetowej. Lighthouse to narzędzie typu open source, którego celem jest poprawa wydajności witryny i może działać w wielu różnych formatach.

Poświęćmy chwilę na szybkie odświeżenie, aby przypomnieć sobie, w jaki sposób wydajność witryny internetowej jest mierzona za pomocą zbioru wskaźników, z których najważniejszym są Core Web Vitals.

Oto podsumowanie:

• Largest Contentful Paint ( LCP ) — Miara czasu potrzebnego do załadowania największego obiektu w widocznym obszarze strony.
• First Input Delay ( FID ) – Mierzy responsywność strony internetowej. Mierzy czas między kliknięciem lub interakcją użytkownika z witryną a odpowiedzią witryny.
• Skumulowane przesunięcie układu ( CLS ) — mierzy, o ile nieoczekiwanie przesunie się układ strony.

Jednym ze sposobów pozytywnego wpływu zarówno na LCP, jak i FID jest obsługa zasobów statycznych z wydajną polityką pamięci podręcznej, co oznacza poinformowanie przeglądarki, że może lokalnie przechowywać zasób przez określony czas.

Wydajna polityka pamięci podręcznej oznacza szybsze ładowanie, ponieważ bez względu na szybkość Internetu ładowanie z lokalnej pamięci podręcznej będzie szybsze i oszczędzi czas.

Jest kilka elementów, więc omówmy je bardziej szczegółowo.

Jak obsługiwać zasoby statyczne dzięki wydajnej polityce pamięci podręcznej

Aby zrozumieć, jak obsługiwać zasoby statyczne z wydajną polityką pamięci podręcznej, musimy najpierw zrozumieć różne aspekty, takie jak zasoby statyczne, buforowanie i zasady buforowania. Podzielmy je tutaj.

Co to są zasoby statyczne?

Zasoby statyczne to pliki. Gdy w tym artykule mówimy o zasobach statycznych, mamy na myśli pojedyncze pliki, które nie powinny być zmieniane ani szybko, ani często.

Pliki takie jak obrazy, javascript, pliki CSS i czcionki to pliki, które można uznać za zasoby statyczne. Jeśli chodzi o WordPress, te pliki CSS, javascript oraz pliki obrazów i czcionek byłyby zwykle częścią motywu, wtyczki lub treści użytkownika.

Pliki i strony generowane dynamicznie nie są uważane za zasoby statyczne. Przykładem tego w WordPressie mogą być strony statyczne generowane przez wtyczki buforujące. Zostało to omówione w następnej sekcji.

Co to jest buforowanie?

Buforowanie to proces przechowywania odpowiedzi w pamięci podręcznej, dzięki czemu następnym razem, gdy zostanie zadane to samo pytanie, odpowiedź może zostać zwrócona szybciej.

Powiązane artykuły

Jak bezpiecznie i skutecznie wyczyścić pamięć podręczną WordPress?

Znajdź najlepszą wtyczkę buforującą WordPress dzięki naszym 5 najlepszym typom

Jeśli wcześniej pracowałeś z wtyczkami buforującymi WordPress, być może znasz buforowanie całej strony. Buforowanie stron różni się od buforowania zasobów statycznych.

Buforowanie strony a buforowanie zasobów statycznych

W tym artykule omówiono konkretnie buforowanie zasobów statycznych (plików). Nie należy tego mylić z buforowaniem całej strony, które przechowuje wygenerowane strony do późniejszego wykorzystania.

Zarówno buforowanie stron, jak i buforowanie plików pomagają poprawić wydajność witryny. Omawiając buforowanie zasobów statycznych, odwołujemy się do konkretnych zasobów, takich jak javascript, CSS i pliki obrazów.

Buforowanie strony przechowuje wyniki dynamicznie generowanej strony WordPress i ponownie obsługuje tę wersję przez określony czas. Pamięci podręczne stron są zwykle przechowywane na serwerze lub w sieci brzegowej, takiej jak CDN, a zasoby statyczne są przechowywane lokalnie na komputerze użytkownika.

Buforowanie dotyczące sposobu, w jaki obsługujemy zasoby statyczne z wydajną polityką pamięci podręcznej, oznacza informowanie przeglądarki, jak długo może przechowywać zasób lokalnie w przeglądarce, zanim będzie trzeba go ponownie pobrać.

Co sprawia, że ​​zasób statyczny można przechowywać w pamięci podręcznej?

Według GTMetrix zasób może być przechowywany w pamięci podręcznej, jeśli spełnia następujące wymagania:

• Jest to czcionka, CSS, javascript lub plik multimedialny.
• Zwraca kod stanu HTTP 200, 203 lub 206
• Nie ma wyraźnej zasady braku pamięci podręcznej

Co to jest polityka buforowania?

Przyjrzeliśmy się, czym jest zasób statyczny, a także co oznacza buforowanie zasobu.

Terminów świeżość i nieaktualność można tutaj użyć do opisania stanu pliku w pamięci podręcznej. Jeśli plik można pobrać z pamięci podręcznej, można go nazwać fresh . Kiedy wygaśnie, zostanie nazwany nieaktualny .

Zasady odpowiedzą na pytania, takie jak jak długo plik jest uważany za świeży i jak sprawdzić, czy plik jest świeży. Zasady stanowią, że musimy sprawdzać na serwerze dopiero po określonym czasie lub informować nas o sprawdzaniu na serwerze przy każdym żądaniu, ale ponownie pobierać plik tylko wtedy, gdy się zmienił.

Jeszcze kilka terminów, które dobrze będzie zrozumieć, zanim przejdziemy dalej.

W jaki sposób polityka pamięci podręcznej wpływa na UX i SEO?

Doświadczenie użytkownika (UX) i optymalizacja wyszukiwarek (SEO) są ze sobą ściśle powiązane. Według Google badania pokazują, że użytkownikom zależy na responsywności witryny, więc Google umieszcza strony o większej responsywności wyżej.

Jeśli zasoby statyczne są efektywnie przechowywane w pamięci podręcznej, strona będzie się renderować szybciej ze względu na krótszy czas ładowania tych zasobów. Skrócenie czasu prowadzi do poprawy podstawowych wskaźników internetowych, takich jak LCP i FID, a ostatecznie do wyższego rankingu w wyszukiwarkach.

Możesz przeczytać więcej o tym, jak podstawowe wskaźniki internetowe wpływają na ranking strony tutaj.

Jak naprawić udostępnianie zasobów statycznych z problemem zasad efektywnej pamięci podręcznej

Napraw ręcznie

Udostępnianie zasobów statycznych z wydajną polityką pamięci podręcznej nie jest ustawieniem specyficznym dla WordPressa, możesz ustawić je ręcznie, modyfikując plik konfiguracyjny serwerów WWW lub użyć wtyczki, takiej jak hosting 10Web Booster, aby upewnić się, że Twoja witryna jest skonfigurowana ze zoptymalizowanymi ustawieniami buforowania.

W tej sekcji omówimy edytowanie plików konfiguracyjnych serwera WWW bezpośrednio w celu włączenia kontroli pamięci podręcznej i wygasania nagłówków HTTP na twoich serwerach, więc gdy obsługuje zasoby statyczne, stosuje nagłówki HTTP w odpowiedzi.

Gdy żądany jest zasób, serwer WWW odpowiada zasobem i dodatkowymi informacjami w tak zwanych nagłówkach HTTP. Pomyśl o nagłówkach HTTP jako o metadanych dotyczących połączenia. W przypadku buforowania nagłówki HTTPCache-ControliExpireskontrolują sposób buforowania zasobu.

Nagłówek kontroli pamięci podręcznej zawiera instrukcje dotyczące tego, czy i/lub jak buforować zasób statyczny. Istnieje wiele dyrektyw dotyczących kontroli pamięci podręcznej, więc zapoznajmy się z niektórymi z najbardziej popularnych.

Oto kilka przykładów tego, jak może wyglądać nagłówek kontroli pamięci podręcznej.

Przykład: przechowuj zasób w pamięci podręcznej przez siedem dni
Cache-Control: max-age=604800

Przykład: mogą być przechowywane we współdzielonej pamięci podręcznej przez maksymalnie siedem dni
Cache-Control: public, max-age=604800

Przykład: Może być przechowywany, ale musi być ponownie sprawdzany przy każdym żądaniu
Cache-Control: no-cache

Przykład: Nie można zapisać w pamięci podręcznej
Cache-Control: no-store

Nagłówek kontroli pamięci podręcznej jest nowszy i ma więcej opcji, ale w przypadku, gdy kontrola pamięci podręcznej nie jest obsługiwana, nagłówek HTTP wygasania wykonuje to samo zadanie nagłówka i instruuje, jak długo zasób jest ważny przed koniecznością ponownej weryfikacji. (Zauważ, że dyrektywa max-age w nagłówku Cache-Control ma pierwszeństwo przed Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Bezpośrednia modyfikacja konfiguracji serwera

Najpierw spójrzmy na „trudną drogę”, abyśmy zrozumieli, co się dzieje, gdy korzystamy z innych narzędzi i usług, które nam to ułatwiają.

Apache

Na serwerze HTTP Apache następujący fragment kodu można dodać do definicji witryny lub pliku .htaccess.

Wyjaśniając ten fragment, mówi, że każdy zasób, w którym rozszerzenie pasuje do .ico lub .pdf itp., Będzie miał ustawiony nagłówek Cache-Control dla zasobu.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Dzięki Apache wielu dostawców usług hostingowych daje możliwość dodawania dyrektyw do pliku .htaccess. Zauważ, że chociaż jest to łatwy sposób dodania do konfiguracji serwera, użycie plików .htaccess jest znane z negatywnego wpływu na wydajność na poziomie serwera.

Nginx

W Nginx ten fragment kodu można dodać do bloku serwera.

Wyjaśniając ten fragment, mówi, że każdy zasób, w którym rozszerzenie pasuje do .ico lub .pdf itp., Będzie miał ustawione zarówno nagłówki wygasania, jak i kontroli pamięci podręcznej.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Zarówno dla Apache, jak i Nginx pokazujemy, jak modyfikować/dodawać nagłówki. Pokazujemy konkretne nagłówki, których używamy do buforowania, ale metoda ta może być używana do dowolnej innej formy buforowania.

Napraw za pomocą wtyczki WordPress

Jeśli powyższe wydaje się dużo, to dlatego, że tak jest. Modyfikowanie konfiguracji serwera i aktualizowanie ręcznych zmian jest czasochłonne i podatne na błędy.

Bezpłatny plan 10Web Booster może skonfigurować Apache tak, aby dodawał nagłówki dla zasobów statycznych, a także dodaje nagłówki dla stron internetowych zapisanych w pamięci podręcznej. Jeśli nie korzystasz jeszcze z hostingu 10Web, a Twój host korzysta z Apache, jest to świetny sposób na rozpoczęcie wdrażania wydajnej polityki pamięci podręcznej.

Jeśli potrzebujesz więcej opcji lub większej kontroli nad nagłówkami HTTP, możesz użyć 10Web Booster Pro. 10Web Booster Pro wykorzystuje swój Cloudflare. Kiedy używasz Cloudflare, dodaje nagłówki kontroli pamięci podręcznej do zasobów statycznych i stron w pamięci podręcznej. Pomija to wszelkie konfiguracje lub ograniczenia serwera, ponieważ Twoi goście otrzymują pliki bezpośrednio z Cloudflare.

To, co sprawia, że ​​wtyczka 10Web Booster jest tutaj najlepszym wyborem, to to, że robi to wszystko i robi to automatycznie. Nie musisz zarządzać żadnymi konfiguracjami serwera ani plikami .htaccess.

Alternatywnie, jeśli korzystasz z 10Web Hosting, automatycznie implementuje buforowanie i nie musisz się martwić o dodawanie nagłówków dla zasobów statycznych.

Nadal nie możesz rozwiązać problemu? Wypróbuj te dwie wskazówki

Jeśli po wdrożeniu powyższych kroków nadal widzisz w raportach zasoby statyczne usługi z wydajną polityką pamięci podręcznej, możesz wypróbować jeszcze kilka rzeczy.

Sprawdzanie, czy pliki są buforowane

Jeśli GTMetrix i PageSpeed ​​nadal zgłaszają, że powinieneś udostępniać zasoby statyczne z zasadami pamięci podręcznej, możesz sprawdzić, czy Twoja implementacja faktycznie wprowadziła oczekiwane zmiany.

W większości przeglądarek istnieje prosty sposób sprawdzenia, czy pliki pochodzą z pamięci podręcznej, czy nie.

W Chrome, w sekcji Widok i Deweloper, wybierz Narzędzia dla programistów:

W zakładce Sieć będziesz mógł zidentyfikować pliki, które pochodzą z (pamięci podręcznej dysku) lub (pamięci podręcznej pamięci). Różnica między dyskiem a pamięcią podręczną polega na tym, że pamięć znika po zamknięciu przeglądarki, a dysk pozostaje po zamknięciu przeglądarki.

Zwiększ czas pamięci podręcznej

Według statystyk z Lighthouse, wydajna polityka pamięci podręcznej to taka, która ma wysoki stosunek trafień pamięci podręcznej do chybień, co oznacza, że ​​większość zasobów statycznych ma ustawiony maksymalny wiek lub wygaśnięcie. W przypadku witryn, które są w fazie produkcji lub nie są często zmieniane, zalecany jest maksymalny wiek od trzech miesięcy do nawet roku.

Zalecają rozpoczęcie polityki na około trzy miesiące (około 7890000 sekund), jeśli już to ustawiłeś, może warto zwiększyć maksymalny wiek do roku lub więcej, jeśli Twoja witryna jest aktywna.

Wniosek

Możliwość obsługi zasobów statycznych z wydajną polityką pamięci podręcznej zapewnia poprawę szybkości działania witryny.

W tym artykule omówiono, czym są zasoby statyczne, jakie są nagłówki HTTP, i przyjrzano się, jak włączyć i sprawdzić, czy nagłówki buforowania są na miejscu.

Przyjrzeliśmy się zasadom ręcznego włączania nagłówków, modyfikując konfiguracje serwerów i temu, jak możemy to ułatwić za pomocą wtyczki WordPress, takiej jak 10Web Booster, oraz wykorzystując integrację 10Web z Cloudflare, aby mieć dostęp do ustawiania nagłówków HTTP kontrolujących pamięć podręczną.

10Web Booster to znacznie więcej niż tylko wtyczka do buforowania. Możesz przeczytać więcej o wielu funkcjach buforowania i optymalizacji prędkości w tym artykule 10Web Booster .

Często zadawane pytania