WordPress 全方位优化指南(上)

作为一个全面的 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调试利器 附下载地址

两款较好的Web前端性能测试工具

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 contestaLinks@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 primerMySQL 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 对于网站优化有两大缺点:

  1. 每张 gravatars 图片都需要一次新的 HTTP 请求获取,即便同一张图片已经加载过了。(包含100个评论的网页就需要 100 次额外的 HTTP 请求)
  2. 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 官方博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容