如何加速WordPress网站

沈唁

发布于 2018-09-21 11:03:00

4.1K0

发布于 2018-09-21 11:03:00

文章被收录于专栏：沈唁志沈唁志

本指南的目标

本指南概述了降低WordPress网站响应时间的两个主要步骤：

分析并识别性能瓶颈。
实施网站优化的最佳实践。

本指南的结构如何

本指南提供了一个测试环境，用于说明优化WordPress的过程。环境有两个组成部分：

提供了一个Docker Compose文件，用于设置WordPress安装。此安装有意预先配置了性能不佳的自定义环境。当网站最初在网络浏览器中加载时，将显示超过15-20秒。此测试环境旨在突出显示某些插件或主题中可能出现的各种性能瓶颈：高CPU使用率，高内存使用率，慢SQL查询和慢速JavaScript。本指南将重点介绍如何通过删除这些自定义项来对测试站点进行故障排除，直到请求的响应时间最小化。 Docker Compose文件还安装了一个PHP分析工具，用于收集每个网站请求的性能数据。此数据被推送到第二个Docker Compose文件提供的Mongo数据库。
第二个Docker Compose文件负责从站点收集分析数据的Mongo数据库。第二个Compose文件还运行可视化应用程序，用于查看分析数据。此工具将用于识别已安装的慢速自定义项目。

这两个Compose文件是分离的。这种解耦允许您在阅读完本指南后，在运行您自己的WordPress站点而不是测试站点的服务器上单独安装第二个Compose文件。

设置测试环境

您可以在不安装环境的情况下使用本指南，但是通过所提供的步骤可以帮助您更好地理解该过程。如果您不想执行此工作，请跳至“应用程序分析”部分。

要安装测试环境中，你需要它没有任何正在运行的进程已绑定到端口的Linode 80，8080，3306，和27017。

安装Docker

这些步骤使用官方Ubuntu存储库安装Docker Community Edition（CE）。要在其他发行版上安装，请参阅官方安装页面。

删除系统上可能存在的旧版Docker： sudo apt remove docker docker-engine docker.io
确保您拥有必要的软件包以允许使用Docker的存储库： sudo apt install apt-transport-https ca-certificates curl software-properties-common
添加Docker的GPG密钥： curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
验证GPG密钥的指纹： sudo apt-key fingerprint 0EBFCD88 您应该看到类似于以下内容的输出： pub 4096R/0EBFCD88 2017-02-22 Key fingerprint = 9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88 uid Docker Release (CE deb) <docker@docker.com> sub 4096R/F273FCD8 2017-02-22
添加stableDocker存储库： sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
更新软件包索引并安装Docker CE： sudo apt update sudo apt install docker-ce
将有限的Linux用户帐户添加到该docker组： sudo usermod -aG docker exampleuser 您需要重新启动shell会话才能使此更改生效。
通过运行内置的“Hello World”程序检查安装是否成功： docker run hello-world

安装Docker Compose

下载最新版本的Docker Compose。检查版本页面并1.21.2在下面的命令中替换标记为最新版本的版本： sudo curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
设置文件权限： sudo chmod +x /usr/local/bin/docker-compose

下载测试环境

从您的Linode运行这些命令：

下载测试环境Tar文件： wget https://raw.githubusercontent.com/linode/docs-scripts/master/hosted_scripts/how-to-speed-up-a-wordpress-website/speed-up-wp-test-env.tar
解压缩文件： tar -xvf speed-up-wp-test-env.tar

启动WordPress测试站点

切换到包含Compose文件的目录： cd speed-up-wp-test-env/xhprof_host_net_wordpress/
以分离状态运行Compose文件： docker-compose up -d
验证您是否可以通过http://<your-Linode-IP-address>在Web浏览器中加载来查看该站点。这需要15-20秒才能加载。
在WordPress Docker容器上打开一个Bash shell： docker exec -it xhprof_host_net_wordpress_wordpress_1 bash
通过WordPress CLI设置WordPress管理员用户的密码： wp --path='/var/www/html' --allow-root user update wpuser --user_pass='your_new_wordpress_login_password'
验证您是否可以http://<your-Linode-IP-address>/wp-admin使用您设置的密码登录WordPress管理站点。输入wpuser管理员用户名。
退出WordPress容器中的Bash shell： exit

启动PHP配置文件可视化应用程序

切换到包含Compose文件的目录： cd ../xhgui_app/
以分离状态运行Compose文件： docker-compose up -d
验证您是否可以通过http://<your-Linode-IP-address>:8080在Web浏览器中加载来查看可视化应用程序：

分析应用程序

本指南中使用的概要分析可视化应用程序名为XHGUI。此应用程序提供条形图，线图，火焰图和其他为测试WordPress网站收集的原始分析数据的表示。

分析数据由名为XHProf的工具收集。最初的XHProf发行版不支持PHP 7（运行测试WordPress站点），因此本指南使用一个名为Tideways的兼容PHP 7的XHProf 分支。Tideways生成的数据将存储在Mongo数据库中，XHGUI将从该数据库中读取。

测试响应时间

curl在您的故障排除之前，从家用计算机运行此命令以测试站点速度：

time curl http://<your-Linode-IP-address> -s 1>/dev/null

12.79 real
0.01 user
0.02 sys

显示的时间可能因请求而异。如果您curl的计算机上尚未安装，则可以使用Google PageSpeed Insights等浏览器内速度测试。

查看分析数据

在您的浏览器中访问端口上的XHGUI 8080: http://<your-Linode-IP-address>:8080. 将显示一个列出最近请求条目的页面：

单击最新GET请求的时间戳链接/。将出现一个页面，其中显示该请求的详细信息，包括CPU使用率最高的条形图（称为“挂起时间”）和按功能排序的内存使用情况。此页面还包含指向请求的其他有用可视化的链接，如Flamegraph：

调查CPU使用情况：Pi_Widget :: calculatePi

在CPU使用情况的条形图下，列出的第一个项目已标记Pi_Widget::calculatePi。该功能的壁挂时间5,693,944 µs约为5.7秒。要查找负责此函数调用的代码，请从Linode执行以下命令：

在WordPress Docker容器上打开一个Bash shell： docker exec -it xhprof_host_net_wordpress_wordpress_1 bash
从容器的文档根目录中搜索函数名称： root@localhost:/var/www/html# grep -R calculatePi . ./wp-content/plugins/pi_widget/pi_widget.php: public function calculatePi() { ./wp-content/plugins/pi_widget/pi_widget.php: echo $this->calculatePi(); 我们可以看到一个插件（名为Pi Widget）负责此调用，尽管我们可能已经从XHGUI视图中猜到了这一点。对插件的进一步检查表明，它使用1000亿次迭代的近似算法计算Pi的值。
从您网站的WordPress管理页面的插件部分停用此插件。
从家用计算机重新测试站点响应时间： time curl http://<your-Linode-IP-address> -s 1>/dev/null 5.96 real 0.01 user 0.02 sys

调查CPU使用情况：mysqli_query

XHGUI显示的下一个最高CPU使用率函数调用已标记mysqli_query。这是WordPress用于运行数据库查询的PHP-MySQL接口。

这个名称对于我们来说太通用了，无法在WordPress代码库中搜索查询的原因。要继续排除故障：

安装Query Monitor WordPress插件，它将显示WordPress运行的各个查询。转到网站WordPress管理页面的插件部分，单击Add New顶部的按钮，然后搜索Query Monitor。安装后一定要激活插件。
在浏览器中重新加载WordPress网站。在顶部的管理菜单栏中，您将看到橙色突出显示的站点统计信息集合。将鼠标悬停在此突出显示上将显示一个下拉菜单，单击Slow Queries选项将显示一个慢查询列表：

找到的慢查询是以下语句：SELECT SLEEP(5)。这只是在数据库中休眠5秒而不采取任何其他操作。

Query Monitor的“按组件查询”部分有时会显示负责查询的插件的名称。对于此查询不是这种情况，因此您将在代码库中搜索它出现的位置。从已在WordPress Docker容器上打开的Bash shell运行此命令： root@localhost:/var/www/html# grep -R 'SELECT SLEEP' . ./wp-content/plugins/slow_query_test/slow_query_test.php: $wpdb->query($wpdb->prepare ( "SELECT SLEEP(%d)", array(5) ));
这表明Slow Query Test插件是负责任的。从WordPress管理页面停用此插件。
从家用计算机重新测试站点响应时间： time curl http://<your-Linode-IP-address> -s 1>/dev/null 0.96 real 0.00 user 0.02 sys

调查内存使用情况：openssl_random_pseudo_bytes

XHGUI显示名为openssl_random_pseudo_bytes的函数负责分配30 MB的内存。搜索代码库表明High Memory Test插件负责：

root@localhost:/var/www/html# grep -R openssl_random_pseudo_bytes .

./wp-content/plugins/high_memory_test/high_memory_test.php:	$data = openssl_random_pseudo_bytes(1000000);
./wp-includes/random_compat/random_bytes_openssl.php: * Since openssl_random_pseudo_bytes() uses openssl's
./wp-includes/random_compat/random_bytes_openssl.php: $buf = openssl_random_pseudo_bytes($bytes, $secure);
./wp-includes/random_compat/random_bytes_com_dotnet.php: * openssl_random_pseudo_bytes() available, so let's use
./wp-includes/random_compat/random.php: * 5. openssl_random_pseudo_bytes() (absolute last resort)
./wp-includes/random_compat/random.php: * openssl_random_pseudo_bytes()

该wp-includes文件夹中的其他文件调用此函数，但它们是WordPress核心的一部分。取消激活High Memory Test插件，然后重新测试速度：

time curl http://<your-Linode-IP-address> -s 1>/dev/null

0.20 real
0.00 user
0.02 sys

调查缓慢的加载时间：渲染阻止JavaScript

cURL报告的加载时间现在很低，但如果您在Web浏览器中加载页面，则仍需要5秒钟才能显示内容。因此，我们可以推断出缓慢可能是客户端瓶颈的结果。我们将使用Firefox Developer Edition浏览器的开发人员工具来调查：

访问Firefox中的WordPress站点，然后打开开发人员工具的“ 性能”选项卡。
单击“ 开始录制性能”按钮，然后在浏览器中重新加载页面。
页面加载完毕后，单击“ 停止录制性能”按钮。
将出现瀑布图，其中的每一行代表一个浏览器渲染事件。在此图表中向下滚动，直到您看到以下较长的事件，然后单击该事件：

5. 在右侧显示的面板中，单击带编号的蓝色链接。将出现HTML文档树的视图，并将突出显示负责的脚本。负责的脚本是睡眠功能：

在WordPress Docker容器的Bash shell中，搜索以下代码： root@localhost:/var/www/html# grep -R 'function sleep( timeInMilliseconds ){' . ./wp-content/plugins/blocking_js_test/blocking_js_test.php: function sleep( timeInMilliseconds ){
Blocking JS Test插件负责此代码。停用此插件。该页面现在应该在浏览器中加载不到一秒钟。

关于插件和主题的注意事项

使用的慢代码示例都与特定插件相关，解决方案是停用它们。如果您需要插件的功能但加载速度很慢，请尝试搜索执行相同操作的其他插件并测试它们以查看它们是否更有效。

慢速代码也可以在WordPress主题中找到，因此如果你在插件中找不到瓶颈，那么尝试不同的主题也是一个好主意。

最佳实践

除了识别代码中的瓶颈外，您还可以实施一般最佳实践来加速您的网站。其中许多实践都可以通过公开的WordPress插件轻松设置。

资产优化

高分辨率图像可能会降低网站的速度。降低图像的分辨率并针对Web优化它们。像WP Smush这样的插件可以处理这个任务。

缩小网站加载的CSS和JavaScript。缩小是压缩代码的过程，因此人们难以阅读，但计算机处理速度更快。脚本通常以缩小版和非缩小版的形式分发，因此您可以查找每个脚本的缩小样式并将其上载到服务器。一些WordPress插件也可以自动缩小脚本。

浏览器缓存

默认情况下，每次用户访问时，都会从您站点的Web服务器下载所有页面资源（图像，脚本，样式），即使他们最近访问过它并已经下载了这些项目。您的Web服务器可以设置为标记资产，以便浏览器将这些项缓存在磁盘上。该指定mod_expires模块控制这种行为的Apache。

Web服务器文件压缩

您的Web服务器可以配置为在将文件发送到Web浏览器之前压缩服务器上的文件，从而减少下载大小：

WordPress缓存插件

当您访问WordPress页面时，PHP和您的数据库进程会在每个请求上动态生成页面。与服务静态HTML页面相比，这对您的服务器来说更加沉重。WordPress缓存插件将您的页面预编译为静态下载。执行此操作的两个示例插件是WP Rocket和W3 Total Cache。其中一些插件还包含其他最佳实践。

Web服务器和数据库调整

修复代码性能瓶颈并安装其他最佳实践措施后，您可以微调Web服务器和数据库的基本设置。这涉及估计请求的平均内存和CPU使用率，将其与服务器的总资源级别进行比较，然后调整软件配置以充分利用这些资源。Linode提供了优化Apache和MySQL的指南：

可选：配置您自己的WordPress站点

您可以重复使用本指南提供的XHGUI Docker Compose文件来分析您自己的WordPress站点。设置它有两个方面：

运行提供的XHGUI Docker Compose文件以存储和查看WordPress站点的分析数据。
将XHProf代码插入到WordPress应用程序中，以便在每个请求上实际生成数据。

执行“设置测试环境”部分中的步骤，并在下载测试环境后停止。

运行XHGUI应用程序

切换到与此Docker Compose文件对应的目录： cd speed-up-wp-test-env/xhgui_app/
启动应用： docker-compose up -d

将XHProf代码插入WordPress站点

只有在运行PHP 7并且安装unzip了php-dev软件包时，这些说明才会成功。对于早期版本的PHP，您需要将Tideways替换为XHProf的原始分发版。

这些说明逐步下载XHGUI的源代码。这可能看起来很奇怪，因为Docker Compose文件已经负责运行XHGUI应用程序。再次下载代码的原因是因为XHGUI还提供了帮助工具，用于将XHProf / Tideways分析代码注入到您的应用程序中。如果没有这些辅助函数，您需要手动将对XHProf / Tideways的调用添加到WordPress代码，并设置与Docker Compose中运行的Mongo数据库的连接。

安装Tideways： wget -O tideways-xhprof.zip https://github.com/tideways/php-xhprof-extension/archive/master.zip unzip tideways-xhprof.zip cd php-xhprof-extension-master/ phpize ./configure make sudo make install
添加符合价值extension=tideways_xhprof.so到您的php.ini配置文件。注意php.ini在不同的位置可能有多个文件，例如/etc/php/7.0/apache2/php.ini和/etc/php/7.0/cli/php.ini。php.ini在此步骤和后续步骤4 中的每个文件中添加此值。
安装MongoDB PHP驱动程序： sudo pecl install mongodb
添加符合价值extension=mongodb.so到您的php.ini配置文件。
下载XHGUI的源代码，安装其依赖项（通过提供的install.php），并将源代码复制到文档根目录。用/var/www/htmlWeb服务器的文档根替换实例： wget -O xhgui.zip https://github.com/perftools/xhgui/archive/master.zip unzip xhgui.zip sudo cp -r xhgui-master /var/www/html/xhgui cd /var/www/html/xhgui/xhgui-master sudo chown www-data:www-data -R . sudo php install.php sudo cp config/config.default.php config/config.php
安装XHGUI的辅助注入功能。 对于Apache服务器，将此行插入虚拟主机 - 请记住在文档根目录中替换 - 然后使用以下命令重新加载Apache sudo systemctl reload apache2： php_admin_value auto_prepend_file "/var/www/html/xhgui/external/header.php" 这一行将header.php在每个提供的PHP文件的开头调用XHGUI 。 对于NGINX，将此行添加到服务器块，然后使用以下命令重新加载配置文件sudo nginx -s reload： fastcgi_param PHP_VALUE "auto_prepend_file=/var/www/html/xhgui/external/header.php";
通过更新profiler.enable函数来配置要分析的Web请求xhgui/config/config.php。默认配置将在100个请求中分析1个： 'profiler.enable' => function() { return rand(1, 100) === 42; } 如果要分析每个请求，请将其更改为始终返回true： 'profiler.enable' => function() { return true; }
您的XHGUI应用程序现在应该为您网站上的请求收集分析数据。可以通过8080Linode的IP地址在端口上访问XHGUI应用程序。