如何提升WordPress网站的首次内容绘制(FCP)得分，加速网页加载

首次内容绘制（简称FCP）是Google用来衡量网页加载速度的一个重要指标，它记录了从用户开始加载页面到页面上第一块内容出现所需要的时间。

对WordPress网站的主人来说，FCP可以显示网站运行的好坏，以及它对用户体验和搜索引擎优化（SEO）可能带来的影响。一个快速的FCP意味着访客不必长时间盯着空白屏幕，这会让他们的网站体验更加愉快，从而提高用户参与度。

Google非常看重用户体验，所以你网站的FCP成绩会直接影响到它在搜索结果中的排名。拥有好的FCP成绩（最理想的是在所有网页体验中排名前25%），意味着FCP时间应该在1.8秒或更短。

改进 WordPress FCP 的最佳策略

减少服务器响应时间

要提升WordPress网站的首次内容绘制（FCP）性能，一个关键动作就是缩短服务器响应时间，我们用“首字节时间”（TTFB）来衡量这个速度。

TTFB是指用户的浏览器接收到来自服务器的第一个数据字节所需要的时间。如果TTFB慢，可能是因为：

• 网络连接问题。
• 服务器设置没有针对速度进行优化。
• 太多访问者同时在线，服务器承受不住。

要加速你的TTFB，你可以这么做：

• 选择一个靠谱的托管服务，他们有好的设施和专业知识来处理大流量。
• 使用内容分发网络（CDN），它可以在全球多个地方存有你网站的副本，让用户能从离他们最近的地方加载网站，这样可以大大减少加载时间。
• 启用缓存功能，这样访问者再来时，网站就可以迅速显示，而不用每次都重新加载一切。

消除渲染阻塞资源

渲染阻塞资源，主要是指JavaScript和CSS文件。这些文件必须被完全加载和执行后，浏览器才能开始显示网页的内容。如果这些文件太大或太复杂，那么你的网站加载到第一块内容出现的时间（FCP）就会变长。

为了让WordPress网站更快地加载，你需要优化网站处理JavaScript和CSS文件的方法。简单来说，就是做以下几件事：

对于 JavaScript 文件

明智之举是对 JavaScript 文件使用 async 和 defer 属性。 

当你用“异步加载”时，你其实是让浏览器继续把网页搭建起来，同时让JavaScript文件在后台默默加载。这些脚本下载完后，浏览器会短暂停止网页的搭建，先去执行这些脚本，再继续之前的工作。当这些JavaScript文件不需要按照特定顺序来执行时，用异步加载是个不错的主意。

而“defer”则是让浏览器等到网页全部展示出来后，再执行JavaScript。这样做的好处是确保了当你的脚本需要和网页上的HTML元素互动时，这些元素已经准备好了。

💡 怎么选用异步或者延迟加载，主要看你的脚本是什么样的：

• 如果你的脚本执行顺序很重要，或者脚本需要在网页完全展示后才能运行，那么延迟加载可能更合适。
• 如果你的脚本和网页上的HTML元素没啥关系，而且执行顺序也不重要，那么异步加载可能是更好的选择。

对于 CSS 文件

考虑把网页加载最初需要的CSS样式直接写进HTML里。这就是说，把那些让用户首先看到的内容所需的基础样式直接放在网页代码中。这样做可以让浏览器在加载网页时不用等外部的CSS文件，能更快开始显示网页。

同时，去掉那些不需要的或者没用到的CSS和JavaScript代码也能帮助网页更快地显示出来，让FCP（首次内容绘制）变得更快。

压缩CSS

压缩CSS就是去掉文件里不需要的东西，比如多余的空格、注释和分隔符，这样做不会影响网页的运行。

这个方法能显著减少CSS文件的大小，让它们加载得更快，进而加快网站内容的首次显示速度。有很多工具和插件可以帮你自动完成这个压缩过程，WP Rocket就是其中一个热门选择——它不仅能压缩CSS，还提供了缓存和延迟加载JavaScript等功能，帮助你的WordPress网站速度飞快。

如果你需要其他选项，还可以试试Autoptimize和W3 Total Cache等插件。这些工具都能自动压缩CSS，这样你就不用自己手动编辑，既省时间又省心。

避免将依赖于 JavaScript 的元素置于首屏之上

如果你网站上最先展示给访客看的内容大量依赖JavaScript，这样可能会让网站的首次内容显示（FCP）变慢。原因是浏览器需要先下载、分析再执行JavaScript代码，才能展示出内容。

为了让FCP变快，你的网站首屏内容最好主要依靠HTML和CSS来实现，而不是JavaScript。这就意味着，你需要用一种不需要等JavaScript加载就能快速显示出来的方式来安排网站的布局和基本的视觉元素。

执行此操作的方法如下：

1. 评估网站的哪些部分需要 JavaScript，哪些部分不需要。例如，简单的设计元素和基本内容不应需要JavaScript。然后，你可以构建 HTML 以首先加载这些元素。尽可能多地使用 CSS 进行样式设计，尤其是首屏内容。CSS 加载速度比 JavaScript 更快，并且通常可以实现类似的视觉效果。
2. 推迟或异步加载 JavaScript 文件，尤其是那些对于初始页面渲染不重要的文件。这样，你的网站就可以显示其主要内容，而无需等待所有 JavaScript 加载和执行。

通过优先加载首屏内容的 HTML 和 CSS 并减少对 JavaScript 的最初依赖，你可以加快 FCP 速度，并在访问者登陆你的 WordPress 网站时为他们创造更流畅、响应更快的体验。

优化图像并避免首屏延迟加载

如果你的网站上面的图片太大，加载起来就会很慢，特别是那些放在页面最上面的重要图片，会让网站显示的第一印象（FCP）变慢。

比如说，如果首页的大背景图（我们常说的“英雄图像”）没被优化好，就会像堵车一样拖慢网页速度。

避免这个问题，你可以这样做：

• 压缩图片：这可以帮助减少图片文件的大小，而不会让图片看起来差很多。
• 选对图片格式：比如，对于照片，用JPEG格式的通常比PNG的小，加载也快。
• 使用响应式图片：根据访问网站的设备提供不同大小的图片。比如，手机用户就提供比桌面用户小的图片文件，这样在小屏幕设备上加载就更快了。
• 实施延迟加载：只有当图片要出现在屏幕上时才加载它们。这个方法适用于首屏以下的图片，但对于首屏上的图片最好不用，以免影响加载速度。
• 用插件简化流程：Smush是个不错的工具，它可以自动帮你压缩和优化图片。

通过这些方法，你的网站加载速度可以得到提升，让访客一打开网站就能快速看到内容。

实施服务器级缓存

服务器级缓存就是在服务器上保留网站页面的副本。这样，当有人再次访问网站时，服务器就可以直接展示这个缓存的页面，而不用每次都重新加载整个页面。

这个方法很厉害，因为它能做到浏览器缓存做不到的事。浏览器缓存是把网站信息保存在访问者的电脑或手机上，这样他们下次访问时加载得更快。但对于第一次来的访问者，浏览器缓存帮不上忙。而服务器级缓存就能让每个访问者的体验都变快，不管是不是第一次访问。

现在，很多提供WordPress托管的服务都包含了服务器级缓存，这让一切变得简单多了。你也可以用WP Rocket或W3 Total Cache这样的插件来实现，这些插件提供了很多缓存选项，包括服务器级缓存。

减小 DOM 大小

在网站开发中，有个东西叫做文档对象模型，简称DOM。想象一下，它就像是网页的蓝图，帮助浏览器知道怎样展示网页的每一部分——不管是文本、图片还是标题。

DOM把网页变成了一个由很多小部分组成的大家族树。每当你在网页上做些什么（比如点击按钮），浏览器就会参考这个家族树，按照你的操作去更新网页。

如果这个家族树越简单，浏览器渲染网页的速度就越快，这就意味着网页能更快地展示给你看。但如果家族树太复杂，浏览器就得花更多时间去弄明白，这会让网页显示速度变慢，也就是说，你得等更久才能看到网页内容。简单来说，让DOM保持精简可以让网页加载得更快，给你更好的浏览体验。

从本质上讲，更精简的 DOM 可以实现更快的交互和响应更快的用户体验。

以下是一些减小 DOM 大小的实用技巧：

• 尽量减少不必要的div元素：过度使用 HTML div 元素可能会导致 DOM 过大。通过删除不用于特定目的的 div 来简化页面结构。
• 更有效地利用 CSS：使用 CSS，而不是严重依赖 JavaScript 或过多的 HTML 结构来进行样式设置。CSS 的浏览器处理速度更快，并且通常可以通过更精简的 DOM 结构实现所需的视觉和功能结果。这种方法可以整理 DOM 并缩短页面的加载时间。
• 语义 HTML：尽可能使用<article>、<section>、<header>、<footer> 等HTML5 语义元素，而不是通用的 div 元素。语义 HTML 更有效，因为它传达含义（或语义），使 DOM 更易于理解且更简洁。
• 优化 JavaScript 生成的 HTML：如果您的网站使用 JavaScript 动态生成 HTML，请确保此过程高效。避免不必要的元素嵌套并检查生成的 HTML 结构以寻找简化的机会。
• 审核和重构您的代码：定期审核您网站的代码是否存在不必要的元素和过时的做法。Chrome 的 DevTools等工具可以帮助识别 DOM 中过大或过复杂的部分。重构代码可能意味着组合元素、简化 CSS 选择器或重构页面的某些部分。
• 使用 CSS Grid 和 Flexbox：现代 CSS 布局技术（例如Grid和Flexbox）可以显着减少对额外 div 和嵌套结构的需求。它们提供了更有效的方法来使用更少的 HTML 创建复杂的布局。
• 限制第三方脚本的使用：第三方脚本可以向 DOM 添加额外的元素。限制它们的使用并尽可能选择轻量级的替代品。

使用内容分发网络 (CDN)

内容交付网络，简称CDN，就像是一个快递服务，但这个服务是为网页内容配送的。它通过在世界各地放置一系列的服务器（可以想象成快递站），确保不管你在哪里，获取网页的速度都能快如闪电。

想象一下，每当你上网浏览一个网站，这个CDN服务就会从离你最近的“快递站”（也就是服务器）快速送达网页内容给你。这样做的好处是减少了数据旅行的距离，让网页加载速度大大提升。

这个快速配送不仅让网页打开速度变快，还能让你的网站在搜索引擎上的排名更靠前。因为加载速度快的网页更受欢迎，搜索引擎也就更喜欢它。简单来说，使用CDN就像给你的网站加了一个超级助推器，让它飞快地展现在用户面前。

与 WordPress 兼容的可靠 CDN 包括：

• Cloudflare： Cloudflare 因其广泛的网络和安全功能而受到广泛认可。它提供了一个非常强大的免费计划，并以与 WordPress 轻松集成而闻名，使其成为 WordPress 网站所有者的热门选择。
• Akamai： Akamai是最古老、最全面的 CDN 服务之一，以其庞大的服务器网络和高级安全功能而闻名，尽管它可能更适合大型企业级网站。
• MaxCDN（现为StackPath）： StackPath提供高速CDN服务，尤其以其用户友好的界面以及与WordPress缓存插件的有效集成而闻名，使其成为中小型网站的首选。
• KeyCDN： KeyCDN 是一家经济实惠且高效的 CDN 提供商，易于使用 WordPress 设置，提供按需付费定价，这对于流量可变的网站具有吸引力。
• Amazon CloudFront： CloudFront 是Amazon Web Services (AWS)的一部分，是一项功能强大的 CDN 服务，可以与其他 AWS 服务很好地集成。对于需要高度自定义并且已经成为 AWS 生态系统一部分的网站来说，这是一个合适的选择。
• Fastly：借助具有边缘计算功能的实时CDN，Fastly不仅可以交付内容，还可以非常贴近用户运行自定义代码，提供独特的个性化和优化功能。
• Sucuri： Sucuri主要以其安全解决方案而闻名，还提供集成安全性和性能的 CDN 服务，使其成为关注速度和安全性的 WordPress 网站的绝佳选择。

避免多个页面重定向

重定向就像是网页的跳板，有时候它能帮助指引我们或搜索引擎找到正确的网址。但这个过程会让网页的打开速度慢下来。想象一下，每当浏览器碰到一个需要跳转的地方，它就得额外做一轮“问路-被告知新方向-再次出发”的动作。

这就像是你问路时被告知目的地变了，需要走另一条路。每一次这样的额外“问路”都会让你到达目的地的时间延长，同样，浏览器在展示网页内容上也会慢一步。

如果网页有太多这样的跳板（也就是重定向），就会让数据的旅程变得更长，导致加载网页的时间增加，这可能会让用户感到不耐烦。所以，只有在真正需要时才应该使用重定向，避免不必要的延迟，这样大家访问网页时就能更快乐、更顺畅。

您可以采取以下措施来确保有效地管理重定向并优化网站的性能和 SEO：

• 审核您网站的重定向：使用Google 的 PageSpeed Insights、GTmetrix或WebPageTest等工具来分析你的网站并报告重定向的数量和影响。它们可以帮助您你识别不必要的重定向。
• 检查服务器配置：检查服务器配置文件（例如Apache 服务器上的.htaccess）以获取重定向规则。有时重定向会被设置并忘记，因此定期检查这些配置非常重要。
• 简化 URL 结构：目标是简单的 URL 结构。这可以减少重定向的需要，特别是在 URL 模式随时间变化的情况下。
• 检查内部链接：确保所有内部链接直接指向最终目标 URL，而不是重定向的中间 URL。
• 更新外部链接：如果你可以控制外部链接（例如来自其他网站的反向链接），请尝试确保它们直接指向当前 URL，以避免不必要的重定向。
• 重定向链：避免一个重定向导致另一个重定向的链。如果需要重定向，请确保它直接转到最终目标 URL。
• 使用 301 重定向进行永久更改：当需要重定向时（例如永久移动页面时），请使用 301 重定向。它们比临时重定向（如 302）更有效，并且更适合 SEO。

有一些插件和工具可以帮助解决此问题：

• 重定向是一个流行的插件，可帮助管理和跟踪 301 重定向，从而更轻松地在 WordPress 中处理重定向。
• Screaming Frog SEO Spider是一款功能强大的工具，可以抓取你的网站，识别重定向和重定向链，帮助你了解和优化网站的重定向结构。

定期监控和微调这些元素将使您的 WordPress 网站保持平稳高效的运行，为访问者提供卓越的体验并保持强大的在线形象。

衡量 FCP 分数的工具

定期检查网页加载的快不快（这个过程叫做FCP监测）就像是给网站做健康检查，可以帮你发现哪里拖慢了速度，然后找办法让网页加载得更快。这样做能确保每个访问你网站的人都能享受到流畅且迅速的浏览体验。

如果忽略对这个加载速度的监测，就可能会让访客感到不满，导致他们不再访问你的网站。在互联网这个竞争激烈的环境中，让网站加载得快速不仅是让用户高兴的事，也能帮助你的网站脱颖而出。

使用方法：

1. 访问 PageSpeed Insights 网站。
2. 输入你的网址。
3. 单击分析让工具评估您的页面。

PageSpeed Insights 提供详细报告，包括 FCP 分数。它将性能分为不同的范围，得分高于 90 被认为是良好。该工具还建议可行的改进措施，以提高网站的加载速度和整体性能。

Lighthouse

Lighthouse是 Google 的另一个免费工具，它与Chrome集成，并提供对 FCP 的深入了解，作为其性能评分的一部分。 

你可以在Chrome DevTools 的Lighthouse选项卡下访问它。Lighthouse 提供实验室数据（在受控条件下）和现场数据（反映真实用户体验），从而全面了解站点的 FCP 性能。

WebPageTest

WebPageTest是一款用于 FCP 测量的多功能工具，可提供详细的性能见解。它允许您从不同的位置和浏览器进行测试，从而更细致地了解您的网站在各种条件下的性能。

GTmetrix

GTmetrix结合了 Google Lighthouse 和其他工具的强大功能，提供有关网站性能的详细报告，包括 FCP。其用户友好的界面和全面的分析使其成为网站所有者和开发人员的热门选择。

通过使用这些工具，可以随时了解网站的性能，做出明智的决策来改善和保持高质量的用户体验。

总结

让网站的内容快速展现给访问者（这个过程叫做“首次内容绘制”）是很重要的。它不仅能让用户体验更好，还能帮助提升网站在搜索引擎中的排名。所以，确实值得花时间去做这方面的优化。

不过，实际上进行这样的优化可能会遇到一些挑战，需要你有足够的耐心去一步步调试和优化。就像是解决一个复杂的谜题，虽然过程可能会有点儿繁琐，但是最终能让你的网站速度更快，给用户带来更好的浏览体验。