速度需求：HTML 和 CSS 技巧助您提升 10 倍页面加载时间

我们都讨厌页面加载这么慢！😔

事实上，网站加载时间每增加一秒（0-5秒之间），转化率平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。（Portent，2019）

但是，您可以通过修改 HTML 和 CSS 文件来提高网站的页面加载速度，而无需费尽周折地购买最优质的托管服务！继续阅读……

（对于本文，我们仅关注使用 HTML 和 CSS 文件来提高页面速度。）

1.延迟加载

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

a) 拆分 CSS 文件

CSS 必须精简，并尽可能快速地交付，并且建议使用媒体类型和查询来避免渲染阻塞。“精简”是什么意思？——拆分 CSS 文件，这样就不会在所有屏幕上执行整个 CSS。

<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />

📌 对于印刷媒体使用-

<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />

📌 对于移动屏幕使用-

<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

📌 对于平板电脑屏幕使用-

<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<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 分离成多个文件，主要的渲染阻塞文件（在本例中为 style.css）变得更小，减少了渲染被阻塞的时间，从而大大提高了页面加载速度。

b) font-displayCSS 的属性

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

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

c) HTML文件中的图像

用户在第一秒只能看到（也需要看到）顶部的图片。那为什么要让他们等到最后加载完图片呢？loading="lazy"这样只会在需要时加载图片。这会大大降低页面加载速度。

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

2. 选择正确的图像格式

将图片制作成.webp格式。建议将其作为 Web 图像格式的标准。

与 PNG 相比，WebP无损图像的尺寸减小了 26% 。在同等SSIM质量指标下，WebP 有损图像比同类 JPEG 图像小 25-34%。动画 WebP 图像支持有损、无损和透明效果，与 GIF 和 APNG 相比，其尺寸更小。

WebP 与 PNG 图像格式

WebP 与 JPEG 图像格式

通过所有这些测试，可以证明，即使有损，webp 图像的压缩程度也更高，因此页面加载速度会大大降低！

您还可以检查图像格式 .avif，在某些情况下它比 .webp 更好，但它是市场上的新产品（于 2019 年发布），因此还没有多少浏览器支持 .avif 格式！

📌 使用<picture>元素作为图像

a) 用于根据不同media条件裁剪或修改图像（例如，在较小的显示器上加载包含太多细节的图像的较简单版本）。b
) 对于不支持 webp 格式的情况，提供替代图像格式。c
) 通过为查看者的显示加载最合适的图像来节省带宽并加快页面加载时间。

如果要为高 DPI（Retina）显示屏提供更高密度的图像版本，请在元素srcset上使用<img>。这样，浏览器就会在省流量模式下选择低密度版本，而您无需编写显式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>

3.渲染图像

由于图像是异步加载的，并且在首次绘制后会继续加载，如果在加载之前未定义其尺寸，则可能会导致页面内容重排。例如，当文本因图像加载而被推到页面下方时。因此，设置width和height属性至关重要，以便浏览器可以在布局中为它们预留空间。
对于任何background-image，务必设置一个background-color值，以确保在图像下载之前，任何叠加的内容仍然可读。

4. 压缩 HTML 和 CSS 文件

压缩是指从代码中删除所有不必要的字符，以减小文件大小。不需要的空格字符（例如空格、换行符、制表符等）和注释都会被删除。

使用CodeBeautify、CSS Minifier等压缩工具来压缩你的 HTML 和 CSS 文件。这些工具将有助于提高你网站的页面加载速度。

我们是——

这些变化肯定会使您的网站页面加载速度提高 10 倍！

编码愉快！😃
分享给有需要的人！💚
关注了解更多⚡