确定哪些项目可以延迟载入;

A widely recognized collection for machine learning tasks.
Post Reply
shaownhasan
Posts: 534
Joined: Sun Dec 22, 2024 6:26 pm

确定哪些项目可以延迟载入;

Post by shaownhasan »

确实,在 WebWave 中,所有图形都会自动压缩,并且载入所需的时间更少。但仍有一些事情值得做来加快速度。

从适当的图像尺寸开始。照片的像素越多(即解析度越高),下载所需的 荷兰电报数据 时间就越长。几乎没有任何显示器的分辨率高于 1920 x 1080(全高清),因此将此类照片上传到网站是没有意义的。您可以更进一步,添加最大宽度为 1600 像素的照片。

下一步是根据需要调整图形的大小。文章标题中的照片宽度可以是 1600 甚至 1900 像素。但是部落格正文中的图形应该更小(例如800像素),并且带有徽标的图形应该非常小。

提示:确保您的图形大小不超过 100 KB。例如,您可以使用tinypng.com和tinyjpg.com 工具来执行此操作。
减少萤幕截图影像

避免过多的动画


动画极大活跃并改善了网站的图形外观。同时,它们可能需要更多资源才能顺利渲染(尤其是在较旧的装置或网路连线速度较慢的装置上)。

设计你的网站时要让动画有帮助,而不是有害。为此目的:

优先考虑最重要的动画,只留下那些为用户带来真正价值的动画;

选择轻量级选项(例如 CSS 动画通常比基于 JavaScript 的动画更轻);

学习简单的编码—如果您使用自订动画,请确保程式码干净且精简;

测试性能,最好通过A/B 测试并使用 GTmetrix 等工具。



使用延迟载入


延迟载入可以加快页面的显示时间。不,这不是玩笑。这是一种最佳化技术,可以延迟非关键资源(图像、影片)的加载,直到需要它们为止。换句话说,当使用者向下卷动页面时,会下载并显示附加内容。

试着自己实现这个:


使用loading="lazy"属性,可以直接加入图片或影片的HTML元素中;

实作一个 JavaScript 函式库,例如 lozad.jw,以获得更进阶或自订的解决方案;

测试并验证您的网站。确保布局、功能和整体效能的变更没有问题。



而且…不要告诉任何人,但在 WebWave 中所有页面都有延迟载入功能。你什么都不用做!
Post Reply