WordPress 优化清单

WordPress优化是使您的网站尽可能快地运行，改善您的用户体验，降低服务器成本并具有SEO优势的艺术。

许多研究表明，访问者不希望等待网站加载，如果加载时间过长，他们倾向于跳离您的网站。

如果您有网店并希望提高转化率，那么快速加载的网站对您来说尤其重要。

亚马逊的测试显示了类似的结果：Amazon.com 的加载时间每增加 100 毫秒，销售额就会下降 1%（Kohavi 和 Longbotham 2007）

资料来源：https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

您网站的加载速度对您在 Google 上的排名也非常重要，因此网站优化是您的 SEO 策略的一部分。

但是，我的网站加载速度非常快！

当然可以。 至少对你来说。 但是您是否尝试过很长时间以来第一次访问您的网站？

当您在您的网站上浏览时，大部分内容都会缓存在您的浏览器中。 如果您想获得第一次体验，请清除缓存或使用完全不同的浏览器。

有很多事情可以提高您的 WordPress 网站的速度，让我们开始吧。

缩小脚本

WordPress 网站是 HTML、CSS、JavaScript 和图像的组合。 HTML 代码首先被加载，然后它包含有关 CSS 样式表、JavaScript 文件和图像的其他文件的信息。

依次加载每个文件。 浏览器通常有 2-4 个“管道”的限制，这意味着浏览器最多只能同时从托管文件的服务器加载 2-4 个文件。

如果您查看 WordPress 网站的 HTML 代码，您会注意到许多不同的 .css 和 .js 文件。 它们中的每一个通常来自不同的插件，每个插件都添加了 .js 或 .css 文件。

在某些情况下，插件甚至会将​​ JavaScript 或 CSS 样式直接注入 HTML 大多数 WordPress 插件开发人员或主题作者很聪明，不会这样做。

这只是来自普通 WordPress 网站的示例。 HTML 代码具有指向其他几个文件的链接。 在这个简单的示例中，一个一个地加载了 4 个 JavaScript 文件。

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress 具有允许插件和主题作者嵌入必要的 JavaScript 和 CSS 文件的内部功能。

wp_enqueue_script() 和 wp_enqueue_style()。 函数的名称为它们的作用提供了可靠的线索。 通过使用其中任何一个来嵌入必要的文件，插件和主题作者将他们的文件与所有其他插件甚至 WordPress 本身一起排队。

也可以指示其他库的任何依赖项的功能，通常 JavaScript 包含文件取决于要首先加载的 jQuery。

我通常会找到并安装一个缩小插件，激活然后查看网站上是否有任何问题。 从那里我去查明究竟是什么失败了，如果我只需要更改几个设置来修复它。

缩小插件往往会在文档的页眉或页脚中排除特定文件的设置，这些文件在与其他文件一起加载或更改文件的加载位置时播放效果不佳。

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

注意：在代码示例中，我将主题的 url 存储到一个变量中，然后将其解析到 wp_enqueue_script 函数。 这减少了所需的 PHP 和/或数据库调用的数量，从而提高了速度。

为了追求极快的加载速度，我可以选择对绝对 url 路径进行硬编码，但这会将主题限制在单个域中，并且会使在另一个站点上重用代码变得更加困难。

安装缩小插件后，JavaScript 和 CSS 样式表现在加入到更少的 HTTP 调用中。

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

这会将 4 个文件合并到一个“文件”/浏览器的请求中。

我遇到过基于 WordPress 的网站，其中加载了 22 个 .css 文件和 15 个 .js 文件。 都在首页。 如果您可以减少外部文件的数量，速度的变化可能会非常惊人。

尽管缩小脚本往往会大大提高速度，但它也是我使用的技术之一，它往往会在设置过程中带来大多数问题。

优化header.php

您的主题中的 header.php 在您的 WordPress 网站上的每个页面上都会被调用。 这个文件通常有很多可以优化的元素。

一个经典的例子是 bloginfo('template_directory') ，它通常在标头中多次调用以返回主题的 url 以包含外部文件。

更有效的方法是对 url 进行一次请求，然后将其存储为变量。

$template_directory = get_bloginfo('template_directory'); 

主题目录的 url 现在存储在变量 $template_directory 中。

更多关于如何提高 header.php 效率的例子可以阅读博文 WordPress header.php 优化技巧

减少插件数量

WordPress 优化的另一个重要部分是保持激活插件的数量尽可能低。 许多用户很想测试和试验不同的插件，这确实是 WordPress 的好处之一。

但是，激活大量插件会降低 WordPress 网站的速度。 许多插件只有一个函数，可以很容易地通过放在你的functions.php中的一段代码来处理。

在许多情况下，您可能只需要一个功能，但您使用的插件还有其他几个您从未使用过的选项。

分析您网站上的每个插件，并确保您需要它们。 如果您不需要它们或功能可以用 functions.php 代码替换，请停用并删除插件。

不要使用图片——使用 CSS3

网站的设计使用图像来帮助制作用户界面。

在引入 CSS，尤其是 CSS3 之后，许多用于 Web 界面的效果可以通过使用 CSS 和 HTML 代码来模仿。

[box]注意：这些效果中的大多数并非在所有浏览器中都兼容，尤其是旧版 Internet Explorer（是的，对于任何 Web 开发人员来说，它总是有问题的孩子）。 如果您希望优化网站的速度，使用 CSS 效果可能是一个快速的解决方案，但如果客户端的主要受众使用过时的浏览器，则不是一个好的选择。[/box]

如果您正在为以 B2C（企业对消费者）为目标的客户工作，您应该查看他们的 Google Analytics（分析）或询问他们拥有（或希望定位）的客户类型。 如果客户受众通常使用过时的浏览器，这可能会影响您是否可以使用 CSS3 效果。

当 Elegantthemes.com 发布新版本的短代码插件时，由于 CSS3 效果和将多个图像放入单个精灵，它对我的​​客户的加载时间产生了巨大影响。

曾经包含 90 张图片的简码/图片文件夹现在只有一个 PNG 精灵，整体大小从 140kb 减少到 15kb！
（也就是说尺寸减少了大约 90%。）

图像到精灵

现有主题的 Sprite 优化可能会有点耗时，但它也可以为您的网站带来很大的速度提升。

sprite 是单个图像，通常为 .PNG 格式，其中包含视觉设计/布局的多个元素。 不是单独加载每个图形元素，而是将所有图像连接到一个或尽可能少的精灵中。

这种技术应该只用于用于布局设计的图像，而不是用于单个帖子特色图像、缩略图等。您应该尝试放入精灵中的唯一图像是在您的网站上的每个页面上使用的图像。

不是加载每个单独的图像（不同的 http 请求），而是将所有图像分组到一个文件中，并且修改显示每个图像的 CSS 以简单地将背景微移到精灵中所需部分的位置。

SpriteMe.org 是创建精灵的绝佳资源。 最好的方法是提前计划并首先构建您的 sprite，但是如果您需要修复现有网站，spriteme.org 网站有一个书签，可以让这个过程变得非常简单。

CSS 样式与精灵组合的示例：

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

每个css样式都引用了同一个文件，只是背景位置不同，展示了图片的不同部分。

分发 – 使用 CDN

使用 CDN（内容分发网络）托管您的主题文件和 WordPress 元素有两个主要好处。

您的文件加载速度更快，因为它们位于不同的域中。 2-4 个并发下载文件的浏览器限制是针对每个域的。

因此，如果您的文件托管在不同的域上，浏览器将自行加载这些文件，实际上使您的网站加载速度更快，并减少您的域和主机的负载压力。

另一个好处是，如果您使用主要的 CDN，他们将拥有分布在世界各地的服务器，然后检测您的访问者来自哪里，然后从他们网络中最近的服务器向他们提供您的文件。

适合您网站的服务器

托管网站的服务器需要靠近目标受众。 因此，如果一个网站是针对德国市场的，最好在德国或至少在中欧找到一个托管公司的服务器。

这对从离他们所在位置更近的服务器加载的访问者产生了很大影响，从而使您的网站浏览速度更快。

这也有 SEO 影响，不仅因为网站加载速度更快，还因为它增加了网站对德国观众的重要性，因此也应该有更高的排名。

搜索引擎优化的真正效果是有争议的，但如果你想提高你的网站性能，那么值得考虑。

这对于 SEO 来说是众所周知的，但是一旦建立了站点，就很少会因为纯粹的 SEO 原因而将其转移到另一台服务器上。 不过，对于您的下一个项目，请牢记这一点。

修复 404 错误

您应该定期检查您的网站，以确保您没有 404 - 无论如何都找不到页面。 减少网站上的不良链接可以减少服务器负载，并提供更好的用户体验。 不仅链接和页面会丢失，有时拼写错误或其他类型的错误也会导致在您的网站上找不到内容。

提示：查看这段代码以自动 301 重定向未找到的页面。

[盒子]
此页面还远未完成，还没有涵盖 WordPress 优化的所有细节。 目标是创建一个提示和技巧资源，以充分利用您的 WordPress 网站。

除非您是开发人员，否则其中一些或大部分技巧将难以实施，但每一个技巧都会使您的 WordPress 网站运行得更快。
[/盒子]

清单

这是清单，请注意每个网站和项目都不同。 并非所有步骤都可以在所有网站上使用。