优化网页速度的7种方法

网站运营 2024-1-14 07:23 5889人围观网站运营

来大家都是产物司理【起点学院】，BAT实战派产物总监手把手系统带你学产物、学运营。

周末持续两天给大师讲了面向工具编程的首要特征「封装」和「继续」，假如你期待明天继续讲「多态」这个特征，能够你要失望了，明天并没有「多态」，而是教你若何优化网页加载速度，我就是这么不按规矩出牌，哈哈。

优化网页速度的7种方式

周末在家宅着，刷了很多的网页，发现很多网站都没有优化它的加载速度，偶然翻开一个网页要期待10来秒才能加载完成，虽然网页内容很不错，可是给我的第一印象就是慢，不能忍啊！

实在有很多简单粗鲁，又很有疗效的优化方式，我感觉有需要给列位产物司理分享一下，好让你们去督催开辟哥哥优化，改良一下网页的加载体验～

首先，我们来看下网页的加载流程。翻开一个网页，会先拉取一个html页面，然后阅读器剖析了这个html页面后，会按照页面的内容，去拉取javascript、css和图片文件，终极按照这些文件，将页面衬着出来。

优化网页速度的7种方式

我们可以看到，影响一个网页展现速度的首要身分不是网页自己，而是它依靠的一些别的文件。假如优化了这些资本的加载速度，那末网页展现的速度也就上去了。

有哪些简单粗鲁的方式呢？让我来逐一罗列：

1.优化图片资本的格式和巨细

一个网页中，图片资本的巨细占比是最多的，而且单个的文件的巨细也很可观。是以，在保证图片质量稳定的情况下，尽能够的利用高紧缩率的图片格式，图片格式可以依照这个优先级挑选webp > jpeg > png > bmp。同时也要按照图片展现尺寸来拉取巨细最为婚配的图片资本，不要没事就把原图拉下来利用。之前我就碰到过这类情况，一个196*196巨细地区展现的图片，它的文件居然到达了几兆，最初才发现把1960*1960分辨率的原图拉下来了。

2.开启收集紧缩

大部分阅读器在发出请求时，会带上这个标志「Accept-Encoding: gzip, deflate」，暗示这个阅读器可以接管以gzip紧缩方式传输数据，假如你的网页办事器也支持gzip紧缩数据，那末数据以gzip方式传输时，会削减70～80%的流量。

优化网页速度的7种方式

3.利用阅读器缓存

同一个站点下面的分歧页面，常常城市复用一部分资本文件，假如把这些资本文件设备为可缓存的，那末在革新大概跳转到另一个页面时，都不必再从收集拉取相关资本，这样就大大加速了网页的加载速度。

4.削减重定向请求

有的网站对于分歧的终端建造了分歧的页面，比如说在手机上拜候微博，会从weibo.com重定向至weibo.cn，每一次重定向城市致使阅读重视新倡议请求，耽误加载时候。对于这类情况，应当尽能够利用响应式设想，一个weibo.com站点覆盖至一切终端。

5.利用CDN存储静态资本

CDN是一种静态内容分发收集，它在每个省，甚至每个城市都摆设有自己的办事器，用于分发这些静态内容，那末当某个城市的用户要拉取某个资本时，他会首选从当地的CDN办事器上拉取，这样可以保证他最快速的获得该资本。据砖家统计，收集资本中有70%的是静态资本。这就意味着，有70%的内容发生后是不会变化，那末将它们全数放在CDN上面，可以提升这70%的资本的下载速度。

6.削减DNS查询次数

很多人喜好把分歧的图片挂在分歧当域名下，比如说图片A挂在a.pm-teacher.com，图片B挂在b.pm-teacher.com。当一个网页同时利用图片A和图片B时，阅读器需要查询两个域名，要晓得，每次剖析域名都是会浪费时候的，所以尽能够的将全数图片放在一个域名下。

优化网页速度的7种方式

7.紧缩css和js内容

这里说的紧缩和第2点并不反复，上面提到的紧缩是不改变文件内容的紧缩。而css和js中有大量的空格和变量命名（如hello="hello word";），假如将这些空格去除，并用简单的字母来代换变量名（如a="hello word";），那末这些css和js原文件的巨细也会缩小，这样也对加速拉取速度是有帮助的。

不晓得你有没有看出来，上面提到的优化计划的焦点就3点：削减请求数、削减资本巨细、找最快的办事器。假如你是一个网站的产物司理，快去找你们的开辟确认能否有做过类似的优化吧。