什么是首次内容绘制FCP

什么是首次内容绘制FCP

　　First Contentful Paint，译为首次内容绘制，简称FCP。

　　FCP是记录浏览器从网页呈现第一条内容（例如文本或图像、SVG、非空白画布元素）需要多长时间。从本质上讲，它是站点访问者可以开始查看内容并与之交互的时间戳。

　　不要将 FCP 与 Largest Contentful Paint (LCP)混淆。LCP 旨在衡量加载主页元素和重要内容所需的时间，而 FCP 则关注任何内容的首次出现。

　　推荐：什么是互动时间TTI

FCP的重要性

　　FCP 被谷歌定义为以用户为中心的性能指标。一旦用户可以看到屏幕上显示的内容，他们就会确信页面实际上已成功加载。因此，FCP 发生得越快，用户就越有可能留在页面上并继续与站点交互。Google 的算法优先考虑加载时间短且主题适合移动设备的网站，而 FCP 是 Google PageSpeed Insights 报告中考虑的一项关键衡量指标。

　　换句话说，如果您想提高网站的 SEO 排名或改善用户体验，了解您的 FCP 是必须的。

　　推荐：什么是FID（First Input Delay）

如何测量FCP

　　可以使用多种测试工具来测量FCP，我们将看看其中的一些。

　　提示：由于测试方法、测试地点等各种因素，每种测试工具都会给您带来略微不同的分数

• Chrome的开发者工具——可以使用Chrome的DevTools找到您的FP、FCP和LCP时间。
• Google PageSpeed Insights——Google PageSpeed Insights工具会根据实验室和现场数据显示您的FCP和LCP时间
• GTmetrix——另一个衡量FCP时间的好工具是GTmetrix。除了FCP结果，GTmetrix还将显示您的LCP分数
• WebPageTest——WebPageTest允许您在模拟具有特定连接的设备时从不同位置测试站点的性能

　　推荐：8个免费好用的外贸网站速度测试工具

如何优化FCP分数

　　如果打开Page Speed Insight 或 Lighthouse，可能会获得报告和诊断，很多这些建议可以帮助您改进FCP（以及其他两个绘制指标），应该致力于解决所有这些问题，不仅要取悦PSI，还要实现出色的用户体验。

　　修复缓存托管和CDN

　　免费托管和CDN服务很糟糕。如果认真对待网站性能，则需要信誉良好的公司提供的付费计划。另一方面，缓存策略将取决于高度个体化的因素。例如，您更新网站内容的频率。

　　改善字体加载时间

　　当浏览器无法快速下载字体文件时会发生FOIT。发生这种情况时，在加载整个字体文件之前，浏览器不会显示任何文本。最简单的解决方案是在加载自定义字体之前临时显示系统字体。

　　消除渲染阻塞CSS和JavaScript

　　默认情况下，CSS和JavaScript(JS)文件是渲染阻塞的。浏览器在处理它们之前无法在页面上呈现任何内容。这就是为什么你需要改进他们的交付。要解决此问题，您必须内联关键资源并推迟非关键资源。

　　优化图像

　　图像优化意味着在不影响质量的情况下减小每个图像的大小。WebP是由Google开发的，最重要的是，WebP产生比JPEG和PNG更好的结果。根据Google的说法，WebP图像比PNG小26%，比JPEG小25-34%。推荐：如何在WordPress中使用WebP图片

　　压缩并合并代码文件

　　压缩和合并代码文件是优化网站CSS和JS的重要部分。缩小代码会删除不必要的信息位，例如空格、注释和换行符。浏览器不需要这些数据来呈现页面。合并代码文件会减少它们的总数。文件越少，浏览器就越容易找到和下载它们。

　　推荐：什么是Brotli压缩?网站开启Brotli压缩的好处

避免过度使用JS

　　JS通常是对网站性能的最大威胁。所有WordPress网站都有一个主题和至少2-3个附加插件。这些主题和插件通常包含大量的JS（和CSS）。

　　要想WordPress网站获得出色的性能，请仔细选择主题和插件，除此之外，可浏览网站并搜索过度使用JS的情况，需要注意的元素：不必要的滑块、使用HTML和CSS代替JS提供的图像和视频、动画。

　　推荐：Perfmatters插件教程轻量WordPress性能优化插件

总结

　　以上是晓得博客为你介绍的什么是首次内容绘制FCP的全部内容，希望对你的WordPress建站有所帮助，请在添加新插件后监控网站的性能，为了轻微的设计改进而牺牲Web性能是不值得的。

　　推荐：什么是Core Web Vitals

　　推荐：WPControl性能优化插件WordPress最简单的优化插件教程