WordPress 全方位优化指南(上)

心已入冬 提交于 2020-02-29 22:22:35

作为一个全面的 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 官方博客

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!