这次优化后 Google PageSpeed Insights 评测结果已经比较满意了,网页版达到了 96。
博客是基于 WordPress 的,总结下到目前为止的优化:
一、前端
前端请求的资源主要包括 html 文本、Css、JS、图片。主要优化包括减少连接数、减少每次返回的资源大小、改变连接优先级。
1. 减少连接数
包括请求合并、图片合并(Css Sprite)、浏览器缓存。
通过 Better WordPress Minify 插件完成 CSS、JS 合并,几十个请求化为一个,减少这两类资源的请求数。
通过 Nginx 设置 Cache-Control 的缓存时间。
Java
1 2 3 4 5 |
location ~* \.(?:ico|css|js|gif|jpe?g|png|swf|woff)$ { expires 30d; add_header Pragma public; add_header Cache-Control "public"; } |
如果是 Apache,配置可见:2013 年 10 月优化。
2. 减小资源大小
包括 Gzip 压缩、图片无损压缩。
通过 Nginx 设置 html、Css、JS Gzip 压缩级别等。
Java
1 2 3 4 5 6 7 8 9 10 11 |
gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_min_length 256; gzip_http_version 1.1; gzip_types text/plain text/css text/x-component text/html application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/x-icon image/svg+xml image/jpeg image/gif image/png font/opentype; |
如果是 Apache,配置可见:2013 年 10 月优化。
通过 ImageOptim(Mac 版) 无所压缩图片或 https://tinypng.com/ 有损高比例压缩图片。
3. 按优先级、并发获取内容
JS 后置,通过 Better WordPress Minify 插件。
CSS import 用 link 等代替,目前采用的主题中有 Css 内 import Css 的情况,导致无法并发拉取内容,可直接替换内容或用 link 代替(可能有问题)。
二、后端
后端主要包括服务器本身性能以及程序处理。
1. 服务器优化
这次迁回国内主要也是因为 DigitalOcean 在国内不少城市访问速度过慢,甚至被屏蔽,在连接速度方面阿里云确实远远胜出。
阿里云 ECS(附 9 折优惠码:e5ndko) 只是普通硬盘,而之前的 DigitalOcean 则是固态硬盘,读取速度自然有差距,具体尚能测试对比。
2. WordPress 优化
主要通过缓存将动态网页请求改为直接取静态缓存内容,其他优化可见性能优化系列介绍。
通过更高效的 W3 Total Cache 插件完成静态缓存,替换了之前的 WP Super Cache 插件。
W3 Total Cache 设置中有 Page Cache、Database Cache、Object Cache 等,对应的 cache method 默认为 Disk。可通过安装 memcached 及 php5-memcache(注意不是 php5-memcached) 增加对 memcached 的支持,选择相应的 cache method 为 Memcached 提高性能。