WordPress动静分离方法汇总

提供vpsmjj信息WordPress动静分离方法汇总是很好的服务器交流推荐32247文章

本帖是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 {
    listen 80;
    server_name static.tlanyan.me; # 请替换成自己的便宜的域名

    return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的便宜的域名
}

server {
    listen 443 ssl http2;
    ssl_certificate ssl证书路径;
    ssl_certificate_key ssl密钥路径;
    access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=30s;
    error_log /var/log/nginx/static.tlanyan.error.log;

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

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

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

function replace_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 {
    listen 80;
    server_name static.tlanyan.me; # 请替换成自己的便宜的域名

    return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的便宜的域名
}

server {
    listen 443 ssl http2;
    ssl_certificate ssl证书路径;
    ssl_certificate_key ssl密钥路径;
    access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=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语句:update wp_posts set post_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)$ {
    return 301 https://static.tlanyan.me$request_uri; # static.tlanyan.me请改成你的静态便宜的域名
  }
  # 其他配置
}

配置好后记得重启Nginx。

Nginx内容替换

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

操作如下:

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

location ~ .php$ {
  # 一些fastcgi 配置

  # 替换配置
  sub_filter_once off;
   # 请修改成自己的便宜的域名
  sub_filter ‘https://tlanyan.me/wp-content/uploads’ ‘https://static.tlanyan.me’;
}

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

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

本帖是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 {
    listen 80;
    server_name static.tlanyan.me; # 请替换成自己的便宜的域名

    return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的便宜的域名
}

server {
    listen 443 ssl http2;
    ssl_certificate ssl证书路径;
    ssl_certificate_key ssl密钥路径;
    access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=30s;
    error_log /var/log/nginx/static.tlanyan.error.log;

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

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

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

function replace_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 {
    listen 80;
    server_name static.tlanyan.me; # 请替换成自己的便宜的域名

    return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的便宜的域名
}

server {
    listen 443 ssl http2;
    ssl_certificate ssl证书路径;
    ssl_certificate_key ssl密钥路径;
    access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=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语句:update wp_posts set post_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)$ {
    return 301 https://static.tlanyan.me$request_uri; # static.tlanyan.me请改成你的静态便宜的域名
  }
  # 其他配置
}

配置好后记得重启Nginx。

Nginx内容替换

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

操作如下:

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

location ~ .php$ {
  # 一些fastcgi 配置

  # 替换配置
  sub_filter_once off;
   # 请修改成自己的便宜的域名
  sub_filter ‘https://tlanyan.me/wp-content/uploads’ ‘https://static.tlanyan.me’;
}

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

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

网友回复:

注册 楼下来举报一个。

tlanyan 为啥举报?

电光 太长,看起来好复杂

tlanyan 好久没人发干货了

蝙蝠侠 大佬威武,学习了,哈哈

蜂蜜柚子茶 介绍了四种方法啊,一般人只选一种就好了

cquyf 支持大佬

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

电光 感谢

注册 我也没看懂举报的逻辑在哪。论坛里挺多人用wp,我这个帖子至少有帮助才是

注册 支持帮顶,不明为何举报。

tlanyan 用oss不就是动静分离吗

哥们 这个当然算

尼欧一方通行 文章太长,论坛自动截断

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

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

004 论坛里排版不了,内容太长还被截断了,建议去原文看,或者先收藏,用的时候再看

蝙蝠侠 https://cloud.tencent.com/developer/article/1607761

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

注册 张戈的方法是文中的一种,文章里四种方法,看起来就多了

注册 只是性能优化的一步,网页生成慢的话改善有限

tlanyan 学习一下

部分来自互联网,侵权联系删除

www.a1fz.com A1fz网专注于福利分享,各种破解软件学习资料,视频教程等等,如有侵权告知管理员删除
A1fz.com,福利吧,宅男福利,宅男,福利社,福利,有福利 » WordPress动静分离方法汇总

发表评论