网站 Web 性能和速度优化指南大全

网站 Web 性能和速度优化指南大全

网站的优化不但关系到搜索引擎的收录速度与排名，严重影响SEO，还很是影响用户的体验，本文的内容首要斟酌网站的全方位优化，参考雅虎给出的35条优化倡议，连系当前互联网和云真个架构，对网站的优化停止了分析和探讨。文章内容比力长，可以到原文章的地址：网站 Web 性能和速度优化指南大全 - Break易站，翻开右下角的文章目录，方便阅读与检察。

网站的速度是用户体验的第一目标，好的网站速度对于用户翻开网站的体验是很是重要的，出格是在网站这样的项目中，假如一个用户需要跨越5s才能看见页面，他会绝不犹豫地封闭它。之前有几篇文章提到了wordpress网站的优化，这里，对网站一切的优化技能停止了全方位的总结，使得wordpress网站在速度和各本性能上能获得更大的提升，为了更好地分析网站的性能，总共从八个方面来动手，网页内容，办事器，Cookies, CSS, JS， 图片，移动端和WordPress相关。总共优化方式汇总以下：

网页内容：

网站只管削减http的请求次数网站只管削减DNS的查询次数网站只管避免页面跳转、重定向网站只管缓存AJax网站只管削减DOM元素的数目网站只管按照域名分别页面的内容网站只管削减iframe的利用网站只管避免404毛病网站的提早加载网站的提早加载

办事器

网站利用CDN加速优化网站增加Expires大概Cache-Control报文头优化网站采用Gzip紧缩优化网站设置Etags优化网站尽早flush革新输出缓冲网站利用GET来完成AJAX请求网站避免空的图像来历，设置图片src属性

Cookies

网站削减Cookies的巨细网站内容页面挑选无Cookies域名

CSS

网站把款式表置于顶部网站避免利用CSS表达式（Expression）网站用取代@import网站避免利用滤镜filter

JS

网站把JS剧本置于页面底部网站利用内部JavaScript和CSS网站削减JavaScript和CSS网站剔除反复的JS剧本网站削减DOM拜候网站开辟智能事务处置法式

图片

网站要优化图像网站优化CSS Spirite网站不要在HTML中缩放图像网站中的favicon.ico要小而且可缓存

移动端wordpress相关

WordPress封闭日志订正记录WordPress删除数据库缓存WordPress禁用谷歌字体WordPress制止wptexturize函数WordPress去除header中的非必须项WordPress移除JS和CSS中的版本号WordPress移除非需要的插件WordPress屏障批评的头像WordPress封闭更新的提醒

前端性能的一个重要目标是页面加载时候，不但事关用户体验，也是搜索引擎排名斟酌的一个身分。

来自Google的数据表白，一个有10条数据0.4秒能加载完的页面，酿成30条数据0.9秒加载完以后，流量和广告支出下降90%。Google Map 首页文件巨细从100KB减小到70-80KB后，流量在第一周涨了10%，接下来的三周涨了25%。亚马逊的数据表白：加载时候增加100毫秒，销量就下降1%。

以上数据更说明「加载时候就是金钱」，前端优化首要围绕进步加载速度停止。而假如是你的网站是Wordpress网站的话，安装WP Fastest Cache和WP-Optimize这两个插件会让你加倍轻易实现上面的功用。

一、 网页内容：

网站的页面内容是办事器传给阅读器的内容，也是影响前端性能很是关键的元素，它主如果指传给阅读器的HTML的内容，那末这网页内容优化的关键身分，主如果怎样做的呢？

（1）网站只管削减http的请求次数

网站Web 前端 80% 的响应时候都花在图片、款式、剧本等资本下载上。在翻开一个网站的时辰，你可以翻开谷歌开辟者工具，去用谷歌开辟者工具评价网站资本加载的http数目和性能。最间接的方式是削减页面所需资本，但并不现实。所以，削减HTTP请求数首要的路子是：

合并内部资本文件(如javascript,css,图片文件）

图片的合并,是将多个图片合并为一个图片,然后采用css的一些设备（background-image,background-position) 来利用它们。这个很简单适用(可是结果也是明显的）。主如果利用CSS Sprite将布景图片合并成一个文件，经过background-image 和 background-position 控制显现。javascript和css文件的合并，这个能够大师不太经常留意到。如果利用Wordpress的话，可以利用WP Fastest Cache插件来合并。

利用Inline images 这类方式. 这个方式能够依靠于阅读器的实现，今朝并不是一切的阅读器都支持。可以利用Data URI scheme将图片嵌入HTML大概CSS中；大概将CSS、JS、图片间接嵌入HTML中，会增加文件巨细，也能够发生阅读器兼容及其他性能题目。

对于合并JS和CSS的文件，有下面这些弱点：

破坏了原有文件的结构分歧页面需要的文件组合能够是纷歧样的，这类情况下会需要发生多个分歧的文件，而且需要比力谨慎地保护它们假如文件的内容发生变化，就需要重新再来一次

所以，假如网站的结构稳定的话，不要经常点窜JS和CSS文件是最好的挑选。在用wordpress插件WP Fastest Cache的时辰，假如点窜了JS和CSS，要用插件把合并的JS和CSS缓存删除，重新天生即可。

（2）网站只管削减DNS的查询次数

DNS的查询是指：用户输入URL今后，阅读器首先要查询域名（hostname）对应办事器的IP地址，一般需要花费20-120毫秒时候。DNS查询完成之前，阅读器没法从办事器下载任何数据。

操纵系统（例如Windows)也会对DNS查询的成果做缓存，只是由于阅读器利用过分频仍，今朝的支流阅读器都利用自己独占的缓存，而不利用操纵系统的缓存。

IE 中默许情况下对DNS的缓存时候为 30分钟。关于若何设置，可以经过阅读这篇文章领会更多信息。早期的版本设备为1天，与Windows的设备分歧。Windows的DNS缓存，可以经过ipconfig /displaydns 这个号令来检察。Firefox默许的DNS缓存时候听说为1分钟，假如不满足这个选项，间接点窜 network.dnsCacheExpiration 即可。Google Chrome默许的DNS缓存时候，据我观察也是1分钟，可以经过chrome://net-internals/#dns 这个地址检察。

我们可以看到即使一样为阅读器，它们在缓存DNS的题目上也不尽不异（首要表现在时候上面），这个差别到底有什么斟酌呢？

缓存时候较长，有益于反复操纵DNS缓存，进步速度。缓存时候较短，有益于实时地检测到方针站点的IP地址更新，以停止正确的拜候。

所以，两者都有其优点和斟酌。

而对于网站利用CDN的益处，在这里也是可以表现出来的，利用了CDN的网站，在剖析域名的时辰，会分派到比力近的IP地址停止DNS的剖析，从而进步了网站的速度和加载。

（3）网站只管避免页面跳转、重定向

HTTP重定向经过301/302状态码实现。下面是一个有301状态码的HTTP头

HTTP/1.1 301 Moved Permanently Location: http://example.com/newuriContent-Type: text/html

今朝，我们一向只要区分301和302即可。它们本质上的区分究竟是什么呢？实在也不难：301暗示永久重定向，302暗示姑且重定向。对于一般的用户而言，能够你还没法体味出来他们的区分，由于反正都是要重定向的。但对于搜索引擎而言意义就非凡。我们都晓得，搜索引擎是需要不定期对网站资本停止爬网，以便完善对应的索引结构的。当某个资本被永久重定向（301），搜索引擎会聪明地晓得，在索引中应当记录就是永久重定向以后的新地址，而不是老地址，这样便可以避免用户经过搜索引擎来查询的时辰，每次还需要先到老地址，再重定向到新地址。而对于姑且重定向（302），则不会这么做。

可是，很多时辰都没法避免重定向，比如，网站http://breakyizhan.com在阅读器中输入以后，还是会301重定向到https://breakyizhan.com/这个网站，而且就算输入了https://breakyizhan.com也会重定向到https://breakyizhan.com/。既然偶然辰没法子避免，可是我们还是在在网站的内链，大概外链只管避免重定向，以下做法：

最浪费的重定向经常发生、而且很轻易被疏忽：URL 末端应当增加/但未增加。比如，拜候http://astrology.yahoo.com/astrology将被301重定向到 http://astrology.yahoo.com/astrology/（留意末端的 /）。假如利用 Apache，可以经过Alias或mod_rewrite或DirectorySlash处理这个题目。网站域名变更：CNAME连系Alias或mod_rewrite大概其他办事器类似功用实现跳转。网站是https的，就只管用https，而不是http。

（4）网站只管缓存AJax

Ajax 经常被说起的一个益处就是由于其从背景办事器传输信息 的异步性而为用户带来的反应的立即性。首要操纵在网站办事器设置Cache-control的报文头来实现的。其典型的利用处景包括：

异步加载，使得页面的内容可以分批加载。部分更新，使得页面的部分更新不会致使页面的革新。

由于AJAX实在也是需要倡议请求，然后办事器履行，并将成果（凡是是JSON格式的）发送给阅读器停止最初的显现大概处置，所以对于网站设想优化的角度而言，我们一样需要斟酌对这些请求，能否可以尽能够地操纵到缓存的功用来进步性能。

那末，什么样的请求才能做缓存呢？

POST的请求，是不成以在客户端缓存的，每次请求都需要发送给办事器停止处置，每次城市返回状态码200。（这里可以优化的是，办事器端对数据停止缓存，以便进步处置速度）GET的请求，是可以（而且默许）在客户端停止缓存的，除非指定了分歧的地址，否则同一个地址的AJAX请求，不会反复在办事器履行，而是返回304。

在web的优化中，很多优化都可以用AJAX来优化，比如：一个 Web2.0的 Email客户端会利用 Ajax来自动完成对用户地址薄的下载。假如用户在上次利用过 Email web利用法式后没有对地址薄作任何的点窜，而且 Ajax响应经过 Expire大概 Cacke-Control头来实现缓存，那末便可以间接从上一次的缓存中读取地址薄 了。必须奉告阅读器是利用缓存中的地址薄还是发送一个新的请求。这可以经过为读取地址薄的 Ajax URL增加一个含有上次编辑时候的时候戳来实现，例如， &t=11900241612等。假如地址薄在上次下载后没有被编辑过，时候 戳就稳定，则从阅读器的缓存中加载从而削减了一次 HTTP请求进程。假如用户修悔改地址薄，时候戳就会用来肯定新的 URL缓和存响应并不婚配，阅读器就会重要请求更新地址薄。

在网站的优化中，很多都是需要实时性的，那末，这部份内容就不能用AJAX来优化。HTML 5中供给了一个新的特征：local storage，可以很好地处理这个不需要的AJAX的挪用。可以移步： HTML 5中供给了一个新的特征：local storage检察。

（5）网站只管削减DOM元素的数目

DOM的全称为：Document Object Model ，中文翻译过来叫文档工具模子。我们这里所探讨的DOM，实在有一个隐含的意义是指HTML DOM。

HTML DOM 界说了拜候和操纵 HTML 文档的标准方式。DOM 以树结构表达 HTML 文档。

现在可以随意一个网站，比如： https://breakyizhan.com/git/32.html，然后翻开谷歌阅读器Chrome Console控制台，然后输入下面的号令：

document.getElementsByTagName('*').length;

我们便可以看到，阅读https://breakyizhan.com/git/32.html这个页面的时辰，DOM的数目是500多个，以下图：

我们可以从下面两个方面来削减DOM的数目：

避免不正确天时用办事器控件。削减不需要的内容（并不是一切内容都必须放在页面上面的）

假如数据量大，可以斟酌分页，大概按需加载

（6）网站只管按照域名分别页面的内容

这里先要晓得，阅读器一般会限制每个域的并行线程（通常是6个，甚至更少），利用分歧的域名可以最大化下载线程，但留意连结在2-4个域名内，以避免DNS查询消耗。在这里，分歧域名的实现可以用子域名来实现。比如：http://breakyizhan.com和http://static.breakyizhan.com就不是同一个域名，他们可以剖析到分歧的IP地址，甚至于实现两个网站的阅读。

比如，静态内容放在breakyizhan.com上，静态资本放在static.breakyizhan.com上。这样还可以禁用静态资本域下的Cookie，削减数据传输，详见Cookie 优化。而且消息分手的话，还有益于CDN的缓存。

（7）网站只管削减iframe的利用

iframe以及与之相关的frameset,frame 都是早期HTML版本的产物。现在在网站里面，很少利用iframe，今朝新浪微博供给的“微博秀”还是用iframe来实现的。，这样实在结构上都雅，可是晦气于网站性能的优化，更晦气于网站SEO的优化。iframe在HTML的后续版本（例如HTML 5）中还是支持的，但frameset和frame 已经明白地要离别历史舞台了。