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 没有任何问题。

    这些类型的规则不会显着影响服务器性能，访问时间应该没有超过几分之一毫秒的差异，这是正常和推荐的做法。

    您找到的行数较少的示例仅适用于具有扩展名的文件（图像不一定从给定的扩展名提供，aarchivo.php可能会生成图像），并给出了确切的到期日期，这不是您要查找的。


    对我来说，这是新事物，我不知道如何真正指定浏览器缓存

    什么是缓存？当您第一次访问一个页面时，您的浏览器会下载所有资源（html、图像、css、js 等）并将它们存储在一个特殊的本地文件夹中。然后，如果您再次尝试访问该页面，而不必再次下载所有内容，浏览器将尝试使用本地副本，从而减少页面加载时间，从而避免必须下载已经可用的内容。

    那么它是如何控制的呢？何时使用本地副本以及何时查看服务器是否有新版本的文件？虽然它在HTTP 缓存文章中有很多详细信息，但要知道的重要一点是，您可以配置您希望资源（文件）已经在客户端（浏览器）的缓存中多长时间，而不是返回它。问服务器。这有利于加载速度更快，并且如果修改了这些文件中的任何一个，则用户将看到旧版本，直到缓存过期。这就是为什么指定一个合理的时间很重要的原因，具体取决于您的网站状况、您希望更新每个文件的频率以及使用最新版本是否重要。

    它是如何配置的。对于每个文件，服务器都会发送headers。在这些标头中，指定它的行为方式：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