怎样提高网页加载速度

所周知，如果一个网站打开速度特别慢的话会流失很多用户，因为用户有很多选择，没必要去花时间等待你这个网站,导致网站流量大大下跌。所以提高网页加载速度显得尤其重要。

1.选择可靠服务器或者虚拟主机为提高速度打基础

2.开启gzip功能对网站源文件进行压缩

3.精简网页网页源文件降低网页大小

4.减少flash或者大图片的使用

5.非必要js放到页面底部延时加载

6.使用cdn对网站进行加速

7.js css文件外部调用减小文件大小

8.生成静态文件提高加载速度

9.使用缓存技术提高加载速度

有的搜索引擎排名与网站的加载速度或多或少有些关系，而这次百度闪电算法来了，将网站首屏打开速度被列入优化排名行列，并明确指定打开时间为2秒，那么我们在如何做好网页首屏的打开速度呢？

要做好网站速度优化，就必须要做好软件和硬件两个方面，从网站程序以及页面设计本身解决网页资源的加载，然后就是服务器本身需要有足够的带宽及处理资源，下面子凡就依次来与大家探讨。

首先我们打开一个网页看到的都只是前端，所以我们看到一个页面背后的支持就是HTML代码，其中就包含了各种网页标签，其中包括网站优化中的TKD，载入的渲染资源：javascript、css，已经页面内容：图片、音频、视频等。

一、代码的足够简洁

减少代码冗余，保持简洁的代码风格，这是作为一个网页程序员的必修，能同样实现一个效果的能用css就尽量不用js，能用两行代码解决问题的就别写三行，这是最基础的一点。

二、减少资源载入

这里子凡所说的资源主要是指js、css文件，因为我知道现在很多的前端开发设计人员喜欢用各种开源的特效或者别人做好的效果，其中包括为了给网站添加几个图标就引入一个开源的图标字体库，为了某个特效又在引入几个js和css文件，这无形之中就为网站加重了“份量”。

三、图片使用懒加载，视频或音频禁止自动播放

还记得子凡曾在泪雪博客写过关于“图片懒加载是否会影响网站SEO优化”的文章，其中就说到过如何合理的使用图片懒加载技术提升用户体验而不影响网站优化，因为懒加载是为了防止页面一被打开就立即载入图片，这样就会占用网络带宽，从而影响网站的打开速度以及网站首屏的请求，所以非正文图片都是可以做懒加载的。

图片是每个网站基本都少不了的东西，但是对于做视频、音频的站点来说，如果打开页面就自动播放，占用的网站带宽资源都更多了，所以这也是一个网站打开速度优化的一个小知识。

四、使用CDN加速静态资源

关于使用CDN加速是否影响网站优化的文章子凡也曾有过讨论，子凡对于网站整体做CDN加速还是有些不太认同，但是对于将网站静态资源做CDN加速镜像或者缓存优化却是非常认同的，例如将网站的js、css、图片等文件做CDN加速是更有利于整个网站的加载和打开速度的。

五、提升页面渲染速度

将CSS样式写在头部样式表中，减少由CSS文件网络请求造成的渲染阻塞。
将JavaScript放到文档末尾，或使用async方式加载，避免JS执行阻塞渲染。
对非文字元素（如图片，视频）指定宽高，避免浏览器重排重绘。

六、服务器本身的速度优化

启用服务器Gzip压缩功能；
开启数据库查询及页面缓存功能（如果是直接生成静态页面的网站可忽略）；
升级或者保证服务器足够的网络带宽；
开启网站缓存，充分利用本地缓存。

同样随着网络安全的重视程度，如果你的网站已经安装SSL证书启用了HTTPS协议，那么你可以开启HTTPS/2或者SPDY这个功能，可以在某些程度上加速网站的打开。

总结

虽然百度“闪电算法”是正对移动搜索排名的算法，而子凡上述的所有知识点都是通用的，并没有移动端或电脑端的区分，写得不算非常详细，子凡只是将这些非常容易出现的问题或者被忽略的问题按照自己的思路写出来了，虽然语句都写得非常简单，但是要真的操作起来，如果你不懂网页代码或者服务器，操作起来可能也会是已经非常困难的事情。

最后最后子凡还想给自己的 Fanly MIP 主题打个广告，如果你使用WordPress程序，并且重视百度这次的闪电算法，你可以使用子凡开发的这个MIP主题和插件，因为主题和插件都提供免费版本，所以大家可以非常方便的接入，当然你也可以支持子凡或者想要更好的服务可以购买我的收费版本。

好啦，如果你看这里，本文从标题到正文，再到最后的广告你都已经阅读完毕。see you。。。

除非注明，否则均为泪雪博客原创文章，转载请以链接形式标明本文地址

本文链接：https://zhangzifan.com/website-speed-seo.html

么是CSS Sprite精灵？

是用于前端的一种图片应用技术，通常情况，我们的开发的网页或许有很多张图片，假如在一个页面上有50多张小图片，这意味着浏览器要逐个下载50张图片。Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中，这样一来，当访问页面时，就只需要下载1张图片了，这显然大大减低了服务器请求压力。

这个技术加速网页响应速度，加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

什么是雪碧图？

雪碧图就是许多在网页中需要的小图片被合并到了一张图片当中，那么这张图片就叫雪碧图，例如:

可以用来合并动画帧等用途，最多常在网页游戏中应用

如何毫不费力的制作雪碧图并加以使用?

前往Css Sprites在线工具地址：https://www.toptal.com/developers/css/sprite-generator

将需要的图片导入到在线网页工具中，就会自动生成雪碧图，如下图

可以看到在线工具自动生成了雪碧图你可以点击下载，然后还生成了css样式，会基本网页的你就应该自然会用了

我们下载生成的雪碧图得到如图:

使用后的效果案例：

案例来自：http://mc.163.com/index.html 我的世界官网

并非本人开发，我只是拿这个作为例子。

Css Sprite原理：

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。