HTML5网页加载速度优化方法

为什么要进行网站页面加载速度优化？

网站速度有助于形成访问者对该网站和业务的第一印象。一个网站有了大量功能和内容，而且网站也美观、实用。然而，如果这些功能或内容没有得到充分优化，可能会对网站速度产生不利影响。网站加载的速度对任何访问该网站的人来说都很重要。
网站页面优化有下面3点好处：

1、高速确保了令人印象深刻的用户体验
用户第一印象对一个企业网站的展示信息至关重要，当用户第一次打开网站时，他们希望网站能快速加载，用户的耐心通常只有3秒。速度在用户如何在网络上感知品牌方面起着决定性的作用。
人们倾向于认为速度更快的网站更可靠、更专业。相反，速度慢的网站对用户来说大多是令人讨厌的，大多数用户会立即断开，更喜欢访问其他更快的网站来满足他们的需求。扭转这种负面印象可能非常具有挑战性。如果加载时间超过三秒，40%的人会完全放弃访问网站。因此，为了给首次访问的用户提供令人印象深刻的用户体验，网站每次打开都应该快速加载。

2、速度影响网站的搜索引擎优化（seo）排名
在保证网站质量的情况下，快速加载是对于搜索引擎排名来说也是一个积极的因素。

3、速度影响转化
页面加载速度慢的网站，当页面加载时间过长时，用户将停止继续访问此类网站，这导致潜在客户的流失。
企业要想在网络上取得成功，拥有一个快速加载的网站是必不可少的。一个快速加载的网站不仅提供了良好的用户体验，而且有助于在客户中创造持久的积极印象。因此，优化页面加载速度对于每个网站来说都是至关重要的。

怎么样进行网站页面加载速度优化？

1、延时加载图像
提高网页加载速度的一个非常有用的技术是延迟加载。这指的是在渲染HTML时不立即加载所有图像，而是仅在用户在视口中实际可见（或立即可见）时加载这些图像的做法。这意味着立即可见的内容可以更快地使用，而后续内容只有在滚动到时才会渲染其图像，浏览器不会浪费带宽加载用户永远看不到的图像。
<img src="picture.jpg" loading="lazy" />

2、延时加载iframe
与img元素相同，您也可以使用loading属性来指示浏览器延迟加载iframe内容，从而提高网页加载速度：
<iframe src="https://example.com" loading="lazy"></iframe>

3、script 元素添加async属性，如：
<script src="index.js"></script>
这种并不能解决等待脚本加载的问题，通过向 script 元素添加async属性，可以使网页加载速度更快，如：
<script async src="index.js"></script>

4、rel=preload 预加载内容
从HTML、CSS和JavaScript中获取链接到的其他资源（如图像、视频或字体文件）也会对网页加载速度产生影响，阻碍代码执行并降低体验。缓解此类问题的一种方法是使用rel=preload将＜link＞元素转换为预加载程序。例如
<link rel="preload" href="style.css" as="style">
当遇到rel=“preload”链接时，浏览器将尽快获取引用的资源，并使其在浏览器缓存中可用，以便在后续代码中引用时更快地准备好使用。预加载用户将在页面早期遇到的高优先级资源是有用的，这样体验就尽可能流畅。
需要注意的是，使用 preload 必须要确定资源是一定会用到的，不能滥用，特别是移动端，否则可能会浪费用户流量。