|
Post by account_disabled on Dec 26, 2023 7:32:45 GMT 2
由于逐个下载图像可能是一项缓慢的操作,因此使用HTTP /1 的浏览器通常通过独立的网络连接并行下载多个图像到网站。如果网站支持HTTP/2,大多数浏览器现在都会通过单个网络连接进行多次下载:这“通常速度更快,并且可以避免大文件阻止小文件下载等问题”。 图片下载中http/1和http/2的区别 然而,谷歌员工警告说,无论使用哪种方法,“仍然存在网络带宽瓶颈问题。 ” 下载页面图片的正确顺序是什么 最合适的下载顺序是: 页面顶部的大英雄图像,因为它们可以影响页面的最大内容绘制分数(另一个基本的网络信号,它衡量向用户显示屏幕主要内容所需的时间)。 其他折叠上方的图像,无需滚动即可看到的图像(折叠上方的实际定义,而折叠下方的位置是用户滚动后才可见的图像)。由于可以在不同屏幕尺寸的设备上查看网页,因此最好通过在多个设备上检查网站来估计哪些图像位于首屏和首屏下方。 首屏下方的图像位于主屏幕之外,因此当用户开始滚动时即可查看它们。 网页上的其余图像可以缓慢加载,特别是建议对用户仅在大量滚动页面时才会查看的图像设置延迟加载,因为否则这些图像将加载,无论从滚动它会浪费资源。 管理图像下载顺序的提示 为了检测网站是否有 WhatsApp 号码数据 效地加载图像,Kent 再次参考了 PageSpeed Insights,特别是报告的“推迟屏幕外图像”部分,该部分标识了可能在其他图像之后加载的图像,或者参考了“避免”等其他部分链接关键资源(尽管一般来说,关键链更多的是关于 JavaScript 和 CSS 文件)。 如何解决图像下载问题 改进图像加载顺序的常用技术是前面提到的延迟加载,它实际上仅在用户滚动并到达页面中存在资源的部分时才开始下载。 最初,延迟加载是使用JavaScript实现的,但现在大多数浏览器都支持HTML的lazy=loading属性。 应注意不要对首屏图像设置延迟加载,因为这可能会导致性能下降:最新版本的 Lighthouse 会突出显示图像是否延迟加载并影响 LCP。 随着HTTP/2的出现,如果浏览器和网站都支持 HTTP/2,则可以进行进一步的优化:例如,在这些情况下,网站可以开始发送它知道需要的浏览器图像,而无需等待供浏览器请求它们;此外,HTTP/2 允许浏览器通过单个网络连接更有效地并行下载多个图像。 Google 针对电子商务图片的推荐 对最佳实践的干预和对静态图像电子商务网站上可能出现的最常见问题的解决以最终分析结束:其中一些情况很容易解决,Kent 说,并引用了 HTML 中的图像标签,这应该始终指定图像的宽度和高度,或者使用女士加载。 在其他情况下,需要更先进的技术,可以直接在您的网站上实施,尽管也许最实用和最快的解决方案是“使用具有足够支持的第三方CDN ”,它以最佳方式提供图像设置等服务浏览器支持的格式、从单一来源转换图像、根据需要以更有效的格式提供图像、预缩放到多种图像尺寸的功能以便在各种设备上高效下载和查看、图像压缩以减少下载尺寸。
|
|