mkimq

页面加载速度提高小技巧

我们都讨厌加载缓慢的页面！

要知道加载时间每增加 1 秒（0-5 秒之间），网站转化率就会平均下降 4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化 HTML 和 CSS 文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！

注：本文将仅关注如何使用 HTML 和 CSS 文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

拆分 CSS 文件

尽量拆分 CSS 文件，避免完整 CSS 在所有尺寸的屏幕上执行。

<!-- 加载和解析整个styles.css文件会阻塞主浏览器渲染 -->
<link rel="stylesheet" href="styles.css" />

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

<!-- 加载和解析print.css时不会阻塞渲染，只会在打印模式加载该样式 -->
<link rel="stylesheet" href="print.css" media="print" />

对于移动设备屏幕，可以使用：

<!-- 只会在移动设备这样的小屏幕下才会加载和解析该样式 -->
<link
    rel="stylesheet"
    href="mobile.css"
    media="screen and (max-width: 480px)"
/>

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

<!-- 不会在大屏幕上加载和解析该样式 -->
<link
    rel="stylesheet"
    href="tablet.css"
    media="screen and (max-width: 1080px)"
/>

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

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通过将 CSS 分离成多个文件，主文件（在本例中为 styles.css）变得小多了，从而减少了渲染被阻塞的时间，大大提高了页面加载速度。

CSS 的 font-display 属性

font-display 属性应用于@font-face 规则，定义浏览器如何加载和显示字体文件，从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能，但代价是闪烁无样式的文本。

@font-face {
    font-family: "nunito", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
}

HTML 文件中的图片懒加载

使用 loading="lazy"，以便仅在需要时加载图像。这将大大降低页面加载速度。

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

选择正确的图片格式

.webp 格式的图片被推荐作为网络的图片格式标准。

WebP 无损图片在尺寸方面比 PNG 小 26%。WebP 有损图片比同等 SSIM 质量指数下的同类 JPEG 图片小 25-34%。动画 WebP 图片支持有损、无损和透明，与 GIF 和 APNG 相比，可以提供更小的尺寸。

你还可以尝试另一种图片格式.avif，在少数情况下比.webp 更好，但由于该格式比较新（2019 年发布），因此还没有多少浏览器支持.avif 格式！

使用<picture>元素

  • 可用于针对不同的 media 条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略版本）。

  • 在不支持 webp 格式的情况下提供替代图片格式。

  • 通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。

如果为高 DPI 显示器提供更高分辨率的图像版本，请改用<img>元素上的 srcset。这允许浏览器在数据保存模式下选择低分辨率版本，并且你不必编写显式 media 条件。

<picture>
    <source
        srcset="my-logo-wide.webp"
        type="image/webp"
        media="(min-width: 600px)"
    />
    <source
        srcset="my-logo-wide.jpeg"
        type="image/jpeg"
        type="image/jpeg"
        media="(min-width: 600px)"
    />
    <source srcset="my-logo-narrow.webp" type="image/webp" />
    <img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

渲染图像

由于图像是异步加载的，并在第一次绘制后继续加载，如果在加载之前未定义其尺寸，则可能会导致重排到页面内容。例如，文本因加载图像而被推下页面。因此，设置width和高height属性至关重要，以便浏览器可以在布局中为它们保留空间。

对于任何background-image，设置background-color值很重要，以便在下载图像之前，覆盖的内容保持可读。

压缩HTML和CSS文件

压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符，如空格、换行符、制表符等以及注释。

使用压缩工具，如CodeBeautify，CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。

贡献者: mankueng