浏览器|广州蓝景分享—HTML+CSS功能，让页面加载速度提高数倍广州市

文章图片

文章图片

Hello ，各位小伙伴，今天广州蓝景跟大家分享前端技术干货，页面加载速度问题。
首先我们都讨厌加载缓慢的页面！
要知道加载时间每增加1秒（0-5秒之间），网站转化率就会平均下降4.42% 。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化HTML和CSS文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！
注：本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。
延迟加载
延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。
a）拆分CSS文件
尽量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上执行。

<link rel=\"stylesheet\" href=https://mparticle.uc.cn/"styles.css\" />

对于打印媒体，可以使用：

<link rel=\"stylesheet\" href=https://mparticle.uc.cn/"print.css\" media=\"print\" />

对于移动设备屏幕，可以使用：
<linkrel=\"stylesheet\"href=https://mparticle.uc.cn/"mobile.css\"media=\"screen and (max-width: 480px)\" />

对于平板电脑屏幕，可以使用：

<linkrel=\"stylesheet\"href=https://mparticle.uc.cn/"tablet.css\"media=\"screen and (max-width: 1080px)\" />

对于移动屏幕横屏或竖屏，也可以使用不同的CSS文件：

<link href=https://mparticle.uc.cn/"portrait.css\" rel=\"stylesheet\" media=\"(orientation:portrait)\" />

通过将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\" ，以便仅在需要时加载图像。这将大大降低页面加载速度。
<img src=https://mparticle.uc.cn/"my-logo.png\" alt=\"KOUSTAV\" loading=\"lazy\" />

2. 选择正确的图片格式
.webp格式的图片被推荐作为网络的图片格式标准。
WebP无损图片在尺寸方面比PNG小26% 。 WebP有损图片比同等SSIM质量指数下的同类JPEG图片小25-34% 。动画WebP图片支持有损、无损和透明，与GIF和APNG相比，可以提供更小的尺寸。
下图是WebP与PNG图片格式对比：

下图是WebP与JPEG图片格式对比：

所有这些测试都可以证明，即使是有损压缩， webp图片的压缩率也更高，因此大大减少了页面加载时间！
你还可以尝试另一种图片格式.avif ，在少数情况下比.webp更好，但由于该格式比较新（2019年发布），因此还没有多少浏览器支持.avif格式！
使用<picture>元素