7. 关闭首屏图像的延迟加载

A widely recognized collection for machine learning tasks.
Post Reply
Dimaeiya333
Posts: 562
Joined: Sat Dec 21, 2024 3:34 am

7. 关闭首屏图像的延迟加载

Post by Dimaeiya333 »

通过图像延迟加载,您可以延迟加载网站上的图像,直到需要它们为止(例如,当用户向下滚动页面时)。

通常,如果您延迟加载首屏以下的图像,这对性能有好处。但是,对首屏图像使用延迟加载可能会对网站的 FCP 和 LCP 时间产生负面影响。

因此,您需要确保从延迟加载中排除首屏上的任何图像。

如果您使用 WordPress 的基本延迟加载功能,WordPress应该会自动执行此操作。但如果您遇到问题,可以使用wp_omit_loading_attr_threshold 函数手动调整此行为。

如果您使用延迟加载插件,希望它能为您提供这样做的选项。例如,Perfmatters 允许您自动排除一定数量的热门图像,并在必要时手动排除特定图像。

Perfmatters 插件接口允许您从延迟加载中排除主图像。
如何在 Perfmatters 中从延迟加载中排除主图像。
如果您的插件不提供此功能,请考虑切换到提供此功能的插件。

8.优化字体交付
为了确保文本内容在加载时可见(这可能会影响您的 FCP 时间和用户体验),如果您使用自定义字体 (例如您在Google Fonts上找到的字体),优化字体的加载方式也很重要。

为了避免出现问题,您可以使用Font-Display:Optional或Font-Display:Swap CSS 描述符。

使用Font-Display:Optional,如果自定义字体加载速度不够快,您可以告诉用户的浏览器使用替代字体。

如果您不想使用自己的 CSS 添加此内容,有几个 WordPress 插件可以为您优 领英数据 化字体加载,例如 WP Rocket、FlyingPress 和 Perfmatters。

如何使用 FlyingPress 插件自动优化字体。
如何优化 FlyingPress 中的字体。
9. 尝试尽可能减小 DOM 的大小
根据 Mozilla 的说法,文档对象模型 (DOM) 是“构成网络文档结构和内容的对象的数据表示”。

尽管人类访问者不会直接与 DOM 交互,但页面的 DOM 对于帮助 Web 浏览器理解和显示页面内容非常重要。

作为一般规则,拥有更大、更复杂的 DOM 会比较短、更优化的 DOM 结构导致 FCP 时间更慢。

以下是一些减小网站 DOM 大小的技巧:

使用性能优化的 WordPress 主题— 在 WordPress 中,您的主题将在网站 DOM 的大小方面发挥重要作用。查看我们的帖子,其中包含有关最快的 WordPress 主题和最快的 WooCommerce 主题的数据。
使用分页符块— 您可以使用分页符块分割长页面。
优化分页— 您可以在 WordPress 中使用分页来分解包含您的博客文章(或其他类型的自定义文章)的页面。
显示摘录 —不要在列表页面上显示全文,而是考虑显示摘录。
限制或避免使用“重型”页面构建器——虽然从设计的角度来看,可视化、拖放式页面构建器可能非常好,但它们也会给 DOM 带来很多臃肿。从性能的角度来看,您最好坚持使用本机编辑器。视觉构建器的性能可能值得增加设计能力,只要您遵循其他技巧,通常就没有问题。
Post Reply