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

如果我们的网页加载的速度太慢的话，会给我们的用户带来很不好的体验

据调查显示，网站加载时间在0-5秒内的体验差异感对用户来说最为明显，(0-5秒内)每相差一秒的加载速度，都会使得用户的体验感受相差万里。而且网站加载的速度越慢，用户流失的越严重。那我们要如何优化我们的网站来提高用户的体验感呢？

接下来我们就来讲解7个仅通过HTML和CSS就可以让我们网页加载速度提高十倍的小技巧。

📌懒加载(Lazy Loading)

懒加载也叫延迟加载，指的是在网页中延迟加载资源，首次加载只加载用户可视区域的网页资源，可视区域外的资源不会被加载的一种行为。

📌拆分我们的CSS文件进行懒加载

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

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

专门适配手机端的css

<!-- 大于480px的屏幕在加载资源时，不会加载mobile.css文件，-->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

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

<!--tablet.css文件只会在大于480和750px的屏幕中加载。 -->
<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 750px)" />

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

<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通过将 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"以便在滑到对应的部分时才去加载对应的图片。这样可以大大缩短网站的加载速度代码示例

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

📌`.webp`图片格式

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

📌`<picture>`图象标签

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

<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="zayyo" loading="lazy" />
</picture>

📌图片的异步加载

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

📌压缩HTML和CSS文件

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

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

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情

这样优化网站性能真的很骚，可惜你不会