网站内容优化-(网站内容优化)

这里人人都是产品经理【启航学院】，BAT实战产品总监带你通过系统了解产品和运营。

周末连续两天跟大家聊了面向对象编程的主要特点“封装”和“继承”。 如果你还期待着今天继续讲“多态”这个特性，那你可能要失望了。 今天没有“多态”，而是教大家如何优化网页的加载速度。 我只是不按规则打牌，哈哈。

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

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

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

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

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

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原文件的体积也会变小网站内容优化，对于加快拉取速度也有帮助。

不知道大家有没有注意到，上述优化方案的核心是3点：减少请求数，减少资源大小，找到最快的服务器。 如果你是一个网站的产品经理，去找你的开发者确认是否做过类似的优化。

#专栏作家#

跟产品经理聊技术，微信公众号（），人人都是产品经理的专栏作家。 资深程序员，专注客户端开发多年，对前后端技术略有了解，热衷于探索新技术领域。