大牛给出的10条提高网站加载速度的建议

大牛给出的10条提高网站加载速度的建议

网站的加载速度直接影响用户体验，如果一个网站打开速度是4秒，我估计大部分的人直接关掉页面了，那么用户的流失率很高，程序员和设计师辛辛苦苦制作设计的网站就无法被用户使用和欣赏。

所有搜素引擎会将网站的打开速度作为其排名的影响因素。

那么如何提高网站的加载速度呢，今天我整理一份来之大牛们的10条建议。

一、缩小图像尺寸

图像在网站速度中起着重要作用，但是通常较大的文件会减慢页面加载时间。最简单的解决方案之一是通过裁剪进行压缩。但不要简单地将width参数设置为较小的尺寸。调整图像大小以加快加载速度，您会发现互动时间减少了70％。

如果图片存在阿里云oss上，那么直接使用图片的url裁剪工具来裁剪，非常方便。教程连接http://blog.bfw.wiki/user1/15669175002117390058.html

二、lazyload页面加载设置为“延迟”以提高速度

使用“延迟加载”可显着提高页面速度得分。如果仅在读者向下滚动网页时才加载网页上的图像，则采用这种技术可以解决您的网站最大的加载问题。许多内容管理系统都提供第三方或内置插件，或者您可能需要使用脚本工具。很多插件可以用，插件地址：http://one.bfw.wiki/plugin/15581755353618860080.html

三、css样式内联

通常我们的做法是讲CSS样式文件放在外部文件中，如果将其放入HTML文件中会减少浏览器在显示网页之前必须下载的文件数。虽然这种做法与您惯常的做法相反，但它适应了搜索引擎最新的限制样式表尺寸的要求。搜索引擎巨头最终可能会以更高的排名奖励您。

四、 充分利用浏览器缓存

缓存非常有用，特别是对于在许多页面上具有共同元素的网站而言。为什么？仅需下载一次的CSS样式表和图像即可加快网页加载速度。

一般的web容器如nginx和apache都提供了静态资源缓存功能，我们以nginx为例

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
#过期时间为30天，
#图片文件不怎么更新，过期可以设大一点，
#如果频繁更新，则可以设置得小一点。
expires 30d;
}
location ~ .*\.(js|css)$ {
expires 10d;
}

五、启用GZIP压缩

这是一个简单的公式：较小的文件=更快的下载=更快乐的用户。就像缩小图像可以加快加载速度一样，压缩基于文本的HML，CSS和JavaScript文件可以节省带宽，并可以帮助网站实现更长的加载时间。

那么在nginx中如何是设置呢

server{
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;
}

六、尽量减少资源大小

将js及css等静态资源进行压缩减少文件大小可以提高加载的速度，js及css的常用压缩插件是UglifyJS接Less ，当然也有在线的js及css压缩工具连接为http://tool.bfw.wiki/tool/1559286383549195.html

七、减少重定向

如果您链接到重定向到另一个页面的页面，则此重定向将花费时间并减慢用户的浏览体验。每个重定向都需要一个新请求发送到服务器。因此，将HTTP重定向的数量保持在最低水平非常重要。使用链接检查器来识别不必要的重定向，并将其替换为直接链接。

八、使用内容分发网络（CDN）

内容交付网络通过在世界各地的节点中提供静态资源来帮助网站更快地加载，然后通过最快的途径将内容交付给最终用户。像阿里云提供的CDN一样，对于那些需要大量流量请求媒体文件的站点特别有用。

九、异步延迟模块化加载JavaScript

一个html页面可能有很多功能，但是一般的代码编写者会把所有的javascript脚本一次性加载到html dom中，而最终用户并没有操作这个页面，也就是说这些js文件白白的浪费加载了，影响了用户的体验，如果我们将这些js文件进行模块化，在页面加载的时候不立即加载，而是到用户点击按钮进行操作时动态按需加载，那么提高了用户打开页面的速度了，也不浪费网络带宽资源及浏览器内存。bfwone就是这样一个按需加载的js框架，上千款js插件及自定义模块按需加载，具体请查看：http://one.bfw.wiki/

十、用用谷歌的AMP加速技术

AMP——移动页面加速，是由谷歌公司启动的一个加快移动页面加载速度的项目。

从内部一个 case 来看，AMP 页面在 Load Time 上比 PC 页面快 1 倍，在交互时间上快 2 倍。

其次，SEO 流量会提升！（具体可见下一部分 AMP Cache ），虽说 Google 说过 AMP 并不会提升排名和流量，但从我们的实战经验来看，AMP 流量还是会有明显提升。