跳到主要内容

WordPress - 利用浏览器缓存

如果您最近进行了网站速度测试或想提升网站速度，您可能见过或听说过 利用浏览器缓存 这个术语。那么，什么是利用浏览器缓存？

什么是利用浏览器缓存？​

利用浏览器缓存指的是您网页浏览器内的缓存设置。当通过浏览器请求网站时，它会将脚本、图片、HTML 等项目下载到浏览器的本地缓存中。浏览器会使用这些临时存储的内容，当再次通过浏览器访问该网站时，能够快速调用它们。这样可以避免浏览器每次访问时都单独请求加载这些资源。

既然了解了利用浏览器缓存的含义，让我们来看看如何将其转化为您的优势。以下是为您的 WordPress 网站实现该功能的两种主要方法。

利用浏览器缓存 - .htaccess 方法​

我们将介绍第一种方法，手动将 Cache-Control 头部和 Expires 头部添加到您的 .htaccess 文件中。

  1. 登录 cPanel。有两种方式访问您的 cPanel。

    • 选项 1 ：直接访问您的 cPanel。
    • 选项 2 ：通过您的客户门户访问 cPanel。

  2. 登录您的客户门户。

  3. 点击左侧菜单中的 Hosting（主机）。
    客户门户 - Hosting 菜单

  4. 如果您的账户中只有一个 单一主机套餐，请向下滚动到 快速链接 部分。

    如果您的账户中有 多个主机套餐，请在主机套餐页面找到您想管理的主机套餐，然后点击其 管理 按钮。
    主机标签 - 管理按钮

  5. 在 快速链接 部分，点击 cPanel 按钮。
    主机菜单 - 快速链接 - 启动 cPanel

  6. 进入 文件 部分，然后点击 文件管理器。
    Hostgator cPanel 文件管理器

  7. 在左侧菜单点击 public_html，然后找到 .htaccess 文件。

  8. 右键点击 .htaccess 文件，选择 编辑。
    文件管理器 .htaccess
    如果您要为主域名启用浏览器缓存，该域名的文件路径是 home/public_html。如果需要定位附加域的文件路径，可以通过 cPanel 中的附加域图标，在 Doc Root 栏找到。

  9. 在弹出的窗口中点击 编辑 进入编辑器。
    文件管理器 .htaccess 编辑

  10. 进入 .htaccess 文件编辑模式后，将以下 Cache-Control 头部和 Expires 头部代码逐行粘贴进去。

BEGIN BROWSER CACHING

<ifModule mod_expires.c>  
ExpiresActive On  

# Images  
ExpiresByType image/jpeg "access plus 1 year"  
ExpiresByType image/gif "access plus 1 year"  
ExpiresByType image/png "access plus 1 year"  
ExpiresByType image/webp "access plus 1 year"  
ExpiresByType image/svg+xml "access plus 1 year"  
ExpiresByType image/x-icon "access plus 1 year"  

# Video  
ExpiresByType video/webm "access plus 1 year"  
ExpiresByType video/mp4 "access plus 1 year"  
ExpiresByType video/mpeg "access plus 1 year"  

# Fonts  
ExpiresByType font/ttf "access plus 1 year"  
ExpiresByType font/otf "access plus 1 year"  
ExpiresByType font/woff "access plus 1 year"  
ExpiresByType font/woff2 "access plus 1 year"  
ExpiresByType application/font-woff "access plus 1 year"  

# CSS, JavaScript  
ExpiresByType text/css "access plus 1 month"  
ExpiresByType text/javascript "access plus 1 month"  
ExpiresByType application/javascript "access plus 1 month"  

# Others  
ExpiresByType application/pdf "access plus 1 month"  
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"  
</IfModule>  
# END BROWSER CACHING
  1. 代码添加完成后，点击屏幕右上角的 保存更改 按钮。

恭喜！您已成功利用浏览器缓存！

利用浏览器缓存 - WordPress 插件方法​

既然我们已经介绍了如何手动利用浏览器缓存，接下来介绍一个可以安装的 WordPress 插件来完成相同任务。

W3 Total Cache

  1. 登录 WordPress 仪表盘，将鼠标悬停在“插件”菜单上。
  2. 选择 添加新。
    Wp 仪表盘插件添加新插件
  3. 在页面中间靠右的位置搜索 W3 Total Cache，然后点击 立即安装。
    W3 Total Cache
  4. 点击 启用。
    W3 Total Cache 启用
  5. 启用后，在已安装插件列表中找到 W3 Total Cache，点击 设置 链接。
    W3 Total Cache 设置
  6. 向下滚动到 浏览器缓存 部分，确保浏览器缓存已启用。
    W3 Total Cache 启用浏览器缓存
  7. 启用 浏览器缓存 后，您还需要完成 W3 Total Cache 插件的设置。在仪表盘左侧的 性能 部分，选择 浏览器缓存 选项。
    W3 Total Cache 浏览器缓存
  8. 在 浏览器缓存 部分的 常规设置 下，勾选以下选项：
    W3 Total Cache 常规设置
  • 设置最后修改头（Set Last-Modified Header） — 应启用 CSS 和 JS 文件的最后修改时间头（Last-Modified Header）。
  • 设置过期头（Set expires header） — 过期头表示网页实体（HTML 文档、CSS 文件、图片等）的缓存有效期。此头指定的时间长度控制缓存的有效时间。
  • 设置缓存控制头（Set cache control header） — 缓存控制头是鼓励浏览器缓存的附加头。
  • 设置实体标签（ETag）（Set entity tag (ETag)） — ETag 是一种验证标签，使浏览器缓存更高效。
  • 设置 W3 Total Cache 头（Set W3 Total Cache header） — 这是 W3TC 设置的头，用于帮助识别已优化的文件。
  • 启用 HTTP (gzip) 压缩（Enable HTTP (gzip) compression） — Gzip 压缩将减少基于文本文件的下载时间。
  1. 选中以上选项后，点击 保存所有设置 按钮，即可完成设置！