WordPress动静分离方法汇总
侧边栏壁纸
  • 累计撰写 57,133 篇文章
  • 累计收到 0 条评论

WordPress动静分离方法汇总

James
2020-10-06 / 0 评论 / 79 阅读 / 正在检测是否收录...

本帖是WordPress性能优化的一个经验贴,原文链接:https://tlanyan.me/wordpress-seprate-static-files-methods/,大佬轻喷

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

WordPress动静分离方法

动静分离,即将js脚本、css样式表、图片图标、字体等静态资源文件托管在不同的域名上,从而浏览器可以同时下载页面内容和静态文件,以达到网页加速的目的。

下面介绍本人所知的WordPress动静分离方法,并指出其优缺点。作为例子,下文中总是以tlanyan.me为WordPress博客主域名,static.tlanyan.me为静态资源用的域名。

WordPress域名替换

我们可以在WordPress页面输出前,将静态资源url替换成静态域名,从而达到动静分离的目的。

具体操作为:

1.创建动态域名的nginx配置文件,输入如下内容:

server{

listen80;

server_namestatic.tlanyan.me;#请替换成自己的域名

return301https://static.tlanyan.me$request_uri;#请替换成自己的域名

}

server{

listen443sslhttp2;

ssl_certificatessl证书路径;

ssl_certificate_keyssl密钥路径;

access_log/var/log/nginx/static.tlanyan.access.logmainbuffer=64kflush=30s;

error_log/var/log/nginx/static.tlanyan.error.log;

root/var/www/tlanyan;#请修改成网站实际目录

#非静态资源转发到主站。此配置涉及到安全问题,非常重要,请务必配置!!

location/{

xx

}

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

functionreplace_domain($content){

xxx

}

add_action(init,replace_domain);

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

修改WordPress上传域名

对于WordPress,除了主题所用的css、字体等静态资源,主要静态资源是用户上传的图片和文件。好消息便是,用户可以自定义上传目录和上传的域名,从而轻松做到静态分离。

操作方法为:

1.登录网页后台,打开https://你的域名/wp-admin/options.php(只能手动在浏览器打开),找到upload_path和upload_url_path两个选项,第一选项用来设置上传图片存放的文件夹(默认是wordpress安装目录/wp-content/uploads),第二个是设置文件的域名:

WordPress自定义上传文件域名

WordPress自定义上传文件域名

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

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

server{

listen80;

server_namestatic.tlanyan.me;#请替换成自己的域名

return301https://static.tlanyan.me$request_uri;#请替换成自己的域名

}

server{

listen443sslhttp2;

ssl_certificatessl证书路径;

ssl_certificate_keyssl密钥路径;

access_log/var/log/nginx/static.tlanyan.access.logmainbuffer=64kflush=30s;

error_log/var/log/nginx/static.tlanyan.error.log;

root/var/www/tlanyan/wp-content/uploads;#请修改成网站实际目录,注意根目录为wp-content/uploads

}

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

4.经过上述配置,新文章中的图片会使用静态域名,但旧文章还是原来的链接。我们可以通过数据库批量更新链接,操作为:登录数据库,执行这个SQL语句:updatewp_postssetpost_content=replace(post_content,tlanyan.me/wp-content/uploads,static.tlanyan.me);。注意语句中的tlanyan.me域名请换成你自己的域名。

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

Nginx重定向

如果我们使用Nginx作为前端服务器,可以通过Nginx重定向功能将所有的静态资源请求转到静态域名。

操作如下:

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

2.在主域名的Nginx配置文件对静态资源做如下转发处理:

server{

#其他配置

#静态资源文件重定向

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)${

return301https://static.tlanyan.me$request_uri;#static.tlanyan.me请改成你的静态域名

}

#其他配置

}

配置好后记得重启Nginx。

Nginx内容替换

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

操作如下:

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

location~.php${

#一些fastcgi配置

#替换配置

sub_filter_onceoff;

#请修改成自己的域名

sub_filterhttps://tlanyan.me/wp-content/uploadshttps://static.tlanyan.me;

}

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

总结

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

方法


-----------------------------------------------------
网友回复:

引用:电光发表于2020-10-517:05

楼下来举报一个。


网友回复:

引用:蝙蝠侠发表于2020-10-517:09

太长,看起来好复杂


网友回复:

楼主发的自己原创文章,也是有用的文章,为啥有人要举报?


网友回复:

引用:学到了么发表于2020-10-517:11

支持大佬


网友回复:

引用:fule发表于2020-10-517:11

楼主发的自己原创文章,也是有用的文章,为啥有人要举报?


网友回复:

引用:尼欧一方通行发表于2020-10-517:19

用oss不就是动静分离吗


网友回复:

引用:fule发表于2020-10-517:11

楼主发的自己原创文章,也是有用的文章,为啥有人要举报?


网友回复:

引用:tlanyan发表于2020-10-517:11

介绍了四种方法啊,一般人只选一种就好了


网友回复:

引用:004发表于2020-10-517:41

怎么看着乱乱的..排版搞一下哈..


网友回复:

https://cloud.tencent.com/developer/article/1607761


网友回复:

没用的,生成网页是mysql数据连接太多是慢的主要原因,


网友回复:

引用:蝙蝠侠发表于2020-10-517:43

我用张戈的一段代码弄了,没改这么多东西


网友回复:

引用:googlebot2发表于2020-10-517:52

没用的,生成网页是mysql数据连接太多是慢的主要原因,

0