在页面加载的最初几分钟内没有用
Dec 9, 2023 5:49:15 GMT -5
Post by account_disabled on Dec 9, 2023 5:49:15 GMT -5
让我们先过一遍它们。 为非开发人员优化 Web 性能问题 以下是每个人都可以访问的要点列表： 压缩您的图像 用视频替换动画 GIF 以加快页面加载速度 使用新一代图像格式，例如 WebP 或 JPEG 2000（但不幸的是，并非所有浏览器都支持这些格式） jpg 与 jpg2000 这些都是可以优化您网站的好做法。 通过本图像指南进一步了解。 为高级用户优化 Web 性能问题 如果您是一名开发人员或经验丰富的用户，并且不怕亲自接触系统，那么这里有一些建议和最佳实践： 将每个页面的大小减少到 500KB 以下（页面 + 所有资源）。 将每页的资源总数控制在 50 以下（移动设备的理想选择）。 考虑实现AMP页面，可以解决手机上的很多加载问题 延迟加载您的图像 将 CDN 用于您的图像和其他资产 为了继续讨论需要开发人员支持的关键点，让我们来分解一些常见的性能问题。 使用一张图像用于桌面，另一张图像用于移动设备 可以创建同一图像的变体并在 HTML 代码中指示它们。因此，根据屏幕的大小，将以正确的尺寸显示正确的图像。 <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> 不要延迟加载第一张图片 一旦您的图像被优化和压缩，您可以通过以“Lazyload”模式加载它们来更进一步。
Lazyload 意味着仅当用户开始滚动并且图像在屏幕上可见时才加载图像，这将影响加载时间和 LCP 分数。 但是，您不应该延迟加载网站的前几个元素。正如您可以在此处阅读的那样，LazyLoad 从页面的第一个可见部分加载图像 行业电邮清单 可能会影响 LCP 性能。 如果您确定 LCP 是图像，请在第一个图像上禁用延迟加载。 消除阻塞资源 有一些 Javascript 和 CSS 处。 使用 Chrome DevTools 从“覆盖范围”选项卡识别这些资源。这会告诉您哪些资源正在执行，哪些资源“刚刚”加载。 “刚刚”加载的资源可以稍后使用 async 或 defer 属性执行。 这样，第一个元素将加载得更快，并且您的 LCP 将得到改进。 删除不必要的 CSS 和 JS 在您的 CSS 和 JS 文件中，有一些代码片段从未使用过，尽管如此，它们在页面加载时会被完全“读取”。因此，这些数据被不必要地加载和处理。 Chrome DevTools 的“覆盖率”选项卡仍然有助于您了解 CSS 或 Javascript 文件中不必要代码的百分比。 然后，您必须检查每个文件中的代码，并在必要时将其删除。 在服务器端压缩您的资源 Lighthouse 检测没有压缩（内容编码）的文件，例如 br、gzip 或 deflate。 对于这些文件，建议对其进行压缩。此操作必须在服务器端完成，例如在 CMS 中。 缩小 CSS 和 JS CSS 和 JS 可以缩小，即显示在一行上，从而占用更少的空间。这是一个相当简单的操作，可以使用在线工具来完成。 缩小 CSS 和 JS 始终在图像和视频元素上包含尺寸属性 这种方法可确保浏览器在加载图像时可以在文档中分配适量的空间。
在将更改上线之前进行测试 最后的提示：正确测试您的更改。不要直接在您的生产网站上进行更改。 总结 核心网络生命和页面体验是相当复杂的主题，需要技术知识才能解决它们。 您需要问自己这是否值得，并投入时间进行不一定会影响您的搜索引擎优化的改进。 请记住，谷歌的一切都与用户体验有关，从长远来看，它的因素将会增长。 在您的下一个项目中，从一开始就开始考虑优化。 点击在 Twitter 上分享（在新窗口中打开）点击在 Facebook 上分享（在新窗口中打开）点击在 LinkedIn 上分享（在新窗口中打开） 发表于精选-fr 关于作者： 塞缪尔·施密特 查看塞缪尔·施密特的所有帖子 个人网站推特简介脸书个人资料Instagram 个人资料领英个人资料 文章导航 上一篇文章 如何编写网页内容：我的方法，我的工具！ 下一篇 SEO写作：一步步编写网页内容 （8 条评论） 马加利·拉吉约米 2020 年 6 月 8 日下午 2:04 一篇非常有趣的文章，有法语版本，谢德·斯佩兰迪奥 2020 年 6 月 14 日下午 4:56 可能是我读过的关于 Web Core Vitals 的最好、最详尽的法语文章。 恭喜塞缪尔 罗丝·洛 2020 年 8 月 10 日上午 9:39 Google 统计数据表明，50% 的网站访问者希望移动网站能够在 2 秒内加载。如果加载时间超过 3 秒，53% 的用户可能会离开博客页面。这无疑是我在 Web Core Vitals 上读过的最好、最详细的法语文章之一。很棒的分享。 Ping：主题集群的流量增加了 20 倍（我解释了一切）- Samuel Schmitt Ping：Thruuu：Google SERP Scraper | 伯纳德·斯佩兰迪奥 迈克尔·桑托斯 2020 年 11 月 19 日上午 8:17 感谢您写了这篇关于重要 Web 核心的非常全面的文章 Ping：2021 年 5 大 SEO 趋势 - Webnote.fr Ping：SEO 优化 - 提示与技巧！ 加入对话 读 博客 通讯 GTM+GA教程 营销技术 搜索引擎优化工具 免费 SERP 分析器 抓取谷歌 2023塞缪尔·施密特 联络我 由主题港。密特 查看塞缪尔·施密特的所有帖子 个人网站推特简介脸书个人资料Instagram 个人资料领英个人资料 文章导航 上一篇文章 核心网络生命：“真正”完整的指南 下一篇 主题集群的流量增加了 20 倍（我会解释一切） 加。
Lazyload 意味着仅当用户开始滚动并且图像在屏幕上可见时才加载图像，这将影响加载时间和 LCP 分数。 但是，您不应该延迟加载网站的前几个元素。正如您可以在此处阅读的那样，LazyLoad 从页面的第一个可见部分加载图像 行业电邮清单 可能会影响 LCP 性能。 如果您确定 LCP 是图像，请在第一个图像上禁用延迟加载。 消除阻塞资源 有一些 Javascript 和 CSS 处。 使用 Chrome DevTools 从“覆盖范围”选项卡识别这些资源。这会告诉您哪些资源正在执行，哪些资源“刚刚”加载。 “刚刚”加载的资源可以稍后使用 async 或 defer 属性执行。 这样，第一个元素将加载得更快，并且您的 LCP 将得到改进。 删除不必要的 CSS 和 JS 在您的 CSS 和 JS 文件中，有一些代码片段从未使用过，尽管如此，它们在页面加载时会被完全“读取”。因此，这些数据被不必要地加载和处理。 Chrome DevTools 的“覆盖率”选项卡仍然有助于您了解 CSS 或 Javascript 文件中不必要代码的百分比。 然后，您必须检查每个文件中的代码，并在必要时将其删除。 在服务器端压缩您的资源 Lighthouse 检测没有压缩（内容编码）的文件，例如 br、gzip 或 deflate。 对于这些文件，建议对其进行压缩。此操作必须在服务器端完成，例如在 CMS 中。 缩小 CSS 和 JS CSS 和 JS 可以缩小，即显示在一行上，从而占用更少的空间。这是一个相当简单的操作，可以使用在线工具来完成。 缩小 CSS 和 JS 始终在图像和视频元素上包含尺寸属性 这种方法可确保浏览器在加载图像时可以在文档中分配适量的空间。
在将更改上线之前进行测试 最后的提示：正确测试您的更改。不要直接在您的生产网站上进行更改。 总结 核心网络生命和页面体验是相当复杂的主题，需要技术知识才能解决它们。 您需要问自己这是否值得，并投入时间进行不一定会影响您的搜索引擎优化的改进。 请记住，谷歌的一切都与用户体验有关，从长远来看，它的因素将会增长。 在您的下一个项目中，从一开始就开始考虑优化。 点击在 Twitter 上分享（在新窗口中打开）点击在 Facebook 上分享（在新窗口中打开）点击在 LinkedIn 上分享（在新窗口中打开） 发表于精选-fr 关于作者： 塞缪尔·施密特 查看塞缪尔·施密特的所有帖子 个人网站推特简介脸书个人资料Instagram 个人资料领英个人资料 文章导航 上一篇文章 如何编写网页内容：我的方法，我的工具！ 下一篇 SEO写作：一步步编写网页内容 （8 条评论） 马加利·拉吉约米 2020 年 6 月 8 日下午 2:04 一篇非常有趣的文章，有法语版本，谢德·斯佩兰迪奥 2020 年 6 月 14 日下午 4:56 可能是我读过的关于 Web Core Vitals 的最好、最详尽的法语文章。 恭喜塞缪尔 罗丝·洛 2020 年 8 月 10 日上午 9:39 Google 统计数据表明，50% 的网站访问者希望移动网站能够在 2 秒内加载。如果加载时间超过 3 秒，53% 的用户可能会离开博客页面。这无疑是我在 Web Core Vitals 上读过的最好、最详细的法语文章之一。很棒的分享。 Ping：主题集群的流量增加了 20 倍（我解释了一切）- Samuel Schmitt Ping：Thruuu：Google SERP Scraper | 伯纳德·斯佩兰迪奥 迈克尔·桑托斯 2020 年 11 月 19 日上午 8:17 感谢您写了这篇关于重要 Web 核心的非常全面的文章 Ping：2021 年 5 大 SEO 趋势 - Webnote.fr Ping：SEO 优化 - 提示与技巧！ 加入对话 读 博客 通讯 GTM+GA教程 营销技术 搜索引擎优化工具 免费 SERP 分析器 抓取谷歌 2023塞缪尔·施密特 联络我 由主题港。密特 查看塞缪尔·施密特的所有帖子 个人网站推特简介脸书个人资料Instagram 个人资料领英个人资料 文章导航 上一篇文章 核心网络生命：“真正”完整的指南 下一篇 主题集群的流量增加了 20 倍（我会解释一切） 加。