BAT实战派产品总监教你如何优化一下网页速度！

这里的每个人都是产品经理【起点学院】，BAT实战产品总监指导你手把手地学习产品和操作。

周末连续两天给大家讲了面向对象编程的主要特点，“封装”和“继承”。如果您期望今天继续谈论“多态性”的特性，您可能会感到失望。今天没有“多态”，而是教大家如何优化网页的加载速度。我只是乱打牌，哈哈。

周末宅在家里，浏览了很多网页，发现很多网站没有优化加载速度。有时，当我打开一个网页时，加载一个网页需要 10 秒。网页内容虽然很好网站优化，但给我的第一印象就是慢，受不了！

其实有很多简单粗暴有效的优化方法。我觉得有必要分享给所有的产品经理，让大家监督开发小哥优化和提升网页的加载体验~

首先，我们来看一个网页的加载过程。打开网页时，会先拉取一个html页面，浏览器解析完html页面后，会根据页面内容拉取、css和图片文件，最后根据这些文件渲染页面。

我们可以看到，影响网页显示速度的主要因素不是网页本身，而是它所依赖的其他一些文件。如果优化这些资源的加载速度，网页显示的速度也会提高。

有哪些简单粗暴的方法？让我把它们都列出来：

1.优化图片资源的格式和大小

在网页中，图片资源的大小占比最大，单个文件的大小也相当可观。因此，在图像质量不变的情况下，尽量使用压缩率高的图像格式。图片格式可以根据这个优先级选择webp > jpeg > png > bmp。同时，还需要根据图片展示的大小，拉取大小最匹配的图片资源。我以前遇到过这种情况。在 196*196 大小的区域中显示的图片具有几兆字节的文件大小。最后发现拉下来的是分辨率为1960*1960的原图。

2.开启网络压缩

大多数浏览器在发送请求时都会带有这个标志“-:gzip,”，表示浏览器可以接受gzip压缩的数据传输。如果您的 Web 服务器也支持 gzip 压缩数据，则数据为 gzip 格式。在传输过程中，流量将减少 70% 到 80%。

3.使用浏览器缓存

同一个站点下的不同页面往往会复用一些资源文件。如果将这些资源文件设置为可缓存，那么在刷新或跳转到另一个页面时，就不需要从网络中拉取相关资源，从而大大加快了网页的加载速度。

4.减少重定向请求

一些网站为不同的终端创建不同的页面。比如在手机上访问微博时，会被重定向到 。每次重定向都会导致浏览器重新发起请求并延长加载时间。在这种情况下，应尽可能使用响应式设计，一个站点覆盖所有端点。

5.使用CDN存储静态资源

CDN 是一个静态内容分发网络。它在每个省甚至每个城市部署自己的服务器来分发这些静态内容。当某个城市的用户想要拉取某个资源时，他会优先从本地的CDN服务器拉取，这样可以保证他能尽快的拿到资源。据砖家统计，70%的网络资源是静态资源。这意味着 70% 的内容在生成后不会发生变化，因此将它们全部放在 CDN 上可以提高这 70% 资源的下载速度。

6.减少DNS查询次数

很多人喜欢把不同的图片放在不同的域名下，比如图片A和图片B。当一个网页同时使用图片A和图片B时，浏览器需要查询两个域名。要知道每次解析域名都需要时间，所以尽量把所有图片放在一个域名下。

7.压缩css和js内容

这里所说的压缩与第2点不一样。上面所说的压缩是不改变文件内容的压缩。但是css和js中有很多空格和变量名（比如hello=”hello word”;）。如果去掉这些空格，把变量名换成简单的字母（比如a=”hello word”;），那么这些css和js原文件的大小也会变小，对加快拉取速度也有帮助.

不知道大家能不能看出来，上面提到的优化方案的核心是三点：减少请求数，减少资源大小，找到最快的服务器。如果你是一个网站的产品经理，去你的开发者那里看看他们是否做过类似的优化。

#专栏作家#

给产品经理讲技术网站优化，微信公众号（），大家都是产品经理专栏作家。资深程序员，专注客户端开发数年，对前后端技术稍有了解网站优化，热衷于探索新技术领域。

除非注明，否则均为未来可期SEO原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.szsinotech.com/seo_3279.html