优化网站Pagespeed Insights分数提到到90以上

2018-08-28 约 987 字 预计阅读 2 分钟


昨天大体全部弄好基本功能后,交给Google Pagespeed Insights审核,结果不佳。

今早一步步处理。

先看一下优化前的分数

只有58分,一大把建议,依次解决。首先是要解决压缩问题



通过google,了解nginx的设置,设置如下

用编辑器打开nginx设置文件
sudo nano /etc/nginx/nginx.conf

找到gzip字样,将几个gzip选项全部打开,如下
gzip on;

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

接下来有个cache的建议,有些不变的文件如字体、图片、video等可以设置长的过期时间,用户再访问网站时就不必刷新了。

Google找到一个字体文件需要设置。初时我用以前apache2的处理方法,设置.htaccess文件,结果怎么测试也没变化,再一google,原来nginx完全不用.htaccess文件。需要编辑虚拟主机文件
sudo nano /etc/nginx/sites-available/jesselau.com

加上这么几行
location ~* \.(css|gif|ico|jpeg|jpg|js|png|woff)$ {
expires max;
log_not_found off;
}

存盘重启nginx
sudo service nginx restart

下一个建议是清除首屏内容中呈现的Javascript和CSS,什么意思呢。就是现在偏重于手机浏览的优化,要求在首屏内容出现前尽量将网页内容减小,在不影响视觉的情况下延后或异步运行javascript和css

继续google找到两个插件Async JavaScriptSpeed Up - Optimize CSS Delivery,这样我的常用插件又多了两个成员,升级到5员。HUGOMORE42



激活设置两插件后再测试一下,立马提升到75分



还剩两个css文件因为是模板文件,是通过修改源文件产生的,故此上述两插件没起到作用,检查了一下style-Blue.css文件很小,可以直接内嵌在网页里,减少访问新网络文件的时间。在模板选项的custom css中将style-Blue.css贴进去



试着将style.css延后运行,测试结果100分,但因为这是主文件,视觉上明显有延后。保持style.css不变重新提交测试,达到91分



 

还有一些零星建议,主要是google认为压缩率还没到最劲,如果再将图片压缩多一点,还能省个几到十几kb的样子。这个优化无止境,本人也不是强迫症患者,从来不想非要100分不可。

到另一个专业测速网站pingdom再测一下,双重保障

A级,94分,比95%的测试网站速度快,OK啦。

至此,对此网站应该不会有什么源码级的改动了。将权限和文件属性设置一下,以免日后用username登录时误操作。
cd /var/www

sudo chown www-data:www-data -R *

sudo find . -type d -exec chmod 755 {} \;

sudo find . -type f -exec chmod 644 {} \;

author

Jesse Lau

网名遁去的一,简称遁一。2012年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解