网站稍微优化了一番,速度稍许提升
先来这全景照片,这是月初在西宁附近的村庄拍摄的,金黄色的油菜花海蔚为壮观。
上一篇博文中加载的比较多图片和大文件资源,尤其是加载近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,欢迎留言讨论和改进。