作为一个全面的 WordPress 性能优化教程,本文旨在帮助读者排查 WordPress 网站的性能问题,同时也提供网站前端优化加速的建议。
如果你曾经遇到过 WordPress 管理界面加载缓慢、「MySQL 服务器崩溃」、网页一直无法加载等情况,或者你预计网站的流量将要大涨,相信本教程会对你有益。
1. 查看网站前端性能指标
通常情况下,网站加载缓慢是由于网页规模过大引起的,而且现在的大多数网页,都包含许多图片、Flash、视频以及 JS 文件,这些元素都会给网络加载带宽造成压力,进而导页面打开缓慢、用户体验差的问题。
如果你准备认真地解决这个问题,你需要安装部署 Firefox 浏览器,Firebug 扩展程序 、Yslow 插件以及 Browser Insight。
开发时最好尽量将页面大小保持在 100KB 最好是 50KB 以内,如果你的网页包含许多多媒体内容,那你最好学会使用 Yslow。Yslow 会对网站性能进行打分(分值为0到100),从js脚本、css、多媒体资源等多个方面,80分应该是网站的最低目标。
不过 Yslow 本身也有些局限性:
1.最新版的火狐还有谷歌浏览器已经无法使用了
2.其次 Yslow 主要是页面结构分析,但是现在界面主要靠 js 绘制例如 react 等
3.而且 Yslow 本身主要关注的是 PC 端,可是现在是 mobile 时代
给大家推荐一个与 Yslow 有关的文章:YSlow老矣尚能饭否,有兴趣的可以去看看,个人觉得帮助比较大。
Firebug 一直同 Firefox 连接在一起,形成了强大的网页开发工具,通过 Firebug 你可以编辑、调试和监控任何页面的 CSS、HTML 和 JavaScript,不过就像 Yslow 主要是负责 PC 端一样,Firebug 主要针对的是手机端的调试。
Browser Insight 这款工具比较好的地方在于,它支持多平台页面监控分析,无论是PC端、移动微信、移动浏览器、还是安卓 webview 都可以兼容。其次,它的功能比较整体化,涉及:页面响应时间、脚本错误、资源加载时间耗时、ajax、DNS/TCP耗时、用户响应时间分布等多个维度,相比于上面两款工具,Browser Insight 算是一个比较全面的前端性能监控分析工具了。
给大家附上三篇之前读过的相关文章,有需求的话可以去看看:
Firebug,Debugger javascript调试利器 附下载地址
2. 关闭 Post Revisions
从 WordPress 2.6 开始,Post 版本开始引用追踪机制,例如,每次保存一篇 Post 时,数据库会写入一次修正。如果你不需要此功能,可以在 wp-config.php 文件中添加一行代码禁用之,wp-config.php 文件可以在 WordPress 主站的安装目录找到:
define('WP_POST_REVISIONS', false);
如果你启用了该功能,一段时间之后,数据库中会写入许多修正 post,这个也会导致数据加载缓慢等问题,如果你想删除它们,只要在插件中运行下面的查询语句(比如:利用前文提到过的 WP-DBManager)即可。
DELETE FROM wp_posts WHERE post_type = "revision";
该语句会删除数据库中的所有 「revision」 posts,使数据库查询更加快捷。
注意:使用时请一定仔细,如果你不知道自己在做什么,请确保先备份数据库。或寻求专业帮助。
3. 检查插件
插件往往是导致加载缓慢的重点嫌疑犯, WordPress 提供了丰富的插件,很可能就是因为一个资源分配不佳的插件导致了页面的加载问题。
例如,过去曾导致过加载缓慢的插件有:Popularity contest,aLinks 及 @Feed。
检查插件时,可以先禁用所有插件,检查网站重点部分的运行状况。如果没有问题,依次启用各个插件,直到发现导致问题的插件,不过这个方法很老实,但是相当耗费时间,而且每次出现问题都要这样排查一次。
上文提及的Browser Insight 把一个页面的加载分为了白屏时间、首屏时间、页面加载完成时间、资源加载完成时间,其中配合资源加载时间以及其刚刚上线的DNS耗时分析就可以较为清楚地定位插件的问题
4. 实施缓存
缓存可以从事先准备好的存储区(缓存)检索数据,而无需在用到同一信息时重新生成之。因此,缓存能极大提升信息检索的速度,在多数现代应用中都广泛使用。
使用缓存的最简便方法,是使用缓存插件,当然了,如果你的博客存储在共享的主机上,这也是唯一的办法
最常用的缓存插件是 WP Super Cache,后起之秀 W3 Total Cache 也是一种强大的缓存插件,而且它每天都在更新,大家可以试试看。
5. MySQL 优化
MySQL 可以将查询结果保存在自己的缓存中。启用这一功能,需编辑 MySQL 配置文件(通常是在 /etc/my.cnf 路径下),在其中添加如下代码:
query_cache_type = 1
query_cache_limit = 1M
query_cache_size = 16M
重启 MySQL 服务器后,就会创建大小为 16MB 的查询缓存(缓存大小取决于可用的 RAM 大小,在内存 4GB 的机器中,可使用的缓存达250MB)。
检查 MySQL 运行是否正常,可运行以下查询:
SHOW STATUS LIKE 'Qcache%';
结果示例:
Qcache_free_blocks 718
Qcache_free_memory 13004008
Qcache_hits 780759
Qcache_inserts 56292
Qcache_lowmem_prunes 0
Qcache_not_cached 3711
Qcache_queries_in_cache 1715
Qcache_total_blocks 4344
如果你想进一步优化 MySQL ,你可以使用的选项非常丰富。以下是我的 MySQL 配置文件,针对的是 4GB 内存的四核专用机。如果你使用开箱即用的机器,多半无法适用这样的配置,请仅作参考。
[mysqld]
bulk_insert_buffer_size = 8M
connect_timeout=10
interactive_timeout=50
join_buffer=1M
key_buffer=250M
max_allowed_packet=16M
max_connect_errors=10
max_connections=100
max_heap_table_size = 32M
myisam_sort_buffer_size=96M
query_cache_limit = 4M
query_cache_size = 250M
query_cache_type = 1
query_prealloc_size = 65K
query_alloc_block_size = 128K
read_buffer_size=1M
read_rnd_buffer_size=768K
record_buffer=1M
safe-show-database
skip-innodb
skip-locking
skip-networking
sort_buffer=1M
table_cache=4096
thread_cache_size=1024
thread_concurrency=8
tmp_table_size = 32M
wait_timeout=500
# for slow queries, comment when not used
#log-slow-queries=/var/log/mysql-slow.log
#long_query_time=1
#log-queries-not-using-indexes
[mysqld_safe]
nice = -5
open_files_limit = 8192
[mysqldump]
quick
max_allowed_packet = 16M
[myisamchk]
key_buffer = 64M
sort_buffer = 64M
read_buffer = 16M
write_buffer = 16M
超级实用的 mysqlrepot 工具是 MySQL 调试的利器。Mysql tuner 是快速修复数据库的最佳选择。MySQL Tuning primer 与 MySQL Activity Report 也是值得一试的好工具。
Maatkit 则是有效管理 MySQL 的必备神器。
MySQL 慢查询日志是获取有问题的查询信息的有利工具,激活该日志你需要编辑 my.cof 文件:
log-slow-queries=/var/log/mysql-slow.log
long_query_time=1
log-queries-not-using-indexes
这会创建一个查询日志,里面包含缓慢查询与缺少索引的查询。你需要找出运行缓慢的查询,才能对其使用内部提供的慢日志过滤与解析工具。使用'EXPLAIN'能有效帮助你理解并优化复杂的查询语句。
6. 最小化 HTTP 请求数量
使用更少的图片(或将所有图片用一张大图替代,再用 CSS 调整位置),更少的 JS,更少的 CSS 文件(通常意味着更少的插件),就能减少 HTTP 请求数量。
PHP speedy 插件能将所有的 JS 与 CSS 文件合为一个大文件,从而切实减少 HTTP 请求的数量。PHP Speedy 的唯一缺点是无法与其他插件 100% 兼容。
同样,你可以使用 CSS Sprite generator 将所有图片整合为一张大图,再用 CSS background-position 进行展示。这也能极大地减少 HTTP 请求数量。
7. 使用 Apache .htaccess 压缩内容
如果你有专属的服务器,可以将所有内容压缩后再传给浏览器。由于大多数 html 页面都容易压缩,这一招能大大降低加载时间。
在 .htaccess 中添加以下代码:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml text/javascript
8. 插件 expires 头信息
Expire (截止时间)头信息会告知浏览器内容缓存的保存时间。网站的大多数图片几乎不会改变,因此可以将它们保存在本地。
在 .htaccess 中添加以下代码(如果出现问题,请确保 mod_expires 已经在 Apache 中载入):
ExpiresActive on
ExpiresDefault "access plus 30 days"
Header unset ETag
FileETag None
以下是另一种设置方法:
Header unset Pragma
FileETag None
Header unset ETag
# 1 YEAR
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
# 2 HOURS
Header set Cache-Control "max-age=7200, must-revalidate"
# CACHED FOREVER
# MOD_REWRITE TO RENAME EVERY CHANGE
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
使用 cacheability engine 检查缓存配置。
9. 缓存 Gravatars
许多博客都使用 Gravatars(头像),也即靠在评论边上的小图片。然而,gravatars 对于网站优化有两大缺点:
- 每张 gravatars 图片都需要一次新的 HTTP 请求获取,即便同一张图片已经加载过了。(包含100个评论的网页就需要 100 次额外的 HTTP 请求)
- Gravatar 图片不包含 expire 头信息。
我们可以创建一个本地 gravatar 缓存,将所有网站需要的图片都存储在这儿。如果能将 gravatar 缓存保存在一个独立的自域中,就更好了。
我使用了 Zenpax.com 提供的插件,将所有 gravatars 头像本地化缓存。
总结
本文主要从网站性能指标、优化缓存、MySQL 等方面给大家介绍了如何进行 WordPress 网站的性能优化,明天有时间的话再给大家介绍下从主题优化、图片压缩等角度如何来优化 WordPress 网站。
本文的原文作者为VLADIMIR PRELOVAC,由OneAPM产品运营编译整理。
原文链接:http://www.prelovac.com/vladimir/wordpress-optimization-guide/
Browser Insight 是一个基于真实用户的 Web 前端性能监控平台,能够帮大家定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App浏览 HTML 和 HTML5页面。想阅读更多技术文章,请访问 OneAPM 官方技术博客。
本文转自 OneAPM 官方博客