懒惰加载和LiteSpeed的视口

 

懒惰加载和LiteSpeed的视口

这三件事在一开始就为那些不清楚它们是什么的人定义了。

懒惰负载

Lazy load,也被误称为 "懒惰 "的直译,是一种设计模式,用于将对象的加载或渲染推迟到合适的使用时间,以避免不必要的预加载可能不会被使用的对象。它最常用于图像,有助于提高加载时间和节省带宽。

每张图片的渲染被推迟到需要的时候,在你滚动浏览视口的时候加载。

视口

视口placeholder,没有确切的翻译,但通常被称为 "图形窗口",是苹果公司在2007年为其iPhone创建的,是一个类似于诺基亚为Mini Map设计的虚拟窗口。它过去是,现在也是,一个元标签,目的是为网页提供一种方式,向移动浏览器传达他们希望网页浏览器如何呈现该网页。

如果没有这个元标签,iPhone将网页渲染成一个980px宽的窗口,用户不得不放大和缩小。有了这个元标签,你就可以按实际尺寸呈现一个页面,然后调整布局,以提供我们在使用移动浏览器时都希望看到的那种页面。最终,它成为大多数设备支持的标准元标签,并且是今天用于所谓的响应式设计的标签。

Litespeed Cache

LiteSpeed Web Server是一款网络服务器软件,它可以为您的网站带来更多好处。 莱特Speed缓存用于WordPress的LSCWP是其一体化的网站加速插件,它具有独特的全服务器缓存和一系列优化功能,适用于使用WordPress并在该软件下运行的服务器上托管的页面。

载入图像

理想情况下,所有的图片都应该延迟加载,除了那些在页面最初加载时已经在视口中的图片,也就是说,在我们滚动之前,在屏幕上第一眼看到的是什么。

这有一个问题。页面在第一次加载时可能看起来很难看,因为直到没有运动时才会显示图片,你必须排除显示的前两或三个图片。

虽然WordPress从5.5版本开始就有了原生的延迟加载功能,而且我们可以用很多其他的插件来做这个,比如说 绩效管理用Viewport控件来限制哪些图片需要显示,哪些不需要显示就不那么简单了,因为我们可以告诉它不要对例如我们想显示的图片进行延迟加载,但我们不能设置或排除它们。 前二、三、四但我们不能以简单的方式为每个页面设置或排除特定的图片,我们只能用 成批的.

VPI

7月25日,LiteSpeed在其插件的5.0版本更新中增加了一个灵活的选项来解决这个问题,它被称为VPI(视口图像)。

VPI服务检查一个URL,并确定哪些图像在1300×900像素的屏幕上可以看到,用于桌面浏览,哪些图像在480×800屏幕上可以看到,用于移动浏览。它向LiteSpeed插件返回这些图像的列表,而LiteSpeed插件在下次缓存该URL时将它们排除在缓慢加载之外。

其结果是,页面完全呈现在折页之上,而折页之下的所有图片则继续像以前那样表现。该页面保留了其良好的页面速度得分,而人类访客遇到的是第一个全屏的内容。

配置

要使用这项新服务,显然,你必须激活 懒惰负载在该插件中。

它的配置非常简单,只要激活它,它只有两个开关。

Lazy Load y Viewport en Litespeed

当视口图像(以下简称VPI)被启用并且cron被设置为ON时,VPI图像将通过一个基于cron的队列在后台生成。

如果你不想启用cron,你将不得不手动处理VPI队列。你可以通过"手动运行VPI队列"按钮来完成,当队列中有URL时,该按钮就会出现,或者从主仪表板的"Force cron"选项中完成。

懒惰加载和LiteSpeed的视口 2

这个新选项的有趣和真正有用之处在于,现在,无论是在经典编辑器还是在Gutenberg中,在每个帖子和页面中,你会发现一个新的LiteSpeed选项框,你可以完全禁用这个选项,并从视口中删除任何图像,以微调到你喜欢的程度。

懒惰加载和LiteSpeed的视口 3

出现在这些框中的任何图像将不会被延迟加载。

如果输入尚未进行VPI处理,两个框将显示为空,尽管你可以根据你的意愿手动添加图像,或从两个框中删除图像并强制进行VPI重新计算。

好的和不太好的

毫无疑问,LiteSpeed的VPI的最大优势是能够快速、轻松地决定我们不希望延迟加载的特定图像,并为每个页面手动设置。

问题是,这个选项是在其他WordPress优化服务之外,从 QUIC.cloud如关键CSS(CCSS)、独特CSS(UCSS)、低质量图像占位符(LQIP)和图像优化,我们提供有限的免费费用,这可能不总是足够的,此后你必须购买点数,虽然 不贵.

我决定测试一下,把它与WordPress Core和Perfmatters的原生Lazy Load(每个数量的固定排除)的结果进行比较,到目前为止,我可以看到在已经留下的小范围内有了改进。

懒惰加载和LiteSpeed的视口 4

最终的视觉效果与使用Perfmatters实现的效果完全相同,因为只需改变 占位符从灰色到白色,用这个CSS调整"淡入"效果的持续时间。

/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}

透過電子郵件訂閱

在文章發表後,立即在您的收件匣中免費接收無廣告的完整文章。 饋送的完整內容透過外部服務免廣告傳送。