Co to jest buforowanie przeglądarki?
Buforowanie przeglądarki to proces przechowywania wcześniej żądanych plików w lokalnej pamięci podręcznej przeglądarki, aby skrócić czas ładowania. Gdy plik jest przechowywany lokalnie, do wysłania na serwer potrzeba mniejszej liczby żądań, a do pobrania wymagane jest mniej danych.
Są pewne elementy, które muszą być włączony żeby prawidłowo zwiększenie rozpoznawalności buforowanie przeglądarki. Na przykład należy upewnić się, że określono walidator pamięci podręcznej, aby pomóc przeglądarce określić, czy plik można nadal pobierać z lokalnej pamięci podręcznej lub czy należy wysłać żądanie do serwera. Ponadto musisz poprawnie ustawić nagłówki Expires lub Cache-Control dla swoich zasobów. Używanie obu byłoby zbędne. Ponadto Gtmetrix preferuje funkcję Expires over Cache-Control, ponieważ jest ona szerzej obsługiwana. Dlatego ten artykuł skupi się na użyciu nagłówków Expires podczas demonstrowania, jak wykorzystać buforowanie przeglądarki.
Cache-Control
Cache-Control pozwala nam mieć nieco większą kontrolę naszej pamięci podręcznej przeglądarki i wiele osób uważa, że łatwiej używać raz konfiguracji.
# 1 Year for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
Gzip Comporession (Vary Przydatne Dla Magento)
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
zależności od plików Twojej witryny można ustawić różne czasy ważności.
Jeśli niektóre typy plików są aktualizowane częściej, należy ustawić na nich wcześniejszy czas wygaśnięcia (np. Pliki CSS).
Otwórz swój plik .htaccess. (bądź mądry: utwórz kopię oryginalnego pliku .htaccess, jeśli przypadkowo popełnisz błąd i musisz go cofnąć).
Teraz nadszedł czas, aby włączyć Wygasa moduł nagłówki w Apache (Ustawienie 'ExpiresActive' na 'On'), więc dodać to do pliku .htaccess:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
</IfModule>
To może być użyteczne aby dodać „dyrektywę domyślny” dla domyślnego terminu ważności, więc to jest 2 rzędy dodamy teraz:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>
To baza. Teraz dodaj wszystkie linie dla każdego z typów plików (wiesz, utworzonego wcześniej na swojej favicon te, zdjęć, CSS i JavaScript). Skończysz z fragmentem kodu, który wygląda mniej więcej tak:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year”
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month”
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
Teraz uruchom kolejny test z GTmetrix i porównać wyniki.Jest to wynik mojej stronie testowej, po wdrożeniu Wygasa nagłówki:
Rekomendacje
- być agresywny z buforowania dla wszystkich zasobów statycznych
- ważności co najmniej jednego miesiąca (zalecane: dostęp plus 1 rok)
- Nie ustawiaj buforowania na więcej niż rok wcześniej!
Browser buforowanie przy użyciu WordPress Plugin
W3 Total Cache: Jeden z najlepszych plugin buforowania z wielu funkcji, takich jak buforowanie, integracji CDN (jak MaxCDN), które przyspieszy skuteczność witryny.
Uwaga
- Upewnij się, że
mod_rewrite jest włączona na serwerze WWW Apache, jeśli nie, to skontaktuj się z serwera WWW zespół techniczny, aby ją włączony jako moduł rewrite będą potrzebne do zakończenia działania buforowania .
- Ostrzeżenie! Jeśli ustawisz datę przydatności do użycia w przyszłości, a następnie zaktualizujesz jeden z tych plików, musisz zmienić nazwę pliku , aby przeglądarka ponownie go pobrała.
Przykład: jeśli ustawisz javascript na 1 rok i zaktualizujesz jeden z plików javascript, będziesz musiał zmienić nazwę pliku. Dobrym sposobem na zrobienie tego jest wersja, czyli myfile_v1.2.js, ale łatwiej jest zachować ostrożność przy nagłówkach Expires (ustawienie coś na 10 lat nigdy nie jest dobrą opcją IMO).
Czy zauważyłeś jakieś ulepszenia dla swojej witryny? Czy powyższe zajmie się wszystkimi plikami wymienionymi w "Wykorzystanie buforowania przeglądarki" i "Dodaj nagłówki Expires"? Daj mi znać w komentarzach poniżej.
To są pliki zewnętrzne, tak? Będziesz musiał pobrać zewnętrzny plik '.JS',' css' i dowolne inne pliki, które posiadasz i uruchomić je lokalnie. Można to zrobić za pomocą 'cron'. Sprawdź moją odpowiedź na to pytanie: [Wykorzystaj pamięć podręczną przeglądarki dla JS innej firmy] (http://stackoverflow.com/questions/38376871/leverage-browser-caching-for-3rd-party-js/38377857#38377857) – Lag
HI @thickguru Jak osiągnąć bez pobierania plików. Ponieważ cel używania CDN do poprawy wydajności. Nie mogę tego zrobić –
Nie mogę się bać. Nie z plikami zewnętrznymi. Będzie działać tylko z plikami lokalnymi. Dlatego zaproponowałem użycie 'cron'. – Lag