Buforowanie to przydatna, ale zaskakująco złożona funkcja przeglądarek internetowych.
W tym artykule wyjaśnimy, w jaki sposób przeglądarka wykorzystuje swoją pamięć podręczną, aby szybciej ładować strony, które czynniki określają czas trwania pamięci podręcznej i jak możemy w razie potrzeby ominąć pamięć podręczną.
Czym jest buforowanie przeglądarki?
- Pamięć podręczna przeglądarki przechowuje pliki zasobów stron sieci Web na komputerze lokalnym, gdy użytkownik odwiedza stronę internetową.
- „Wykorzystanie” buforowania przeglądarki ma miejsce wtedy, gdy webmaster polecił przeglądarkom, w jaki sposób należy zająć się ich zasobami.
Kiedy przeglądarka wyświetla twoją stronę, musi załadować kilka rzeczy, takich jak twoje logo, twój plik CSS i inne zasoby.
To, co robi pamięć podręczna przeglądarki, to „zapamiętaj” zasoby, które przeglądarka już załadowała. Kiedy użytkownik przechodzi na inną stronę w Twojej witrynie, twoje logo, pliki CSS itp. Nie muszą być ponownie ładowane, ponieważ przeglądarka ma je „zapamiętane” (zapisane). To jest powód, dla którego pierwszy widok strony trwa dłużej niż wielokrotne odwiedziny.
Po wykorzystaniu buforowania przeglądarki pliki stron internetowych zostaną zapisane w pamięci podręcznej przeglądarki . Twoje strony będą ładować się znacznie szybciej dla stałych gości, podobnie jak inne strony, które mają te same zasoby.
Jeśli przetestowałeś swoją stronę pod kątem szybkości i okazało się, że musisz wykorzystać pamięć podręczną przeglądarki, oto jak to robisz.
Jak wykorzystać buforowanie przeglądarki
- Zmień nagłówki żądań zasobów, aby używać buforowania.
- Zoptymalizuj swoją strategię buforowania.
Zmień nagłówki żądań zasobów, aby używać buforowania
Dla większości ludzi sposobem na włączenie buforowania jest dodanie kodu do pliku o .htaccess na twoim serwerze.
Oznacza to przejście do menedżera plików (lub dowolnego miejsca w celu dodania lub przesłania plików) na swój serwer.
Plik .htaccess kontroluje wiele ważnych rzeczy dla Twojej witryny.
Pamięć podręczna przeglądarki dla .htaccess
Poniższy kod informuje przeglądarki o tym, co należy przechowywać w pamięci podręcznej i jak długo to „zapamiętywać”. Powinien zostać dodany do początku pliku .htaccess.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image / jpg "dostęp 1 rok"
ExpiresByType image / jpeg "dostęp 1 rok"
ExpiresByType image / gif "dostęp 1 rok"
ExpiresByType image / png "dostęp 1 rok"
ExpiresByType text / css "dostęp 1 miesiąc"
ExpiresByType text / html "dostęp 1 miesiąc"
ExpiresByType application / pdf "dostęp 1 miesiąc"
ExpiresByType text / x-javascript "dostęp 1 miesiąc"
ExpiresByType application / x-shockwave-flash "dostęp 1 miesiąc "
ExpiresByType image / x-icon" dostęp 1 rok "
ExpiresDefault" dostęp 1 miesiąc "
</ IfModule>
## EXPIRES CACHING ##
Zapisz plik .htaccess, a następnie odśwież stronę.
Jak ustawić różne czasy buforowania dla różnych typów plików
W powyższym kodzie widać, że istnieją okresy takie jak „1 rok” lub „1 miesiąc”. Są one związane z typami plików, na przykład powyższy kod stwierdza, że plik .jpg (obraz) powinien być buforowany przez rok.
Jeśli chcesz to zmienić i powiedzieć, że chcesz, aby twoje obrazy jpg były buforowane przez miesiąc, po prostu zamienisz „1 rok” na „1 miesiąc”. Powyższe wartości są dość zoptymalizowane dla większości stron internetowych i blogów.
Alternatywna metoda buforowania dla .htaccess
Powyższa metoda nazywa się „Expires” i działa dla większości osób korzystających z .htaccess, więc zajmuje się buforowaniem dla większości osób dopiero zaczynających.
Po bardziej komfortowe buforowanie, możesz wypróbować Cache-Control, inną metodę buforowania, która daje nam więcej opcji.
Jest również możliwe, że metoda wygasania nie zadziałała dla twojego serwera, w takim przypadku możesz spróbować użyć Cache-Control.
Cache-Control
Cache-Control pozwala nam mieć nieco większą kontrolę nad naszym buforowaniem przeglądarki i wielu osobom łatwiej jest z nich korzystać po skonfigurowaniu.
Przykład użycia w pliku .htaccess:
# 1 miesiąc dla większości zasobów statycznych
<filesMatch ". (Css | jpg | jpeg | png | gif | js | ico) $">
Zestaw nagłówków Cache-Control "max-age = 2592000, public"
</ filesMatch>
Powyższy kod ustawia nagłówek kontroli pamięci podręcznej w zależności od typu pliku.
Jak działa kontrola pamięci podręcznej
Weźmy powyższy kod kreską po linii.
# 1 miesiąc dla większości zasobów statycznych
Powyższa linia jest tylko notatką. Nie robi nic poza notowaniem tego, co robimy. Plik .htaccess ignoruje linie zaczynające się od znaku #. Ta uwaga jest zalecana, ponieważ możesz mieć kilka różnych zestawów, ponieważ twoje rozwiązanie buforowania rośnie.
<filesMatch ". (css | jpg | jpeg | png | gif | js | ico) $">
Powyższy wiersz mówi, że „jeśli plik jest jednym z tych typów, to coś z tym zrobimy …
Ważną częścią tej linii jest zauważenie, że istnieją różne typy plików wymienionych (css, js, jpeg, png itd.) I że poniższe instrukcje buforowania będą miały zastosowanie do tych typów plików. Na przykład, jeśli nie chcesz, aby twoje pliki jpg były buforowane przez tak długi czas, możesz usunąć „jpg” z tej linii lub jeśli chcesz dodać do tego html, możesz po prostu dodać „html” do tego wiersza.
Zestaw nagłówków Cache-Control "max-age = 2592000, public"
Powyższa linia to miejsce, w którym wstawiane są aktualne nagłówki i podane wartości.
- Część „Header set Cache-Control” ustawia nagłówek.
- Część „max-age = 2592000” określa, jak długo ma być buforowana (za pomocą sekund). W tym przypadku buforujemy przez jeden miesiąc, czyli „2592000” sekund.
- Część „publiczna” stwierdza, że jest to publiczne (co jest dobre, jeśli chcesz, aby było buforowane).
</ filesMatch>
Powyższa linia zamyka instrukcję i kończy blok kodu.
Typowy problem z buforowaniem
Jeśli podajesz swój html i obrazy, które mają być przechowywane w pamięci podręcznej przez rok lub inny długi okres, pamiętaj, że może to oznaczać, że jeśli zmienisz strony, mogą nie być widoczne dla wszystkich użytkowników. Dzieje się tak dlatego, że użytkownicy będą szukać plików w pamięci podręcznej, a nie na żywo. Jeśli masz plik, który modyfikujesz sporadycznie (przykład – plik CSS), możesz przezwyciężyć problem z pamięcią podręczną za pomocą pobierania odcisków palców.
Fingerprinting URL
Uzyskanie nowego (nie buforowanego) zasobu plikowego jest możliwe dzięki unikalnej nazwie. Przykładem może być, jeśli nasz plik css został nazwany „main.css”, możemy zamiast tego nazwać go „main_1.css”. Przy następnej zmianie możemy go nazwać „main_2.css”. Jest to przydatne w przypadku plików, które zmieniają się sporadycznie.
Metody buforowania
Ważne jest, aby podać jeden z atrybutów Expires lub Cache-Control max-age i jeden z Last-Modified lub ETag, dla wszystkich zasobów buforowanych. Redundantne jest określenie zarówno Expires, jak i Cache-Control: max-age lub określenie Last-Modified i ETag.