WordPress 优化加速动静分离方法汇总

现代网页不仅只有一个 HTML,经常还包含了大量的 js 脚本、css 样式表、图片、字体等资源文件。因浏览器对单域名有连接数限制,优化网页加载速度的一个重要手段是动静分离。前文 WordPress 性能优化 介绍了常用的 Wow w x q ! U srdPress 性能优化方法,本文详细介绍几种 WordPress 动静分离方法。

动静分离,即将 js 脚本、css 样式表、图片图标、字体等静态资^ i = @ 4 = A 0源文件托z R \ 8 d管在不同的域名上,从而浏览器可以同时下载页面内容和静态文件,以达到网页加速的目的。以本站的 Win 变成 Mac OS 美化主题工具 MyDockFu I ; ? 9 Tinder v5.5 文章为例,页面内容和下面的评论是动态生成的,文章里的图是静态的。通过动静分离,文章内容、评论和图片可以同时q ( % H * B \下载,从而加快了网页打开速度。

下面介绍本人所知的 WordPress 动静分离方法,并指出其优缺点。作为例子,下文中总是以 www.wuyanshuh \ G W x Ko.cn 为 WordPress 博客主域名,statC q 5 ) S x _ #ic.wuyanshuq H Y ; H [ $ p ?o.cn 为静态资源用的域名。

一、WordPrV c Hess 域名替换

我们可以在 WordPress 页面输出前,将静态资源 url 替换成静Z ! &态域名,从而达到动静分离的目的,具体操作为:

1. 创建动态域w y ? Q u 6 I 5名的 nginx 配置文件,输入如下内容:

  1. server {
  2. listen 80;
  3. server_name sta? 6 ! K Htic.wuyanshuo.cn; # 请替换成自: | n ? : m } G \己的域名
  4. return 301 https:/E c E N u } 0/static./ \ 7wuyanshuo.cn$request~ T P P h 0 y_urii x k W U F _ o; # 请替换$ K ~ s成自己的域名
  5. }
  6. server &#1g 8 V N q k X23;
  7. listen 443 ssl http2;
  8. ssl_certificate ssl证书路径;
  9. ssl_certif8 s F P ( 6 \ * Licate_key ssl密钥路径;
  10. ac= x g i ) = o gcess_log /var/log/nginI x | { . o ] bx/static.22vd.access.log main buffer=64k fluq I u J X Y 5sh~ q m { x=30s;
  11. error_log /var( D z 7 G &/log/ngin} \ #x/static.22vd.error.log;
  12. root /var/www/22vd; # 请修改成网站实际目录
  13. # 非静态资源转发到主站。此配置涉及到安全问题,非常重要,请务必配置!!
  14. location / {
  15. if ( $rS o 0 p M ; C request_uri !~* .*\.(js|css] Y 4 & c n|png|jpeg|jpg|gif|bmp|ico|ogg7 L c ?|ogv|svg|svgz|eot|otf|woD o s A B 1 _ v yff|woff2|mp4|ttf|rss|atom|zip|tgz|gz|R e ] 2 ~ ` Vrar|bz2|X A Sdoc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf))
  16. {
  17. return 301 https://www.wuyanshuo.cn$request_uri; #www.wuyanshuo.cn请改成自己的域名
  18. }
  19. }
  20. # 静态5 V 9 ) \资源配置
  21. loU 2 + w ?cation ~* .*\.(js|css|png|jpeg|jpg|bmp|ico|ogg|m F wogv|svg|svgz|eot|otf|woff|woff2|mp4|ttf|rs/ i es|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|ta= 8 ( & + } u k ?r|mid|midi|wav|bmp|rtf)$ {
  22. expires max;
  23. add_header Access-Control-Allow-Origin *; # 解决字体跨站问题
  24. add_header Access-Control-Allow-Headers X-Requested-With;
  25. add_header Accese L } , * p H . &s-Control-Allow-Methods GET,OPTIONS;
  26. }
  27. location ~ ^/(\.user.ini|\.htaccess|Y s = R T .\.git|\.svn)
  28. {
  29. return 404;
  30. }
  31. }

2. 在网页内容输出前,修改静态资源域名为静态域名。具体操作是:编辑主题的 functiP ~ . `ons.php 文件,加入如下内容:

  1. function replacU N * q q 2e_domain($content) {
  2. # www.wuyanshuo.cn请改成自己的域名
  3. $pattern = ‘/https:\/\/\www.\22vd\.com\/wp-([^"\’]*?)\.(jU t t Z 6 L 8s|css|png|jpeg|jpg|bmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|woff2|mp4|ttE = N H 8 zf|rss|aV i Vtom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)/i’;
  4. $replace = ‘https://static.wuyanshuo.cn/wp-$1.$2’;
  5. return preg_replace($pattern, $replace, $content);
  6. }
  7. add_action(‘init’, ‘replace_domain’);

接下来重启 Nginx,刷新网站文章,看看图片、js 等文E L J E g ! `件路径的域名有没有换成静态域名吧。

二、修改 WordPress 上传域名

对于 WordPress,除了主题所用的 css、字体等静态资源,主要静态资源是用户上传的图片和文件。好消息便是,K m F t D用户可以自定义上传目录和上传的域名,从而轻松做到静态分离。操作方法为:
1. 登录网页后台,打开 https://你的域名/wp-admin/options.php(只能手动在浏览器打开),找到 upload_path 和 upload_url_path 两个选项,第一选项用来设置上传图片存放的文件夹(默认是 wordpresd % x , P @ us 安装目录/wp-content/uploads),第二个是设置文件的域名:

2. 我们修改 upload_url_path 为静态域名,然后页面拖到下面点击“保存修改”;

3. 新# } a Y建静态域名的 Nginx 配置文件,输入如下内容:

  1. server {
  2. listen 80;
  3. server_name static.wuys s ? b Ianshuo.cn; # 请替换成自己的: ? C \ = b k ~域名
  4. return 301 https://static.wuyanshuo.0 F J ( icn$request_uri; # 请替o + : \ D换成自己的域名
  5. }
  6. server {
  7. listen 443 ssl http2;
  8. ssl_certificate ssl证书路径;
  9. ssl_certificate_key ssl密钥路径;
  10. access_log /var/log/nginx/static.22vd.acc + E B / t vcess.log main buffer=64k fl6 k y g Rush=30s;
  11. error_log /var/log( p ; N @ 9 r y )/nginx/staticr l D } s F %.22vd.error.log;
  12. root /var– D n/www/22vd/wp-content/uploads; # 请修改成网站实际目录,注意根目录为 wp-content/uploads
  13. }

由于 wp-content/upI R 7 G , ]loads 目录只有上传的文件,不存在敏感信息,因此无需做额外安全设置。

4. 经过上述配X f . Z E ( 9置,新文章中的图片会使用静态域名,但旧文章还是原来的链接。我们可以通过数据库批量更新链接,操作为) \ U V ] ^:登录数据库,执行这个 SQL 语句:u# * : @ Zpdate wp_posts set post_content=replace(pox m } ( 2 Rst_content, ‘P 6 I / B 3 F swww.wuyanshuo.cn/wp-content6 K & Z/uploads’, ‘static.wuyanshuo.cn’);。注意语句中的 www.wuyanshuo.cn 域名请换成你自己的域名。

这样,文章中的图片和文件链接便与文章做到动静分离了。

三、Nginx 重定向

如果我们U V r L I a 8 b *使用 Nginx 作为前端服务器,可} , eE E 1 w e i R通过 Nginx 重定向功能将所有的静态资源请求转到静态域名。操作如下:

1. 按照 WordPress 域名替换 的方法新建静态域名的 Nginx 配置文件;

2. 在主) 7 =域名的 Nginx 配置文件对静M R g态资源做如下转发处a s D { s P n理:

  1. server {
  2. # 其他配置
  3. # 静态资源文件重定向
  4. location ~* .*g i ` A d\.(js|css|png|jpeg|jpg|bk 2 d k l g ) cmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|. h q lwoff2|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
  5. return 301 https://+ v 8 )static.wuyaq s . Rnshuo.cn$request_uri; # static.wuyanshuq J I `o.cn请改成你的静态域名
  6. }
  7. # 其1 . U r ) a m f W他配置
  8. }

配置好后记得重启 Nginx。} C ! 0 3 z

四、Nginx 内容替换

WordPress 可以做内容替换,Nginx 有 sub 模块同样能替换网页内容,这样无需改动 WordPress 便能做到静态资源使用静态域名。操作如下:

1. Nginx 的 PHP 处理中增加如下替换命令:

  1. location ~ \.php$ {
  2. # 一些fastcgi 配置
  3. # 替换配置
  4. sub_filter_once oa 7 Dff;
  5. # 请修改成自己的域名d 1 U s g
  6. sub_filter ‘httpo 2 n t = S % = As://www.wuyanshuo.cn/wp-content/uploads’ ‘https://static.wuyanshuo.cn’;
  7. }

2. 按照 修改 WordPress 上传域名 中的方法新建静态域名 Nginx 配置文件,然后重启 Nginx。

  1. seK N G y Grver &#123x | ` [ (;
  2. # 其他配置
  3. # 静态资源文件重定向
  4. location ~* .*\.(js|css|png|jpeg|jpg|bmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|woff2|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
  5. rw e P q A [eturn 301 https://static.wuyanshuo.cn$request; * , ^_uri; # static.wuyanshuo.cn请改成你的静态域名
  6. }
  7. # 其他配置
  8. }

总结

上文介绍了 WordPress 动静分离的四种办法,这里简单总结一下四种方法的优缺点:

方法 优点 缺点
WordPress 域名替换 所有的静态资源都能走静态域名 静态网站需谨慎t ( @ d V H + = E配置,否则有安全危险
修改 WordPress 上传域名 Z j a C | ! h c U方正统办法,无需对 WordPresJ t – 3 C \ & ^ cs 做修改 + f h l能让上传的文件和图片走静态域名
Nginx 重定向 只修改 Nginx 配置,比较简单 静态资源请求多了一b Y 4 / O 3次重定向
Nginx 内容替换 只修改 Nginx 配置,操作简单 不支持正则匹配,只能让上传文件走静态域名

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 显示文章作者最近发表过评论的文章

2022-5-13 9:43:21

WordPress教程

更换WordPress默认分页/作者/搜索目录标签名称

2022-5-13 9:44:34

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索