Най-добри практики за настройки на контрола на кеш за вашия уебсайт

Може би сте забелязали, че понякога, когато влизате в сайт за втори път, той не изглежда както се очаква и някои стилове са нарушени, което прави всичко да изглежда странно. Обикновено причината за този проблем е неправилно дефинирани политики за контрол на кеша, които ви пречат да получавате най-новите промени след най-новото внедряване. В тази статия ще ви покажа правилните настройки и техники за кеш, които ще ви помогнат да поддържате актуализиран уебсайта си за всички потребители след всяко внедряване.

За тези от вас, които просто искат да получат най-добрите практики и да започнат да ги използват, следвайте линка тук до края на статията.

Как работи кешът зад кулисите?

Вашият браузър при всяка заявка към уебсайта / ресурса се опитва да зареди възможно най-малко данни, като чете кеширана информация от местната памет. Това е възможно само ние предоставяме достатъчно инструкции за браузъра, за да обясним какви ресурси трябва да запази и за колко време.

Тези инструкции функционират като директиви; за да кажете на браузъра си за тях, трябва да ги добавите към информацията за HTTP заглавката на отговора. Най-често срещаните директиви, участващи в процеса на кеш, са „Cache-Control“, „Expires“, „Etag“ и „Last-Modified“.

Почти всеки уеб сървър има някои настройки на кеша в отговорите на заглавията по подразбиране, но не е ясно какво получаваме, ако няма правила за кеш.

Без настройки за контрол на кеша, браузърът отива към уеб сървъра за всяка заявка за ресурси и чете информация от него. Това увеличава времето за зареждане на засегнатия сайт, добавя допълнително натоварване към вашия уеб сървър при прехвърляне на информация и увеличава броя на обажданията към вашия бекенд.

Заявките протичат без настройки на кеша

От браузъра зависи дали да реши какво да прави и как да кешира информация без инструкции от сървъра. Понастоящем Chrome и Safari изтеглят данни от бекъна всеки път, без инструкции за кеш. Това обаче може да промени и да доведе до различно поведение, особено в други платформи.

За да дефинираме ясно какво да правим с определени файлове, нека направим дълбоко гмуркане в директивите за контрол на кеша, като ги добавим стъпка по стъпка в заглавките на отговорите и наблюдаваме резултата.

Етаг (етикет за субект)

Etag е една от настройките на кеша. Основната идея зад този HTTP заглавие е да позволи на вашия браузър да бъде запознат с промените в съответните ресурси, без да изтегля пълни файлове. Сървърът може да изчисли нещо подобно с хеш сума на всеки файл и след това да изпрати тази хеш сума на клиента. Следващият път, когато клиентът се опита да получи достъп до този ресурс, вместо да изтегли файла, браузърът ще изпрати нещо подобно в заглавката на HTTP: If-None-Match: W / “1d2e7–1648e509289“. След това сървърът ще провери тази хеш сума спрямо хеш сумата на текущия файл и, ако има разлика, принуди клиента да изтегли нов файл. В противен случай клиентът ще бъде информиран, че трябва да използва кеширана версия.

Заявките протичат с Etag - първи товарЗаявките протичат с Etag - 2-ри товар

С включена политика за кеш на Etag, ние винаги отиваме на сървъра, за да проверим хеш сумата на файл и едва след това браузърът ще реши да го вземе от кеша или да го зареди напълно. Когато даден ресурс не е променен, са необходими само 80–100 байта, за да проверите независимо от това, което искате, независимо дали е 10KB или 10MB файл.

Последно модифициран

Друга настройка за контрол на кеша е HTTP заглавката „Последно променен“. Основната идея е много подобна на Etag, но поведението на браузъра е малко по-различно. Сървърите имат времева марка на последната модифицирана дата за всеки файл; след първото зареждане на файл, клиентът има възможност да пита сървъра дали ресурсът е променен от конкретния момент, до който файловете последно са получили достъп от клиента. За да направите това, браузърът изпраща If-Modified-Since: Fri, 13 Jul 2018 10:49:23 GMT в HTTP заглавката. Ако ресурсът е променен, браузърът трябва да изтегли нов файл, в противен случай използва кеширана версия.

Реалността е, че браузърите имат своите вътрешни правила за кеш и могат сами да решават дали да вземат ресурс от кеша или да изтеглят ново копие.

Last-Modified е слаба кешираща заглавка, тъй като браузърът прилага евристика, за да определи дали да извлече елемента от кеша или не. Евристиката варира в различните браузъри.
Ръководство за най-добри практики за кеширане на Google
Заявките протичат с Последно променен - ​​1-ви товарПоток на заявките с последно модифициран - 2-ри товар (перфектен сценарий)Поток на заявките с последно модифициран - 2-ри товар (обикновен случай)

В резултат на това не можем да разчитаме само на Last-Modified, затова предпочитам да го премахна напълно от настройките на сървъра си, за да намаля трафика, дори ако това е само няколко байта.

Cache-Control max-age

Тази директива ни позволява да кажем на браузъра колко време трябва да съхранява файла в кеша от първото зареждане. Времето, в което браузърът трябва да съхранява файла в кеш паметта, трябва да се дефинира в секунди, обикновено се представя като този кеш-контрол: max-age = 31536000. С тази политика браузърът напълно пропуска процеса на отправяне на заявки към вашия сървър и отваря файлове много бързо. Но как да сме сигурни, че файлът няма да се промени толкова дълго? Не го правим

Така че, за да принудим браузъра да изтегли нова версия на необходимия файл, използваме техника, внедрена от много инструменти за създаване на активи, като Webpack или Gulp. Всеки файл ще бъде предварително компилиран на сървъра и към имената на файловете се добавят хеш суми, като например „app-72420c47cc.css“. Дори и малки промени във файла се отразяват в хеш сумата, което гарантира, че той ще бъде разпознат като различен. Така че, след следващото внедряване, ще получите нова версия на файла. Това може да се прилага за всички наши css, js и изображения файлове (max-age = 31536000); след като променим нещо, браузърът просто ще поиска нов файл с нова хеш сума, която след това ще кешира.

не-кеша

Сложната част от горната техника е, че не можете да забравите за вашите html файлове; ако приложите тази настройка и към тях, никога няма да получите нови връзки за файловете css, js или изображения, докато не наложите презареждане.

Препоръчвам ви да приложите Cache-Control: no-кеш към html файлове. Прилагането на „без кеш“ не означава, че изобщо няма кеш, просто казва на браузъра да валидира ресурсите на сървъра, преди да го използва от кеша. Ето защо трябва да го използваме с Etag, така че браузърите ще изпратят проста заявка и заредете допълнителните 80 байта, за да проверите състоянието на файла.

Крайни настройки

  • Използвайте Gulp, Webpack или подобно, за да добавите уникални хеш-цифри към вашите файлове css, js и изображения (като app-67ce7f3483.css);
  • За файлове js, css и изображения задайте Cache-Control: public, max-age = 31536000, няма Etag, няма последно променени настройки.
  • За html файлове използвайте Cache-Control: no-cache и Etag.

Както виждаме, дори очевидни и често срещани неща, като кеширане на статични файлове, може да не са очевидни, ако се гмурнем по-дълбоко. Доброто проучване може да ви попречи да направите грешки и да намали трафика на вашия сървър, като намали времето за зареждане на скоростта на сайта.

Докоснете бутона , ако смятате тази статия за полезна!

Някакви въпроси или обратна връзка? Свържете се чрез Pixel Point