1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress 5.4 将内置图片延迟加载功能-WordPress开发教程

多年来,延迟加载图像一直是一种显着提高页面加载性能的常用机制。仅仅WordPress系统,就有无数启用延迟加载的插件。一直以来的延迟加载图像一般都是基于JavaScript来实现,直到

多年来,延迟加载图像一直是一种显着提高页面加载性能的常用机制。仅仅WordPress系统,就有无数启用延迟加载的插件。

一直以来的延迟加载图像一般都是基于JavaScript来实现,直到最近Google团队新推了一种本机Web解决方案,该解决方案仅仅需要在 img 标签中添加loading属性就可以生效,并提供了标准化的用户体验,不再需要添加js代码。目前loading属性的HTML规范已接近尾声,并且已经被包括Chrome和Edge在内的多个浏览器所支持

早在两年前就提出了在WordPress内容中启用图像的延迟加载的方法,但是当时的JavaScript实现可能会导致一些问题和兼容情况。但是现在使用新的 loading属性就可以消除这些顾虑。

性能影响

根据HTTPArchive的说法,图像是大多数网站要求最多的文件类型,通常比其他任何资源占用更多的带宽。在第90个百分点,网站在台式机和移动设备上发送大约4.7 MB的图像。

Web的本机延迟加载,web.dev

如果不进行延迟加载,则会立即加载网页上的所有图像。这会严重损害性能,尤其是在包含许多图像的页面上。如果其中有几幅图像位于“可视界面之下”,即用户没有立即看到的页面部分,就不需要立即加载这些图像,而应该等到用户向下滚动才加载图片。

由于延迟加载已成为提高性能的重要举措,因此新的 loading属性规范旨在标准化行为并将其更快地集成到Web平台中。

如果WordPress默认情况下启用本机延迟加载功能,它将极大地影响数百万个站点的性能和用户体验,而无需任何技术知识,甚至无需了解延迟加载的概念。采用新的加载属性对于WordPress来说是一次带动整体网站更快的机会。

技术方案

该loading属性当前支持两个可能的值:

eager,在页面加载时立即加载所有图片

lazy,仅在与可视部分才加载图片

该实现方案尝试在默认情况下启用延迟加载图像,并在以下标记上为loading属性设置值:lazyimg

文章内容中的图片

摘要中的图片

评论中的图片

小工具内容中的图片

通过 wp_get_attachment_image() 渲染的单个图片

通过 get_avatar() 呈现的头像图片

请注意,loading=”lazy”只有在相应标签尚未包含 loading 属性时,才会添加该标签。换句话说,为了防止图像被延迟加载,建议指定loading=”eager”。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/122055

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注