网页性能优化的 8 种方式，让网站飞起来

网站的性能对于用户的体验以及搜索引擎排名非常重要。根据谷歌的一项研究，超过三秒才能加载的网站会让53%的移动用户放弃浏览，而对于产品相关的网站，如果页面加载速度慢，每慢一秒就会损失5%的用户转化率。可见，网页的性能优化非常重要。在本期视频中，我们将介绍一些优化网站性能的方法。

压缩文件

第一种优化方式是压缩文件。对于 HTML、CSS 和 JavaScript 这些源代码来说，它们包含大量的空格和不必要的缩进，会占据文件空间。而网络传输受到带宽的影响，可能会使得大文件加载很慢。对这些文件进行压缩之后就能够减少文件大小，提高加载速度。你可以使用一些库来压缩代码，例如使用 UglifyJS 用于压缩 JavaScript，CSS Nano 来压缩 CSS，HTML Minifier 来压缩 HTML 文件。它们可以把源代码中的空白去掉，还会把代码进行转义，以最简约的形式呈现。这种形式可能不易阅读，但是能够保证代码能够正常执行。

另外一种压缩方式是利用服务器的功能，开启 Gzip。对于 Apache 或者 Nginx 都有对应的配置来开启。

压缩图片

第二种方式是压缩图片。可以利用一些图片压缩工具，比如说 ImageOptim、TinyPNG 等等。这些工具都比较简单，直接打开之后把图片拖进去，就能够自动进行压缩。另外，对于图片文件的选择，我们一般使用 JPG 格式的图片展示照片和比较复杂的图片，PNG 用于展示带有透明度的图片，SVG 用于加载矢量的图形。

浏览器缓存

第三种优化方式是利用浏览器的缓存，避免反复请求页面。可以把不常变化的页面内容缓存起来，每次浏览器去取本地的就可以了。比如说可以把一些图片样式和 JavaScript 代码缓存起来。这个能够极大地减少数据的传输。这个可以通过后端代码来设置，或者也可以通过 Apache 或者 Nginx 服务器进行设置。

CDN

第四种方式是利用 CDN。对于一些云厂商都提供了 CDN 服务，它会把我们的网站分发到全球不同的地理位置，然后用户在访问的时候会根据他当时的位置，取最近的服务器来访问我们的网站。当然这些网站会缓存在 CDN 服务器上，在修改之后也记得要去刷新缓存。

Deffered 和 Async 的 JavaScript

第五种是使用 async 和 defer，对于一些不太重要的 JavaScript，可以对它们进行延迟加载或者异步加载，先保证HTML DOM 的渲染。async 会在 js 下载完成之后执行，而 defer 会在 HTML 解析完成之后执行。普通的 script 则会在解析到它时立即加载并等待加载完成之后执行。

CSS 预加载（关键 CSS）

第六种是使用 CSS 资源预加载，先加载最关键的 CSS，之后再延后加载不关键的 CSS，可以通过预加载来实现。

图片懒加载

第七种方式是用图片懒加载。当图片不在屏幕的时候，那么它就先不去加载。当用户滚动到一定的距离之后，再去加载图片。也就是 lazy loading。可以通过 image 标签的 loading 属性来实现。

提高代码效率

第八种方法就是优化代码的效率，使用良好的数据结构和算法，来减少程序的运行对内存的占用。

好了，这些就是网站性能优化的一些常见方法。当然，还有很多其他的方法可以自己去研究。你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！