简单记录一次页面加载速度优化

之前有写过一篇小白向的 WordPress 网站页面加载速度优化教程:

当时用的是免费版的 Blocksy 主题,优化起来非常容易,只需要使用 WP Rocket 插件就可以了。后来不知道为什么,使用 Blocksy 主题时莫名其妙会被注入一个 .php 文件,于是只好更换主题。

前段时间换到现在这个主题后,发现 PageSpeed Insights 反馈页面加载速度不太行,按照上面那份教程优化了一下后也不太理想。当时 PageSpeed Insights 给出的反馈建议主要有两个:

  1. 服务器启用文本压缩
  2. 采用高效的缓存策略提供静态资源

我搜了一下资料,发现要解决上述这两个问题,需要修改 NGINX 配置文件,这就到了我目前的知识盲区了;前些天请教了一下 Nico,让他帮忙出出主意。本文简要记录 Nico 给我这个 WordPress 博客网站的优化方案,仅供参考。

服务器启用文本压缩

修改 NGINX 配置文件:

Vi /etc/nginx/nginx.conf

在 http { 代码区块内添加以下代码:

# Enable gzip
 gzip on;
 gzip_min_length 1k;
 gzip_http_version 1.1;
 gzip_comp_level 5;
 gzip_types application/x-javascript text/css application/javascript text/javascript text/plain text/xml application/json application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/xml font/eot font/opentype font/otf image/svg+xml image/vnd.microsoft.icon image/x-icon image/png image/jpeg image/gif image/webp;
 # Enable static file browser caching by adding expires http header

重启 NGINX:

systemctl restart nginx

采用高效的缓存策略提供静态资源

往 NGINX 配置文件中添加以下代码,放置在 # Enable gzip 代码块后面即可:

 map $sent_http_content_type $expires {
  default off;
  text/css 365d;
  application/javascript 365d;
  application/font-woff 365d;
  ~font/ 365d;
  ~image/ 365d;
 }
 expires $expires;

重启 NGINX:

systemctl restart nginx

优化效果

执行上述操作后,PageSpeed Insights 的测试分数有明显改善:

桌面端
移动端

题图:Image by pikisuperstar on Freepik


评论

4 responses to “简单记录一次页面加载速度优化”

  1. Blocksy 免费版 是真的挺棒的
    顺便吐槽下验证码,超时了好几次(哭

    1. 谢谢反馈!看了一下,默认超时时长是30秒,这个估计是从你打开这个页面开始算的。我先观察一段时间,看看这是否是一个普遍存在的问题。

  2. 沉舟侧畔 的头像
    沉舟侧畔

    PageSpeed Insights是从国外环境访问目标站点的速度,跟从中国访问的速度相比差距估计比较大吧?

    1. 你说的对;不过我用 PageSpeed Insights 并不只是看页面加载速度,我主要是看它给的反馈,这样就知道哪些地方还可以进一步优化。

发表评论

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

了解 Justin写字的地方 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读