WordPress – 网站性能优化,设置浏览器缓存静态资源
1 如何让浏览器缓存静态资源
在使用pagespeed.web.dev测试网站性能时,在测试的结果页面我们可以看到有一个采用高效的缓存策略提供静态资源。
在上图中所示的分析页面我们可以看到三个主要的信息:网址、缓存TTL、传输文件大小,其中缓存TTL就是表示静态资源在浏览器中缓存的时间。
为了浏览器主动缓存网站的静态资源,比如说图片文件、字体文件、js文件、css文件,避免每次都从服务器进行请求,需要在服务器端设置HTTP响应头,用来标志浏览器需要缓存某些静态资源。
以下是与缓存相关的标头:
- Cache-Control:用于控制资源的缓存机制。通过设置值为 public 或 private 来指定资源是否可以被缓存,并通过设置 max-age 指定资源应该被缓存的时间长度。
- Expires:允许指定一个过期时间,过期后,浏览器必须重新获取资源。
- ETag:允许服务器标识资源,并使用 If-None-Match 请求头进行缓存验证。
- Last-Modified:允许服务器指定资源最后修改的时间,并使用 If-Modified-Since 请求头进行缓存验证。
比如说:
Cache-Control: max-age=31536000
max-age 参数告诉浏览器它应该将资源缓存多长时间,单位为秒。以下示例将持续时间设置为 31536000,对应于 1 年:60 秒 × 60 分钟 × 24 小时 × 365 天= 31536000 秒。
通过在服务器中对对应文件设置相应的HTTP标头标志在浏览器中缓存静态资源。
2 WordPress网站的静态资源缓存
2.1 Nginx
如果你的服务器使用的Nginx进行代理,可以参考以下代码设置静态文件缓存
# 图片文件
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
error_log off;
access_log /dev/null;
}
# js,css文件
location ~ .*\.(js|css)?$
{
expires 12h;
error_log off;
access_log /dev/null;
}
# 字体文件
location ~ .*\.(eot|ttf|woff|woff2)?$
{
expires 180d;
error_log off;
access_log /dev/null;
}
2.2 Apache
如果你的服务器使用的Apache进行代理,可以参考以下代码设置静态文件缓存
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
3 合理的设置静态资源缓存
如果你的静态资源经常更新,可以将其缓存设置为 no-cache,但浏览器仍会缓存该资源,不过首先会与服务器进行检查,以确保资源仍然是最新的。也可以减少其expire的时长,比如说几个小时,避免影响网站的其他功能。所以说并不是缓存期越长越好。而是需要根据实际需求进行权衡,以决定资源的最佳缓存期。
参考链接
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:WordPress – 网站性能优化,设置浏览器缓存静态资源
原文链接:https://www.stubbornhuang.com/2729/
发布于:2023年07月18日 10:48:20
修改于:2023年07月18日 10:48:20
当前分类随机文章推荐
- WordPress - 在文章被复制时弹出弹窗提示转载注明原创 阅读3433次,点赞2次
- WordPress - 获取某个用户发表的文章数量 阅读2267次,点赞0次
- WordPress - get_sidebar函数,加载主题侧边栏模板 阅读1110次,点赞0次
- WordPress - get_post_type():获取当前文章或者给定文章类型 阅读2381次,点赞0次
- WordPress - get_edit_post_link函数详解 阅读1348次,点赞0次
- WordPress - get_footer函数,加载主题底部页脚footer模板 阅读1092次,点赞0次
- WordPress - 在用户登录页面添加自定义提示信息 阅读1864次,点赞0次
- WordPress - 插件OSS Upload与WP Editor.md/WP Githuber MD插件冲突,导致katex公式不正确显示的问题 阅读3449次,点赞0次
- WordPress - 纯代码在文章内容末尾添加当前文章同一分类下的随机推荐文章 阅读2700次,点赞0次
- WordPress - get_header函数,加载主题头部header模板 阅读1132次,点赞0次
全站随机文章推荐
- Centos7 - 安装CMake 阅读79次,点赞0次
- FFmpeg - 命令行参数与常用命令行 阅读673次,点赞1次
- 资源分享 - Jim Blinn's Corner - A Trip Down the Graphics Pipeline 英文高清PDF下载 阅读3291次,点赞3次
- 用MFC写一个简易的恶作剧QQ好友的聊天轰炸机 阅读2762次,点赞1次
- 资源分享 - Nonlinear Computational Geometry 英文高清PDF下载 阅读1802次,点赞0次
- 风铃发卡系统配置Payjs支付 阅读383次,点赞0次
- 资源分享 - Game Programming Gems 1 英文高清PDF下载 阅读2598次,点赞0次
- Pytorch - torch.topk参数详解与使用 阅读540次,点赞0次
- 资源分享 - 动手学深度学习(李沐 2020年05月08日)PDF下载 阅读2686次,点赞0次
- OpenCV - 打开视频文件,并对其中的每一帧图像进行Canny算子边缘化提取,并将结果保存为视频文件 阅读3222次,点赞0次
评论
169