【干货】优化网站加载速度方案（上篇）

时间：2023-04-18 23:00:01 | 来源：网站运营

时间：2023-04-18 23:00:01 来源：网站运营

【干货】优化网站加载速度方案（上篇）：

前言

很多的网民在浏览网页的过程中会发现并不是所有的网站页面都能够快速被打开并可以顺利浏览，尤其是在遇到内容丰富且价值高的网站加载速度极慢，而这必定会降低用户体验的效果，影响访问者的等待耐心，流失一定的客源。那么，今天我就来讲讲几个可以快速提升网站加载速度的优化方案以及它们需要注意的点，收藏这篇文章，让你的个人博客网站或者你老板的公司官网能够拥有更良好的用户体验吧！

如何测试网站的加载速度呢？

谷歌提供的强无敌的网站加载速度测试入口:

https://developers.google.com/speed/pagespeed/insights/

只要输入目标网址，便可以测出手机版和电脑版两种设备的网页加载速度，最强的地方在于，它不但会给网站速度进行打分，还会检测出影响网站加载速度的各种因素按大到小排序，还会提供给用户非常详细的改善方案，小编也是详读了谷歌提供的各种改善方案之后，总结了几点最有效果的，以及它们在提升速度的同时，会带来哪些负面的影响。（谷歌官网的手机版也才85分，一般没有做过优化的普通网站也就只有20-30分）

4点亲测有效的网站加载速度改善方案

1.Lazy Loading（懒加载）【安全】
2.更改图片压缩方式【不安全】
3.Improving First Contentful Paint (FCP )【不安全】
4.Enable text compression (对手机版极为有效果) 【安全】

Lazy Loading（懒加载）

在加载正常网页的时候，通常需要先加载出网页上所有的图片以及字体元素，即使这些图片和文字在用户需要向下滚动屏幕的时候才能看到的位置。懒加载即对于需要滚动才能看到的图片和文字等元素的延迟加载，换句话说，用户永远停留在页面最上方的话，那么就不会花费用户的时间去加载隐藏的部分图片和文字，会随着用户边滑动页面边加载元素。就是这样一个感觉很自然的一种方式，就可以很有效的提升网站的加载速度。
具体的做法也很简单，对于html中的图片元素，在img标签中加入loading='lazy'属性，对于字体元素，在font的link标签中加入ref='preload'（这个其实是预加载）。

更改图片压缩方式

图片，一直是网页加载速度慢的罪魁祸首之一，如果是一张2K分辨率的图片，使用一般的格式像jpg或者png的话，大小也要2M左右，可能会拖延数秒钟的加载时间，有没有什么方法可以在保证图片视觉不失真的前提下缩小体积呢？答案就是将图片转化成WebP格式，而不是使用jpeg或者png格式。WebP是谷歌于2010年提出的一种新的图片压缩方式，WebP为网络图片提供了无损和有损两种压缩选择，据官方实验表明：无损WebP相比PNG减少26%大小；有损WebP相比JPEG减少25%~34%的大小，总结就是：图片体积大幅减小，但是视觉效果仍然很棒。
具体的实现方法就是将网页里的图片格式都改为WebP格式就可以了，图片格式转化可以在网上搜索在线的WebP转化器，或者可以参考谷歌的官方文档进行转化。

https://developers.google.com/speed/webp/docs/cwebp

需要注意的是，现有的大多数浏览器均已支持WebP格式图片的呈现，但仍然有像IE浏览器这样的异端不支持，这意味着IE浏览器的用户看不到你网页上的WebP格式的图片，所以在使用此方法前，你需要权衡利弊。



以上的两种方法对于电脑版网页加载速度的优化效果极为明显，可以让网页的跑分从30分升到60分，但是对手机版网页的效果不太显著，关于手机版网页的优化我会在“【干货】优化网站加载速度方案（下篇）”中继续介绍，敬请大家期待！