如何在WordPress中推迟脱屏图像与延迟加载
Google Pagespeed Insights性能建议是在WordPress中推迟带懒人加载的屏幕图像.
WordPress中的懒惰加载图像会降低初始加载时间和页面有效载荷，而不会牺牲内容.懒惰的装载通过仅在需要时，仅服务您的访客需要的内容，提高您的访客体验.它比加载-全部图像更有效的方式，这导致缓慢加载图像交通堵塞.
在这篇文章中，我将向您展示如何加载如何改善页面性能以及它的工作原理.然后我们将看看如何在Wordpress中延迟加载您的图像.继续阅读，或使用以下链接跳转:
- 什么是懒惰的装载?
- <a href="#为什么"为什么懒惰加载比常规装载更好?
- 懒惰加载工作如何?
- 如何在Wordpress 中延迟加载图像
- 当懒惰加载图像时要注意的东西
- 全部
什么是延迟加载?
延迟加载是一种通过推迟"折叠以下"或其他单词的非关键资产来提高初始页面速度和有效载荷的技术，或者换句话说，目前浏览器视口中的所有内容.要在WordPress中推迟屏幕屏幕图像基本上意味着等待加载我们看不到的图像.
通知我说资产而不是图像，因为你的网页上的很多东西都可以懒惰加载，只要他们不需要为您的访问者首次看到的网站布局和网页的顶部.
图像是延迟加载的理想用例，因为它们是如此资源密集.视频，脚本和评论也是理想的候选人，因为它们倾向于为网页添加大量重量.
延迟加载，在需要时，资产不会加载，但如果用户从未到达，则不会加载它.
为什么懒惰加载比常规加载更好?
懒惰加载你的图像在Wordpress中提高了网站性能，SEO和您的访客体验.
延迟加载为初始更轻的初始网页，并根据需要添加元素.随着延迟加载，浏览器将首先构建DOM，以便您的用户可以开始与您的网站交互，即使全页未完成加载.
延迟加载实际上并不会使图像文件或您的网页文件大小更小.如果您有3MB的页面大小，那就是您的页面有多大，或没有延迟加载.这不像压缩图像.但懒惰的装载将大大改善您的用户如何了解您的网站.它感到更快，这可能只是足以让它们保持在页面上.
谷歌还使用Pages PEED作为排名因素，并建议懒惰的加载图像以提高性能.我们还知道Google奖励更快的站点，等级更高，因此懒惰加载您的图像是一种间接增长的方式改善您的图像SEO
在激活smush pro延迟加载 之前
我创建了一个有几个巨大图像的页面.我对我的测试站点进行了审计，在 Google Pagespeed Insights和我的分数增加到89到91只需使用Smush Pro ( Yup，现在刷下有懒惰的装载).这可能看起来不那么多，但这是平均值(50-89)和快速(90-100)我的朋友之间的区别.
激活smush pro延迟加载 之后
延迟加载也使用更少的数据.您使用缓慢移动连接的访问者会感谢您.延迟加载削减了访问者不加载所有图像时使用的资源，因为它们已停止浏览并移至下一页.
延迟加载工作如何?
这就是在没有插件的情况下推迟WordPress中的屏幕图像.
首先，您需要确定要延迟加载的图像.您应该延迟加载视口中不可见的任何图像，也不会有助于您页面的结构.例如，您正文文本上方的标题或英雄图像中的徽标图像不应延迟加载.要提供最佳的用户体验，您还应该加载在约500px的视口中的图像，因此在访问者到达它们之前，它们有时间加载.
防止图像加载正常方式
使用延迟加载时，需要防止图像在您的网站上加载常规方式.用于利用<img>
src属性中删除图像URL并将其移动到另一个属性，例如data-src，暂时存储.
确定浏览器如何检测视口中的图像
您需要做的下一件事是解决浏览器如何确定图像是否已输入视口.您可以使用JavaScript事件处理程序或交叉口观察者API.
javascript事件处理程序
如果浏览器兼容性至关重要，则使用scroll，resize和orientationchange JavaScript事件处理程序是确定元素是否已达到视口的理想方式，因为此方法与所有浏览器兼容.不幸的是，这要求您包含使用getBoundingClientRect检测元素可见度的额外步骤.渲染图像时，它也会导致略有延迟.您可以在这里看到一个例子.
交叉口观察器API
交叉口观察者API是兼容浏览器的现代和最有效的方式，以何时跨越映像已跨越视口.它也比使用事件处理程序更快.您将写入更少的代码，因为您可以跳过您必须提出图像可见性检测方法的部分，并且只需注册观察者以观察元素并确定浏览器在图像可见时应该做什么.
交叉口观察者API具有在浏览器中非常好支持，但它尚未普遍采用但是，您可能需要将JavaScript事件处理程序用作不兼容浏览器的回退.
将图像URL移动到SRC属性
一旦浏览器检测到图像是"在舞台上"或靠近它，那么它是将图像URL拉入src或srcset属性时，以便可以下载和呈现图像.完成此操作后，我们可以删除添加到图像中的任何类，以帮助您的JavaScript代码标识，并删除观察者.
如何在WordPress
中延迟加载图像
延迟加载可以用插件或javascript添加到WordPress站点.所有产生类似的结果.延迟加载相对容易实现，因此即使您选择插件，文件大小通常约为1-3KB，因此光线
选项1:使用纯javascript在WordPress
中推迟屏幕屏幕如果您易于使用直的JavaScript并希望完全控制，您可以将延迟加载直接添加到您的网站.添加此功能的最佳方法是为课程创建一个插件.有在此页面上的两个示例.一个人向您展示如何使用事件处理程序，另一个向您展示如何使用交叉观察者API.
选项2:使用JavaScript Lazy加载库
如果要使用JavaScript库来帮助，则可以选择很多.许多遵守我上面描述的过程，所以你可以快速开始.
- act-lazyload -一个反应懒人加载库，不使用交叉口观察者
- lozad.js -只使用交叉观察者，超级轻量级
- blaze -也超级轻量级，但不使用交叉口观察者
- yall.js -使用交叉口观察者并返回事件处理程序
- lazysizes -可以懒惰的加载视频和iframes也
您也可以使用jquery "作业"的插件，因为jQuery包含在WordPress Core中.
选项3:使用延迟加载插件
但到目前为止使用延迟加载开始的最简单方法是使用WordPress插件.
大多数premium/wordrespress.org/plugins/wp-smushit/?utm_source=smush_lazy_loading& utm_medium=blog&utm_campaign=free_version_of_smush"target ="_空白"> smush 在wordpress.org上的免费版本
用闪光激活懒惰的装载，我们已经使过程超级了简单.所有您需要做的就是转到Smul Pro中的延迟加载部分，然后按下激活按钮.
安装smush pro并在不到2分钟内获得延迟加载
就是这样.如果您想要更多地控制延迟加载的图像，则激活延迟加载后将有其他选项可用.当您在Smush Pro中激活延迟加载时，您也将延迟加载您的图像以用于移动用户.
延迟加载图像时要注意的东西
- 虽然延迟加载可能不会添加额外的重量，使您的网站减慢，但如果没有正确完成，它可能会干扰搜索引擎爬网的能力.
- 在尝试将图像保持在折叠之上时，折叠因设备而异，因此当您尝试确定要推迟的图像时，请记住这一点.
- 使用占位符图像而不是离开
src属性空白.并为图像指定高度和宽度，以便您的内容不会随着图像加载而转换. - 使用
<noscript>标记来指定如果您的访问者具有禁用JavaScript，则会发生什么.
所有这些都是
推迟屏幕屏幕图像和其他资产是提高您的网站性能的伟大而简单的方法.此技术将在您网站上的<img>标记中的所有图像，从主页上的图像到帖子和页面中的图像.如果要在CSS中延迟加载背景图像，您将使用类似的技术，但您将使用CSS标识符来定位图像.这是如何延迟加载背景图像</a的一个例子.
延迟加载最简单的方法是使用 smull 或smush pro.Smush Pro添加了其他功能，可以帮助您使用其他Google Pagespeed Insights机会.它可以帮助您以下一个Gen格式的图像通过将图像转换为webp文件和正确的尺寸图像 by 缩放图像用smush pro cdn.Smush Pro甚至与流行的WP Retina 2x插件兼容，因此您可以懒惰地加载那些巨大的视网膜图像而不会放慢WordPress
尝试smul pro free 自己或作为成员的一部分免费试用，看看它有多少差异可以为您的网站制作.
标签:
