7个可以让我们网页加载速度提高十倍的小技巧

# 7 个可以让我们网页加载速度提高十倍的小技巧（仅通过 HTML 和 CSS）

# 懒加载 (Lazy Loading)📌拆分我们的 CSS 文件进行懒加载

我们要让我们的 CSS 文件体积变动更小，且有针对性，我们可以使用媒体类型 ( media )，对不同设备（pc 端、移动端、平板端）的 css 代码进行拆分和懒加载。使整个 CSS 不会在所有设备都进行加载。不同的移动端只会加载对应的 css 文件，这样网站在加载时速度就会更快。

<!-- 加载和解析过长的css文件会增加网站的加载时间 -->
<link rel="stylesheet" href="styles.css" />

# 专门适配手机端的 css

# 专门适配平板电脑屏幕的 css

#

# 对于不同的移动端拆分出不同的 css 文件

代码解读

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

# 📌用好 font-display 属性

font-display 用来控制某一字体在尚未成功加载时采用何种方式显示文本。如果不明确指定 font-display ，浏览器一般会采用「block」的方式进行显示，即在该字体完全加载成功之前啥都不显示。

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

# 图片的懒加载

用户在进入网站的第一秒只能看到（也只需要看到）网站顶部的图像。那为什么要让网站等待所有图片都加载完成后再显示？我们可以对图片使用 loading="lazy" 以便在滑到对应的部分时才去加载对应的图片。这样可以大大缩短网站的加载速度 代码示例

# .webp 图片格式

我们强烈推荐在网站中使用 .webp 格式的图片，因为 .webp 的图片在对比之下体积更小同时图片的质量也有所保证，网页加载起来更快。

# <picture> 图象标签

1. <picture> 标签可以根据画面自动匹配的不同尺寸显示不同图片
2. 当遇见不支持 webp 格式的情况，可以显示替代的图片。
3. 通过加载最适合客户端显示的图像来节省带宽并加快页面加载时间。

图片的异步加载
由于图像是异步加载并在页面第一次绘制完成后会继续加载，如果在图片加载前没有预先预留足够的位置，那么图片加载完成后可能会导致页面内容回流。例如，因图像插入导入文本位置的改变。所以 width 和 height 的设置可以在布局中为图片的加载预留出足够的位置，而不至于引起页面的回流。 对于所有 background-image，我们都应该设置一个 background-color 值，这样可以起到占位的作用，当图片加载完成时不会引起回流，从而影响网站的加载速度

# 压缩 HTML 和 CSS 文件

从代码中删除所有不必要的字符，删除不需要的空白字符，如空格、换行符、制表符等和注释。来优化我们的文件体积。可以缩短我们的网站加载速度

我们可以使用 CodeBeautify、CSS Minifier 等代码压缩工具来压缩 HTML 和 CSS 文件。这可以缩短我们的网站加载速度