夜枫

上一篇博文中加载的比较多图片和大文件资源，尤其是加载近3.5Mb的两款字体文件，网站速度明显慢了很多，服务器是4Mbps的带宽，加载这些资源确实有点费劲，于是想着怎么优化一下。

首先优化的是图片文件，我将博客的图片同步到static.yefengs.com，同步方式采用的是“当访问static.yefengs.com/wp-content/upload/abc.jpg”时，nginx发现static.yefengs.com域名上没有这个abc的文件，那么nginx将请求交给php，php访问yefengs.com/wp-content/upload/abc.jpg文件，并拉取下来，判断如果是jpg文件那么把jpg转完成webp格式文件，同时保持文件扩文件和路径一致，保存到static.yefengs.com服务器上。

以上的功能类似于一个简单的cdn的功能，这样的方式，原始的文件abc.jpg在yefengs.com上存储，通过首次访问，在static.yefengs.com同步转换存储了webp格式的文件，访问的时候访问wepb的图片，请看下图对比，jpg转webp格式的体积区别。

当然static.yefengs.com的服务器的速度当然选择比较快点的服务器，目前这台static服务器的带宽为6Mbps，感觉够用,就当部署这玩玩，如果仅仅是将jpg转换为webp,可同时部署到一台服务器上。

实现代码如下：
proxy.php文件放置在更目录，起代码如下(注意修改远程服务器基础URL地址)

想贴大段代码，发现排版混乱，即使使用 pre 标签来包裹，还是有问题，那么直接压缩包吧！

点击这里proxy.php.zip下载源码吧！替换掉里面的域名即可。

配置完proxy.php后配置nginx的伪静态文件，将下述配置添加到nginx的伪静态目录里，注意nginx里要去掉有关jpeg和js及其他文件的缓存配置信息，不然不生效

#    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
#    {
#        expires      30d;
#        error_log /dev/null;
#        access_log /dev/null;
#    }
#
#    location ~ .*\.(js|css)?$
#    {
#        expires      12h;
#        error_log /dev/null;
#        access_log /dev/null;
#    }

同时添加配置

# 允许指定的域名跨域访问
add_header Access-Control-Allow-Origin "https://yefengs.com";

# 允许的请求方法
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";

# 允许的请求头
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";

# 允许携带凭证（如 cookies）
add_header Access-Control-Allow-Credentials "true";

# 预检查请求的缓存时间（秒）
add_header Access-Control-Max-Age 86400;

# 尝试直接访问文件，如果不存在则交给PHP处理
location ~ .*\.(gif|jpg|jpeg|png|mp3|js|css|webp|woff|woff2|mp4)$
{
    expires      30d;
    try_files $uri $uri/ /proxy.php?$query_string;
}

最后替换wordpress图片的路径(网上搜索有关wordpress替换图片域名的内容)和设置中“文件的完整 URL 地址”路径为“https://static.yefengs.com/wp-content/uploads”。

至此，已经完成了网站稍许的优化，代码是临时学习写的，可能存在bug，欢迎留言讨论和改进。