Home / Questions / 48529
Accepted
J. Mick
Asked: 2020-02-09 20:31:37 +0800 CST 2020-02-09 20:31:37 +0800 CST

Как указать кеш браузера — PageSpeed ​​Insights?

  • 772

Я анализирую свой веб-сайт с помощью некоторых инструментов, таких как, например, validator.w3 , чтобы получить гораздо более быстрое выполнение веб-сайта без ошибок или задержек выполнения.

Инструмент Google PageSpeed ​​Insights говорит мне указать кеш браузера, отображая следующее предупреждающее сообщение.

Укажите кеш браузера Установка даты истечения срока действия или максимального возраста в заголовках HTTP статических ресурсов указывает браузеру загружать ранее загруженные ресурсы с локального диска, а не по сети.

Он подробно описывает ряд вещей, которые нужно исправить, исходя из темы, он говорит мне в каждом изображении / css / js , что я должен указать кеш в каждом из них.

Поиск Stack Overflow среди других статей указывает на такой пример:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"
</IfModule>

Теперь, если спецификация кеша основана на этом примере, у нее будет слишком длинный .htaccess . У меня слишком много изображений на веб-сайте.

Я нашел другой пример на английском, НАМНОГО более оптимизированный и очень простой, но я не знаю, действителен ли он.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 year"


<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|css|flv|gif|ico|jpg|jpeg|js|pdf|png|svg|swf|tif|tiff)$">
        Header set Last-Modified "Mon, 31 Aug 2009 00:00:00 GMT"
    </FilesMatch>
</IfModule>

У меня есть каталог файлов, js/css/imgструктурированный следующим образом:assets/css/style.css

Тем временем мой .htaccess

# Activamos mod_rewrite
RewriteEngine on

# Seleccionamos el directorio base     para el RewriteRule
RewriteBase /project/

# Aquí nos evitamos comprobar que sea un archivo (agrego comprobación
# para detectar también directorio) en cada conjunto de reglas
RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)$ $1 [QSA,L]

# Obtenemos todo lo que vaya tras "assets/" y subdirectorios previstos
RewriteCond %{REQUEST_URI} assets/(css|fonts|js|img)/(.+)$
# Entonces (si se cumplen todas las condiciones) redirigimos (R)
# y dejamos de evaluar el resto de reglas (L)
RewriteRule ^(.*)$ assets/%1/%2 [L,R]

# Tu/s regla/s
RewriteRule ^online-video-en-hd-gratis/?$ video.php [L,NC,QSA]
RewriteRule ^online/video/hd/free/?$ online.php [L,NC,QSA]

Теперь мой вопрос? Как указать кеш браузера более оптимизированным способом.

.htaccess

1 Answers

  1. Best Answer

    Нет ничего плохого в том, чтобы добавить 10 строк в .htaccess .

    Эти типы правил не оказывают существенного влияния на производительность сервера, разница во времени доступа не должна превышать доли миллисекунды, и это нормальная и рекомендуемая практика.

    Пример, который вы нашли с меньшим количеством строк, применим только к файлам с расширением (изображение не обязательно обслуживается с заданным расширением, archivo.phpможет генерировать изображение) и дает точную дату истечения срока действия, а это не то, что вы ищете.


    Для меня это что-то новое, я не знаю, как действительно указать кеш браузера

    Что такое кеш? Когда вы заходите на страницу в первый раз, ваш браузер загружает все ресурсы (html, изображения, css, js и т. д.) и сохраняет их в специальной локальной папке. Затем, если вы снова попытаетесь получить доступ к этой странице, вместо того, чтобы загружать все заново, браузер попытается использовать локальные копии, сократив время загрузки страницы, тем самым избегая загрузки уже доступного содержимого.

    Так как же это контролируется? когда использовать локальную копию и когда посмотреть, есть ли на сервере новая версия файла? Несмотря на то, что в нем много подробностей, описанных в статье HTTP-кэширование , важно знать, что можно настроить, как долго вы хотите, чтобы ресурс (файл) уже находился в кеше клиента (браузера), а не возвращался. это.. спросить у сервера. Это говорит в пользу того, что он будет загружаться быстрее, и против того, что если какой-либо из этих файлов будет изменен, пользователи будут видеть старую версию до истечения срока действия кеша. Вот почему важно указать разумное время в зависимости от состояния вашего веб-сайта, частоты обновления каждого файла и важности использования последней версии.

    Как он настроен. С каждым файлом сервер отправляет заголовки . В этих заголовках укажите, как он должен себя вести:Cache-Control

    • с ограничением по времени

      Cache-Control: max-age=2592000

      * 259200 секунд = 30 дней

    • Предпочитаю всегда проверять, что он не был изменен

      Cache-control: must-revalidate

      * Проверяйте дату модификации перед использованием кеша

    • Или напрямую запретите клиенту кешировать:

      Cache-control: no-cache

    Дополнительная информация на сайте Cache-Control (MDN) .

    Чтобы отправить этот заголовок, его можно задать в глобальной конфигурации сервера, в файле .htaccess или отправить напрямую из какой-либо функции используемого языка программирования (например, в PHP с помощью header() ).


    Он подробно описывает ряд вещей, которые нужно исправить, исходя из темы, он говорит мне в каждом изображении / css / js , что я должен указать кеш в каждом из них.
    [...]
    было бы важно, потому что у меня более 180 ошибок

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


    Ответ

    Это зависит от того, какое время кэширования вы хотите установить для каждого из ваших ресурсов. Я перечислил несколько примеров, чтобы вы могли выбрать, какой из них кажется более подходящим в вашем случае (или чтобы вы могли сгенерировать что-то, смешивая эти варианты).

    1. Срок действия всего в сети истекает через 1 неделю

      В .htaccess, расположенном в корне вашего сайта.

      <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 week"
</IfModule>

    2. Срок действия всего истекает через 1 день, но css истекает через 1 неделю, а изображения — через 1 месяц.

      <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 day"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
</IfModule>

    3. Что ваш сайт не разрешает кеширование, но в папке с ресурсами есть кеш на 1 месяц

      В /project/.htaccess:

      FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 1 Jan 2000 00:00:00 GMT"

      В/project/assets/.htaccess

      <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 month"
</IfModule>

    4. Вы также можете сделать это, как в примере выше, но с разными файлами .htaccess для каждой подпапки:

      • один в/project/assets/img/.htaccess
      • другой в/project/assets/css/.htaccess
      • другой в/project/assets/js/.htaccess


    В конечном счете, это зависит от того, что вы хотите кэшировать, но не бойтесь добавить 10, 20 или 30 строк этого стиля в .htaccess.

    • 8