您现在的位置是：首页 > WordPress教程WordPress教程

WordPress怎么使用浏览器缓存？

WP集市 2025-08-21 【WordPress教程】 1945人已围观

咱先唠明白：浏览器缓存是个啥？简单说，就是你第一次访问网站时，浏览器会把图片、CSS、JS这些“死文件”存到你电脑里；下次再打开，直接从本地调，不用重新从服务器下载——速度这不就上来了？用户体验蹭蹭涨，搜索引擎也喜欢，一举两得！

一、新手首选：插件搞定，不用写代码！

如果你是“代码恐惧症患者”，直接上插件，三步搞定，比泡方便面还简单。

推荐插件：LiteSpeed Cache（免费又能打）、W3 Total Cache（功能全，但设置稍复杂），咱以LiteSpeed Cache为例，毕竟多数人用这个。

装插件：后台→插件→安装插件，搜“LiteSpeed Cache”(简称LSCache)，装上激活。
找浏览器缓存设置：左边菜单点“LiteSpeed Cache”→“缓存”→“浏览器缓存”，看到没？第一个选项“启用浏览器缓存”，勾上！
设过期时间：下面有一堆文件类型，比如CSS、JS、图片，过期时间照着填：
- CSS/JS：建议30天（“30 days"），因为这些文件你可能会改，太长了用户看不到新的。
- 图片（JPG/PNG/GIF）：一年（“365 days"），图片一般不咋改，存久点没事。
- 字体文件（WOFF2那些）：也设一年，字体这玩意儿基本不动。
- HTML网页：别太长！1小时（“1 hour"）就行，不然你改了文章，用户看到的还是老的，尴尬不？

哦对了！重点来了：如果你改了CSS/JS，比如换了网站颜色，用户那边可能还显示老样式，因为浏览器还在用缓存。咋办？简单！改文件名时加个“版本号”，比如原来叫style.css，改成style-v2.css，或者引用的时候加个参数：<link rel="stylesheet" href="style.css?v=2">——浏览器一看?v=2，就知道这玩意儿更新了，会重新下载，这招屡试不爽！

二、手动党看这里：改.htaccess文件，更灵活！

如果你觉得“插件太臃肿，我自己来”，行，手动改服务器配置文件.htaccess，这文件在你网站根目录（用FTP或者主机面板的文件管理器能找到）。

警告：改之前一定备份！一定备份！一定备份！改错了网站打不开，哭都来不及！

用记事本打开.htaccess，在最后面加上这段代码（复制粘贴就行，不用懂原理）：

# 开启浏览器缓存
<IfModule mod_expires.c>
    ExpiresActive On
    # CSS/JS - 30天
    ExpiresByType text/css "access plus 30 days"
    ExpiresByType text/javascript "access plus 30 days"
    ExpiresByType application/javascript "access plus 30 days"
    # 图片 - 1年
    ExpiresByType image/jpeg "access plus 365 days"
    ExpiresByType image/png "access plus 365 days"
    ExpiresByType image/gif "access plus 365 days"
    ExpiresByType image/svg+xml "access plus 365 days"
    # 字体 - 1年
    ExpiresByType font/woff2 "access plus 1 year"
    # HTML - 1小时
    ExpiresByType text/html "access plus 1 hour"
</IfModule>

# 设置缓存控制（和上面互补，有的服务器只认这个）
<IfModule mod_headers.c>
    # 图片缓存1年（31536000秒=1年）
    Header set Cache-Control "public, max-age=31536000" "expr=%{CONTENT_TYPE} =~ m#image/.*#i"
    # CSS/JS缓存30天（2592000秒=30天）
    Header set Cache-Control "public, max-age=2592000" "expr=%{CONTENT_TYPE} =~ m#text/css|application/javascript#i"
    # HTML缓存1小时（3600秒）
    Header set Cache-Control "public, max-age=3600" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
</IfModule>

加完保存，上传回服务器，搞定！这段代码的意思就是“告诉浏览器：这些文件你存多久，别老来问我”，和插件效果一样，但更轻量。