延迟加载是一种优化技术,它推迟加载那些不在用户屏幕视野内的资源,直到它们进入可视区域才开始加载。这种方法特别适用于图片密集型的网站,因为它能减少初始页面的HTTP请求,从而加快首页的加载速度。
近年来,浏览器开始内置懒加载功能。以Chrome为例,从74版开始引入实验性支持,75版起默认启用。这使得开发者不再需要依赖JavaScript来实现图片的懒加载,而是可以直接在HTML的img和iframe标签中添加加载属性来控制延迟加载。此属性有三个可选值:’Lazy’ 启用延迟加载,’Eager’ 禁用延迟加载,即时加载,’Auto’ 则由浏览器根据情况决定是否延迟加载。若未设定或设为’Auto’,则保持默认行为。这种原生的懒加载方式不需JavaScript辅助,因此性能更优。
针对WordPress用户,Google推出了Native Lazyload插件,它能自动为图片添加加载属性,便于利用浏览器的原生懒加载功能。如果浏览器不支持此属性,插件会退回到IntersectionObserver的JavaScript方法。即使JavaScript被禁用,只要浏览器支持loading属性,插件会在图片元素中插入noscript标签,确保加载属性仍然生效。
目前,loading属性仅被Chrome浏览器支持,但由于其对大规模图片延迟加载的高效解决方案,预计其他浏览器也将陆续跟进。此外,我们还提供专门的WordPress性能优化服务,如需咨询,欢迎联系。