Użytkownicy, którzy będą wczytywać Twoją witrynę po raz drugi, będą korzystać z pamięci podręcznej HTTP, więc upewnij się, to działa bardzo dobrze.
Ten post jest uzupełnieniem filmu Pokochaj pamięć podręczną, który jest częścią Extended Treści na Chrome Dev Summit 2020. Zachęcam do obejrzenia filmu:
Gdy użytkownik ponownie wczyta witrynę po raz drugi, przeglądarka użyje zasobów znajdujących się w witrynie. jej pamięć podręczną HTTP, co przyspiesza ładowanie. Standardy dotyczące buforowania i są dość ogólnikowe. Są to: czy plik, np. CSS lub obraz, może zostać ponownie pobrany z sieci; a wczytywanie z pamięci podręcznej jest całkiem nieprecyzyjne.
W tym poście opowiem o rozsądnym, nowoczesnym sposobie na buforowanie, w ogóle nie korzysta z pamięci podręcznej. To jednak tylko ustawienie domyślne i o podobnym znaczeniu bardziej precyzyjne niż po prostu „wyłączanie go”. Czytaj dalej.
Cele
Przy drugim wczytaniu witryny pojawiają się 2 cele:
- Upewnij się, że użytkownicy korzystają z najnowszej dostępnej wersji. Gdy coś się zmieni, powinno to szybko zostać odzwierciedlone
- Wykonaj czynność 1, pobierając jak najmniejsze dane z sieci.
Ogólnie rzecz biorąc, Twoim celem jest wprowadzenie jak najmniejszej zmiany podczas ponownego ładowania witryny. Taką strukturę witryny dostarczamy, efektywne rozłożenie każdej zmiany jest wyzwaniem (więcej na ten temat poniżej, film).
Przy okazji buforowania można też używać innych opcji, chcesz zezwolić na przechowywanie witryny w pamięci podręcznej HTTP przeglądarki użytkownika przez dłuższy czas przez co nie są wymagane żadne żądania sieciowe do jego obsługi. Albo już stworzyliśmy mechanizm Service Worker, który będzie wyświetlać witrynę całkowicie offline przed sprawdzając, czy jest aktualna. To ekstremalna opcja, która jest poprawna – i używana dla wielu aplikacji działających w trybie offline, ale niekoniecznie które działają wyłącznie w pamięci podręcznej, a nawet na poziomie całej sieci.
Tło
Jako programiści stron internetowych jesteśmy przyzwyczajeni do koncepcji „nieaktualnej pamięci podręcznej”. Wiemy jednak niemal instynktowo, że dostępne narzędzia do rozwiązania tego problemu odśwież” lub otwórz okno incognito albo użyj kombinacji klawiszy otwieranych w przeglądarce z narzędzi dla programistów do czyszczenia danych witryny.
Stali użytkownicy w internecie nie mają tego samego luksusu. Skoro więc Chcemy, by nasi użytkownicy dobrze bawili się podczas musisz też upewnić się, że nie mają one złego czasu lub utknąć. (Obejrzyj film, jeśli chcesz dowiedzieć się, jak omówiliśmy prawie wcale, witryna web.dev/live się zatrzymała).
W skrócie: dość częsta przyczyna „nieaktualnej pamięci podręcznej” to
domyślny system buforowania z 1999 r. Opiera się na nagłówku Last-Modified:
Każdy wczytywany plik jest przechowywany przez dodatkowe 10% swojego bieżącego okresu przechowywania,
jej widoczność w przeglądarce. Jeśli na przykład plik index.html został utworzony miesiąc temu,
będzie on przechowywany w pamięci podręcznej przeglądarki przez kolejne trzy dni.
Kiedyś ten pomysł miał słuszne intencje, ale ze względu na zintegrowany charakter współczesnych witryn. To domyślne działanie oznacza, że możliwe jest do stanu, w którym użytkownik ma pliki zaprojektowane pod kątem różnych wersji Twojej witryny (np. plik JS ze wtorkowej wersji i CSS z piątkowego wersji), a to dlatego, że te pliki nie były aktualizowane w tym samym czasie.
Dobrze oświetlona ścieżka
Nowoczesnym domyślnym ustawieniem buforowania jest w ogóle jej brak i użycie sieci CDN pozwalające zbliżyć treści do siebie; użytkownikom. Za każdym razem, gdy użytkownik otworzy Twoją witrynę, przejdzie do sieci, sprawdź, czy jest aktualna. To żądanie będzie miało niewielkie opóźnienia, ponieważ udostępniane przez sieć CDN geograficznie blisko każdego użytkownika.
Możesz skonfigurować dostawcę hostingu witryn tak, aby odpowiadał na żądania sieciowe przy użyciu tego nagłówka:
Cache-Control: max-age=0,must-revalidate,public
Zasadniczo jest to tak: plik nigdy nie jest ważny i trzeba sprawdzić, od sieci przed jego ponownym użyciem (w przeciwnym razie będzie on tylko „sugerowane”).
Proces weryfikacji jest stosunkowo niedrogi pod względem liczby przesyłanych bajtów. nie zmienił się duży plik graficzny, przeglądarka wyświetli mały błąd 304 – ale wiąże się to z opóźnieniem, ponieważ użytkownik i tak musi połączyć się z siecią, na zewnątrz. To jest główna wada tego podejścia. Może działać bardzo dobrze, dla osób korzystających z szybkich połączeń w pierwszym świecie, w miejscach, gdzie wybrana sieć CDN ma ale nie dla osób, które korzystają z wolniejszych telefonów. połączeń lub słabej infrastruktury.
Niezależnie od tego jest to nowoczesne podejście, jest domyślnym ustawieniem w popularnej sieci CDN, Netlify, ale można je skonfigurować w niemal każdej sieci CDN. Do Hostingu Firebase możesz dodać także ten nagłówek z sekcji dotyczącej hostingu. pliku firebase.json:
"headers": [
// Be sure to put this last, to not override other headers
{
"source": "**",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=0,must-revalidate,public"
}
}
]
Choć nadal polecam to ustawienie, to jest to rozsądne ustawienie domyślne. Czytaj dalej, aby dowiedzieć się, jak zacząć korzystać z domyślnych ustawień domyślnych i jak je zmienić.
Adresy URL zawierające odcisk cyfrowy
Przez dodanie skrótu treści pliku w nazwie zasobów, obrazów itd.
w Twojej witrynie, możesz zapewnić, że te pliki zawsze będą miały unikalne
treści—zostaną wtedy utworzone pliki o nazwie np. sitecode.af12de.js. Kiedy
Twój serwer odpowiada na żądania tych plików, możesz bezpiecznie
aby przeglądarka użytkownika mogła przechowywać je w pamięci podręcznej przez dłuższy czas, konfigurując w nich
nagłówek:
Cache-Control: max-age=31536000,immutable
Jest to rok w sekundach. Według specyfikacji jest to w praktyce równy „na zawsze”.
Ważne, aby nie generować tych haszów ręcznie – to zbyt wiele pracy ręcznej. Ty mogą Ci w tym pomóc narzędzia takie jak Webpack czy Rollup. Upewnij się, więcej informacji na ten temat znajdziesz w raporcie dotyczącym narzędzi.
Pamiętaj, że nie tylko JavaScript może być korzystny dla adresów URL z odciskami cyfrowymi. Zasoby takie jak ikony, CSS i inne stałe pliki danych również mogą mieć taką nazwę sposób. (Obejrzyj film powyżej, by dowiedzieć się więcej o kodzie dzielenia, co pozwala wysyłać mniej kodu po każdej zmianie witryny).
Niezależnie od tego, jak witryna podchodzi do buforowania, tego typu odciski cyfrowe są bardzo przydatne dla każdej witryny. Większość witryn nie są takie same w przypadku każdej wersji.
Oczywiście nie możemy zmienić nazwy „przyjaznych” stron dla użytkowników w taki sposób:
index.html do usługi index.abcd12.html – to niemożliwe,
przejście do nowego adresu URL przy każdym wczytaniu Twojej witryny. Te „przyjazne” Adresy URL
nie można zmienić nazwy ani zapisać w pamięci podręcznej w ten sposób, co prowadzi do możliwego rozwiązania
i przyczynia się do instalacji.
Środek transportu
Jeśli chodzi o buforowanie, jest oczywiście miejsce na kompromis. Korzystałem przedstawił dwie skrajne możliwości: Pamięć podręczna nigdy lub na zawsze. Będzie też to kilka plików, które chcesz buforować przez jakiś czas, na przykład „przyjazny” Adresy URL, o których wspominaliśmy powyżej.
Jeśli w pamięci podręcznej mają być i ich HTML, warto uwzględniając te zależności, sposób zapisywania w pamięci podręcznej zapisywanie adresów URL w pamięci podręcznej przez jakiś czas może mieć wpływ na Twoją pracę. Spójrzmy na stronę HTML, której zawiera obraz podobny do tego:
<img src="/images/foo.jpeg" loading="lazy" />
Jeśli zaktualizujesz lub zmienisz witrynę, usuwając lub zmieniając to ustawienie
użytkownicy, którzy wyświetlą wersję Twojego kodu HTML z pamięci podręcznej, mogą otrzymać
brakującego obrazu – ponieważ oryginalny plik /images/foo.jpeg jest nadal przechowywany w pamięci podręcznej
ponownie odwiedzają Twoją witrynę.
Jeśli zachowasz ostrożność, te zmiany mogą nie mieć wpływu na Twoją pracę. Ogólnie ważne jest jednak, pamiętaj, że Twoja witryna – gdy użytkownicy przechowują je w pamięci podręcznej – nie istnieje już Twoje serwery. ale mogą znajdować się w częściach w pamięci podręcznej przeglądarki.
Ogólnie większość poradników na temat buforowania dotyczy tego rodzaju – czy chcesz przechowywać w pamięci podręcznej na godzinę, kilka godzin itd. Aby ustawić tę opcję rodzaj pamięci podręcznej, należy użyć nagłówka podobnego do tego (z pamięci podręcznej przez 3600 sekund godz.):
Cache-Control: max-age=3600,immutable,public
Jeszcze jedno. Jeśli tworzysz aktualne treści, które zwykle użytkownicy, którzy skorzystali z Twojej usługi raz – tak jak w artykułach informacyjnych! – uważam, że nigdy nie powinny one być w pamięci podręcznej i użyj powyższego rozsądnego ustawienia domyślnego. Myślę, że często zawyżyć znaczenie buforowania, a nie chęć użytkownika, by zawsze widzieć najnowsze i najważniejszych treści, np. krytycznych informacji na temat artykułów czy bieżących wydarzeń. .
Opcje inne niż HTML
Oprócz HTML dostępne są też inne opcje dotyczące plików funkcjonujących w środkowej części procesu. uwzględnij:
Ogólnie rzecz biorąc, szukaj komponentów, które nie mają wpływu na inne komponenty
- Na przykład: unikaj CSS, ponieważ powoduje on zmiany w kodzie HTML wyrenderowano
duże obrazy wykorzystywane jako część aktualnych artykułów;
- Twoi użytkownicy prawdopodobnie nie będą już czytać żadnego artykułu niż kilka razy, więc nie zapisuj w pamięci podręcznej zdjęć ani obrazów głównych przechowywanie odpadów
Zasób, który reprezentuje coś, co przez cały czas jest możliwe.
- Dane JSON dotyczące pogody mogą być publikowane tylko co godzinę, więc poprzedni wynik możesz zapisać w pamięci podręcznej przez godzinę – nie zmieni się on w oknie.
- Liczba kompilacji projektu open source może być ograniczona, więc zapisz w pamięci podręcznej obraz stanu kompilacji, dopóki nie będzie możliwe, że stan ten może się zmienić
Podsumowanie
Gdy użytkownicy wczytają Twoją witrynę po raz drugi, Twój głos został już zebrany Pewnie chcą wrócić do Twojej oferty i zyskać więcej tego, co oferujesz. W tym miejscu pamiętaj, że nie zawsze chodzi tylko o skrócenie czasu ładowania. szereg opcji, dzięki którym przeglądarka musi być szybko i aktualny.
Pamięć podręczna nie jest nową koncepcją w internecie, ale być może domyślne – rozważ zastosowanie jednej ze strategii buforowania, która zdecydowanie zalecamy gdy są potrzebne. Dziękujemy za uwagę!
Zobacz też
Ogólny przewodnik na temat pamięci podręcznej HTTP zawiera Zapobiegaj zbędnym żądaniom sieciowym dzięki pamięci podręcznej HTTP.