让您的网站快速发展：第 1 部分
已发表: 2015-03-18这已经不是什么秘密了：今天的网络用户需要速度。 随着互联网和蜂窝连接越来越快，用户希望网站能够快速加载，而开发人员的工作就是尽其所能为这些页面提供快速服务。 那么，如何让您的网站快速火爆？ 以下是您在使用 WordPress 构建时应该做的具体操作。
第一件事：测试您网站的速度
性能可以分为两大类：前端和后端。 我认为后端是与服务器相关的任何事物以及数据在页面上的填充方式（主题中的 PHP 代码是“后端”）。 前端由您的所有资产（CSS、JavaScript、图像等）和标记组成。 Web 浏览器读取和解释的所有内容都是“前端”。 我在性能方面做出这种区分的原因是因为很高兴知道您正在优化什么，更重要的是，知道您最需要优化的地方。
要测试您网站的速度，我建议结合使用 WebPagetest 和 Google PageSpeed Insights。 WebPagetest 让我们可以很好地了解网站加载所需的实际时间（以秒为单位），为您提供一些很好的指标来了解是后端还是前端导致网站加载缓慢。 PageSpeed Insights 最适合查看浏览器如何呈现您的网站以及您可以在前端改进哪些方面。
请记住，本文的重点是完全定制的 WordPress 网站。 如果您正在使用庞大的主题和 19 个第三方插件（插件会降低前端和后端的速度）在网站上运行速度测试，请先从空白开始，然后一个一个地慢慢激活插件以找到那些这正在减慢速度。
前端性能
如何立即提高 WordPress 主题的可访问性
没有一天我不使用网络，即使是在我度假的时候。 我将大胆猜测你可以联系起来。 越来越多，互联网发挥...
根据 Fastly 首席性能官 Steve Souders 的说法，性能的黄金法则是页面总加载时间的 80-90% 由前端组成（80/20 规则）。 后端的 10-20% 至关重要，但即使您使用最快的主机资金可以买到，如果不优化前端以确保用户感知到，您的网站仍然无法发挥其全部潜力它加载速度很快。 在前端优化方面，感知很重要。 用户不会关心网站加载需要多长时间（以秒计）。 他们真正关心的是他们可以多快地与它交互并立即查看内容或执行操作。 并不是说您不应该担心实际的加载时间（您应该），但是通过遵循以下技术，您可以确保您的网站尽快处于可用状态，然后快速完成页面加载所有资产。
CSS
在将 CSS 交付给浏览器之前，对 CSS 做的最重要的事情就是压缩它并删除未使用的选择器。 在开发主题时获得良好的开发工作流程会使这个过程变得微不足道，尤其是在您使用像 Sass 这样的预处理器时。 我使用 Grunt，它是一个 JavaScript 任务运行程序，可以在开发时为您执行命令。 Grunt 有一个名为 grunt-contrib-sass 的插件，它可以简单地将所有 Sass 文件编译为一个（如果您使用的是 Sass 部分文件），将其缩小并压缩。 在此基础上添加 grunt-contrib-watch 插件，它会在您保存文件时运行 Sass 任务。 简单的！ 如果您没有使用最新最好的 CSS 方法，请不要失眠，但在创作 CSS 时尽量遵循某种标准，以避免重复和巨大的文件大小。
一旦您的样式表准备就绪，加载它的最简单（到目前为止也是标准）方法就是在<head>中引用它；。 这样，浏览器会在加载 DOM 的其余部分之前加载并解析它。 但是，有一种新技术可以将“关键”样式内联在<head>中，然后使用 JavaScript 异步加载完整的样式表。 当我绝对想在一秒钟内加载（或感知加载）网站时，我才真正使用这种技术，但看看它是否适合您的工作流程是一件很棒的事情。 细丝组有一篇关于使用这种技术的大量文章。
JavaScript
了解 WordPress 如何使用 MySQL
从广义上讲，WordPress 可以分为两个部分：生成 WordPress 站点外观和感觉的逻辑和模板，存储所有内容和权力的 MySQL 数据库...
优化 JavaScript 的黄金法则很简单：提供尽可能少的 JavaScript 文件并缩小和连接。 第三方 WordPress 插件可能会因使用未缩小的阻塞 JavaScript 文件而使您的文档膨胀而造成不利影响，因此在选择插件时要注意这一点很重要。 理想情况下，您会将所有 JavaScript 文件连接成一个，然后将其缩小。 在无法将所有文件合并为一个的情况下，可以使用称为“async”和“defer”的 HTML 属性异步加载 JavaScript 文件，或者在加载页面的其余部分后使用。
现在最常见的引用 JavaScript 的地方是在文档的底部，就在结束标记之前。 但是，还有更高级的技术可以加载 JavaScript。 同样，Filament Group 已经对此进行了大量研究，并且有几个开源项目，如果您的目标是超快的页面加载时间，您可以使用这些项目（顺便说一下，我绝不隶属于 Filament Group；我只是觉得他们的东西很棒）。 最好的方法似乎是通过在<head>中内联一个小函数来动态加载脚本； 然后附加脚本标签而不阻塞页面的其余部分。 有关更多信息，请查看 loadJS 脚本。
图片
图像通常是页面上最大的文件，导致页面加载时间的最大延迟。 不过，图像的好处在于，与 CSS 和 JavaScript 不同，大多数浏览器都是异步加载它们的。 这至少有助于提高页面的感知性能，但您仍然需要确保 A）您提供的图像尽可能少，并且 B）这些图像被尽可能多地压缩。
压缩工具对于尽可能多地挤出图像上的多余部分是必要的。 ImageOptim 是一款出色的 Mac 应用程序，它与 OptiPNG 和 jpegtran 一起用于 Grunt 等任务运行程序。
字体
如今，Web 字体非常普遍。 我几乎在每个项目中都使用 Google Web Fonts，但直到最近我才意识到仅仅在<head>中引用它们对性能造成的影响。 性能影响很小，但这是一篇关于让网站快速运行的文章，所以一切都很重要！ 为了使用 Web 字体获得最佳性能，我建议使用由 Google 和 Typekit 共同开发的 Web Font Loader。 它是一个开源脚本，既可以管理从第三方（如 Google Web Fonts）加载字体，也可以让它们异步加载（厌倦了这个词吗？）。
正如预期的那样，将 Web Font Loader 集成到您的项目中需要一些配置，因此请查看 GitHub 上的项目以获取有关如何设置它的详细信息。