页面加载速度提高 10 倍的小技巧
我们都讨厌加载缓慢的页面!
要知道加载时间每增加1秒(0-5秒之间),网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。
幸运的是,我们可以通过优化HTML和CSS文件来提高网站的页面加载速度,而无需花费昂贵的服务器资源!
延迟加载
延迟加载是一种缩短关键渲染路径长度的策略,从而减少页面加载时间。
a) 拆分CSS文件
尽量拆分CSS文件,避免完整CSS在所有尺寸的屏幕上执行。
对于打印媒体,可以使用:
对于移动设备屏幕,可以使用:
对于平板电脑屏幕,可以使用:
对于移动屏幕横屏或竖屏,也可以使用不同的CSS文件:
通过将CSS分离成多个文件,主文件(在本例中为styles.css)变得小多了,从而减少了渲染被阻塞的时间,大大提高了页面加载速度。
b) CSS的font-display属性
font-display
属性应用于@font-face
规则,定义浏览器如何加载和显示字体文件,从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能,但代价是闪烁无样式的文本。
@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}
c) HTML文件中的图片懒加载
使用loading="lazy"
,以便仅在需要时加载图像。这将大大降低页面加载速度。

2. 选择正确的图片格式
.webp
格式的图片被推荐作为网络的图片格式标准。
WebP无损图片在尺寸方面比PNG小26%。WebP有损图片比同等SSIM质量指数下的同类JPEG图片小25-34%。动画WebP图片支持有损、无损和透明,与GIF和APNG相比,可以提供更小的尺寸。
所有这些测试都可以证明,即使是有损压缩,webp图片的压缩率也更高,因此大大减少了页面加载时间!
你还可以尝试另一种图片格式.avif
,在少数情况下比.webp更好,但由于该格式比较新(2019年发布),因此还没有多少浏览器支持.avif格式!
使用<picture>
元素
a) 可用于针对不同的media条件裁剪或修改图片(例如,在较小的显示器上加载大图片的缩略版本)。
b)在不支持webp格式的情况下提供替代图片格式。
c)通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。
如果为高DPI显示器提供更高分辨率的图像版本,请改用<img>
元素上的srcset
。这允许浏览器在数据保存模式下选择低分辨率版本,并且你不必编写显式media条件。
3. 渲染图像
由于图像是异步加载的,并在第一次绘制后继续加载,如果在加载之前未定义其尺寸,则可能会导致重排到页面内容。例如,文本因加载图像而被推下页面。因此,设置width
和高height
属性至关重要,以便浏览器可以在布局中为它们保留空间。
对于任何background-image
,设置background-color
值很重要,以便在下载图像之前,覆盖的内容保持可读。
4. 压缩HTML和CSS文件
压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符,如空格、换行符、制表符等以及注释。
使用压缩工具,如CodeBeautify,CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。
上面这些更改完全可以使得网站现在的页面加载速度提高10倍!
- 本文标签: 前端 其他 SEO
- 本文链接: http://www.92cxy.cn/article/74
- 版权声明: 本文由王小东原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权