seoseostimes培训课_一个迅速提升网站用户体验和SEO效果的方法实证有效

文章目录 [+]

尤其在移动端更加明显，谷歌和百度都做过类似的剖析和研究，结论很靠近：

当页面加载速率从1秒变成3秒时，跳出率提升了32%。

seoseostimes培训课_一个迅速提升网站用户体验和SEO效果的方法实证有效 seoseostimes培训课_一个迅速提升网站用户体验和SEO效果的方法实证有效百度SEO

当页面加载速率从1秒变成5秒时，跳出率提升了90%。

（图片来自网络侵删）

换句话说，如果你的移动端页面5秒才能打开，90%的人都会关掉页面离开。

国外几个网站测试过速率低落对业务指标的负面影响：

Bing - 网页速率打开慢2秒，（收入/用户）比低落4.3％。

Google - 400毫秒的延迟导致（搜索量/用户）低落0.59％。

雅虎 - 400毫秒的延迟导致全站流量低落5-9％。

提升页面速率的好处：

Shopzilla - 网站提速5秒，转换率提升了7-12％，SEM投放会话量增加了一倍，所需做事器减少了一半。

Mozilla - 着陆页打开速率比原来快了2.2秒后，***转化率提升了15.4％，因此每年多增加6000万次Firefox***。

Netflix - 仅仅由于利用了Gzip压缩，页面速率就提升了13-25％，带宽用度减少了50％。

谷歌博客2010年就说过：“我们已经决定把网站的打开速率作为搜索排名成分。
”

如何提升页面打开速率呢？

页面打开速率受非常多成分影响，大略的可以划分为“前端”和“后端”两部分。

“后端”包含了做事器性能、功能实现方法、页面模块、缓存韶光、CDN加速等等，受后端技能和硬件条件的制约和影响。

这部分事情一样平常由研发工程师和运维来卖力办理。
实现本钱或高获低，存在不少不愿定性。

而“前端”部分则相对清晰，按照优化规范的辅导，前端工程师可以立即对网页进行“瘦身”。

转载Github上翻译的前端优化指南如下。
（待补充完善本文）

前端优化指南

避免内联式/嵌入式代码

你可以通过三种办法在HTML页面中引入CSS或Javascript代码:

1) 内联式: 在HTML标签的style属性中定义样式，在onclick这样的属性中定义Javascript代码;

2) 嵌入式: 在页面中利用<style>标签定义样式，利用<script>标签定义Javascript代码;

3) 引用外部文件: 在<link>标签中定义href属性引用CSS文件，在<script>标签中定义src属性引入Javascript文件.

只管前两种办法减少了HTTP要求数，可是实际上却增加了HTML文档的体积。
不过，当你的页面中的CSS或者Javascript代码足够少，反而是开启一个HTTP要求的花费要更大时，采取这两种办法却是最有用的。
因此，你须要测试评估这种办法是否真的提升了速率。
同时也要考虑到你的页面的目标和它的受众：如果你期望人们只会访问它一次，例如对一些临时活动来说，你决不会期望有回访客涌现，那么利用内联式/嵌入式代码能够帮助减少HTTP要求数。

> 只管即便避免在你的HTML中手工编写CSS/JS（首选的方法是通过工具实现这个过程的自动化）。

第三种办法不仅使你的代码更有序，而且使得浏览器能够缓存它。
这种办法在大多数的情形下都是首选，特殊是一些大文件和多页面的情形。

> 小工具 / 参考

样式在上，脚本不才

当我们把样式放在<head>标签中时，浏览器在渲染页面时就能尽早的知道每个标签的样式，我们的用户就会觉得这个页面加载的很快。

<head> <meta charset=\"大众UTF-8\公众> <title>Browser Diet</title>  <link rel=\"大众stylesheet\公众 href=\公众style.css\公众 media=\"大众all\"大众></head>

但是如果我们将样式放在页面的结尾，浏览器在渲染页面时就无法知道每个标签的样式，直到CSS被***实行后。

另一方面，对付Javascript来说，由于它在实行过程中会壅塞页面的渲染，以是我们要把它放在页面的结尾。

<body> <p>Lorem ipsum dolor sit amet.</p>  <script src=\"大众script.js\公众></script></body>

> 参考

考试测验async

为理解释这个属性对付性能优化是多么有用，我们该当先明白，当不该用它时会发生什么。

利用上面这种办法时，页面会在这个脚本文件被完备***、解析、实行完后才去渲染之后的HTML，在这之前会一贯处于壅塞状态。
这就意味着会增加你的页面的加载韶光。
有时这种行为是我们希望的，而大多数时候则不想要。

利用上面这种办法时，脚本的加载是异步的，不会影响到这之后的页面解析。
脚本会不才载完之后立即实行。
须要把稳的是，如果有多个利用这种办法异步加载的脚本，他们是没有特定的实行顺序的。

> 参考

压缩你的样式表

为了保持代码的可读性，最好的方法是在代码中添加注释和利用缩进：

.center { width: 960px; margin: 0 auto;}/ --- Structure --- /.intro { margin: 100px; position: relative;}

但是对付浏览器来说，这些都是不主要的。
正由于如此，通过自动化工具压缩你的CSS是非常有用的。

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

这样做能够减小文件的大小，从而得到更快的***、解析和实行。

对付利用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩

> 小工具 / 参考

合并多个CSS文件

对付样式的组织和掩护，另一个好方法是将他们模块化。

然而，这样每个文件便是一个HTTP要求（我们都知道，浏览器的并行***数是有限的）。

以是，合并你的CSS文件。
文件数量的减少就会带来要求数量的减少和更快的页面加载速率。

Want to have the best of both worlds? Automate this process through a build tool.

> 小工具 / 参考

利用标签而不是 @import

有两种办法可以引入一个外部的样式表：通过 <link> 标签：

或者通过 @import 指令 (利用在一个外部样式表中或者页面内嵌的 <style> 标签中):

@import url('style.css');

当你在一个外部样式表中利用第二种办法时，浏览器无法通过并行***的办法***这个资源，这样就会导致其他资源的***被壅塞。

> 参考

异步加载第三方内容

嵌入一个Youtube***或者一个like/tweet按钮，有人没有加载过这样的第三方内容吗？

问题在于，不管是用户真个还是做事器真个连接，都无法担保这些代码是正常有效的事情的。
这些做事有可能临时dowan掉或者是被用户或者其公司的防火墙阻挡。

为了避免这些在页面加载时成为问题，或者更严重的是，壅塞了全部页面的加载，总是该当异步加载这些代码 (或者利用 Friendly iFrames).

var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script, scripts);

其余，如果你想加载多个第三方插件，你可以利用这个代码来实现异步的加载。

> *** / 参考

缓存数组长度

循环无疑是和Javascript性能非常干系的一部分。
试着优化循环的逻辑，从而让每次循环更加的高效。

要做到这一点，方法之一是存储数组的长度，这样的话，在每次循环时都不用重新打算。

var arr = new Array(1000), len, i;for (i = 0; i < arr.length; i++) { // Bad - size needs to be recalculated 1000 times}for (i = 0, len = arr.length; i < len; i++) { // Good - size is calculated only 1 time and then stored}

> Results on JSPerf

> 表明:虽然当代浏览器引擎会自动优化这个过程，但是不要忘却还有旧的浏览器

在迭代document.getElementsByTagName('a')等类似方法天生的HTML节点数组（NodeList）时，缓存数组长度尤为关键。
这些凑集常日被认为是“活的”，也便是说，当他们所对应的元素发生变革时，他们会被自动更新。

> 参考

避免利用document.write

这个（坏）方法已经被开拓者抛弃了很多年, 但是在某些情形下仍旧是须要的，例如在一些Javascript文件的同步回退中。

举例来说，如果创造Google的CDN没有相应，HTML5 Boilerplate则会通过这个方法来调用本地的jQuery库。

> 把稳:如果在window.onload事宜中或之后实行document.write方法，会将当前页面更换掉。

<span>foo</span><script> window.onload = function() { document.write('<span>bar</span>'); };</script>

这段代码实行后的结果是页面中只会呈现出bar字符，而不是期望的涌现foobar。
在window.onload事宜之后实行也是同样的结果。

<span>foo</span><script> setTimeout(function() { document.write('<span>bar</span>'); }, 1000); window.onload = function() { // ... };</script>

这段代码实行的结果和上一段代码的结果相同。

> 参考

最小化重绘和回流

当有任何属性或元素发生改变时，都会引起DOM元素的重绘和回流。

当一个元素的布局不变，外不雅观发生改变时，就会引起重绘。
Nicole Sullivan描述这个就像是样式的改变，例如改变background-color。

回流的代价是最高的，当改变一个页面的布局时就会发生回流，例如改变一个元素的宽。

毫无疑问，应该避免过多的重绘和回流，以是，对付下面的代码：

var div = document.getElementById(\"大众to-measure\公众), lis = document.getElementsByTagName('li'), i, len;for (i = 0, len = lis.length; i < len; i++) { lis[i].style.width = div.offsetWidth + 'px';}

应该变为：

var div = document.getElementById(\公众to-measure\公众), lis = document.getElementsByTagName('li'), widthToSet = div.offsetWidth, i, len;for (i = 0, len = lis.length; i < len; i++) { lis[i].style.width = widthToSet + 'px';}

当你设置style.width时，浏览器须要重新打算布局。
常日，浏览器暂时是不须要知道改变了元素的样式的，直到它须要更新屏幕时，正由于如此，改变多个元素的样式只会产生一次回流。
然而，在第一个例子中，我们每次要求offsetWidth时，都会使浏览看重新打算布局。

如果须要得到页面中的布局数据，那么请参照第二个例子，将这些操作放在任何会改变布局的设置前。

> 示例 / 参考

避免不必要的DOM操作

当你得到DOM而又什么都不做时，这切实其实便是在杀去世宝贵的生命。

说真的，浏览器遍历DOM元素的代价是昂贵的。
虽然Javascript引擎变得越来越强大，越来越快速，但是还是该当最大化的优化查询DOM树的操作。

最大略的替代方案便是，当一个元素会涌现多次时，将它保存在一个变量中，这样的话你就没必要每次都去查询DOM树了。

// really bad!for (var i = 0; i < 100; i++) { document.getElementById(\"大众myList\"大众).innerHTML += \"大众<span>\"大众 + i + \"大众</span>\公众;}

// much better :)var myList = \"大众\"大众;for (var i = 0; i < 100; i++) { myList += \公众<span>\"大众 + i + \"大众</span>\"大众;}document.getElementById(\"大众myList\"大众).innerHTML = myList;

// much much better :)var myListHTML = document.getElementById(\公众myList\公众).innerHTML;for (var i = 0; i < 100; i++) { myListHTML += \公众<span>\"大众 + i + \"大众</span>\"大众;}

> Results on JSPerf

压缩你的脚本

和CSS一样，为了保持代码的可读性，最好的方法是在代码中添加注释和利用缩进：

BrowserDiet.app = function() { var foo = true; return { bar: function() { // do something } };};

但是对付浏览器来说，这些都是不主要的。
正由于如此，请记住用自动化工具压缩你的Javascript代码。

BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}

这样做能够减小文件的大小，从而得到更快的***、解析和实行。

> 小工具 / 参考

将多个JS文件合并

对付脚本的组织和掩护，另一个好方法是将他们模块化。

然而，这样每个文件便是一个HTTP要求（我们都知道，浏览器的并行***数是有限的）。

以是，合并你的JS文件。
文件数量的减少就会带来要求数量的减少和更快的页面加载速率。

想要两全其美？通过构建工具自动化这个过程吧。

> 小工具 / 参考

jQuery Selectors

在利用jQuery时，选择器也是一个主要的问题。
有许多方法可以从DOM中选取元素，但这不虞味着这些方法有相同的性能，你可以用classes、IDs或者find()、children()等方法选取元素。

在这些方法中，利用ID选择器是最快的，由于它是原生DOM操作。

$(\"大众#foo\公众);

> Results on JSPerf

JavaScript中利用for，而不是each

原生Javascript中的函数实行险些总是要比jQuery快一些。
正由于如此，请利用Javascript的for循环，不要利用jQuery.each方法。

但是请把稳，虽然for in是原生的，可是在许多情形下，它的性能要比jQuery.each差一些。

在for循环迭代时，请记得缓存凑集的长度。

for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i];}

在社区中，关于while和for循环的反向利用问题是一个热门话题，而这常常被认为是最快的迭代办法。
然而实际上，这常日只是为了防止循环不足清晰。

// 逆转 whilewhile ( i-- ) { // ...}// 逆转 forfor ( var i = array.length; i--; ) { // ...}

> Results on JSPerf / 参考

利用CSS Sprites

这个技能便是将各种图片整合到一个文件中去。

然后通过CSS去定位它们。

.icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px;}.icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px;}

这么做的结果便是，减少了HTTP要求数，避免延迟页面上的其他资源。

在利用sprite时，应该避免在每个图片之间的空隙过大。
这个虽然不会影响到文件的大小，但是会影响到内存的花费。

只管每个人都知道sprites，但是这种技能并没有被广泛利用—或许是由于开拓者没有利用自动化工具去天生。
我们着重先容了一些工具，或容许以帮到你。

> 小工具 / 参考

适当时可以利用Data URI显示图片

这种技能是CSS Sprites的替代方法。

Data-URI是指利用图片的数据代替常日利用的图片URI，不才面的例子中，我们就利用它减少了HTTP要求数。

利用前:

.icon-foo { background-image: url('foo.png');}

利用后:

.icon-foo { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');}

所有的当代浏览器和IE8及以上版本的IE都支持这个方法，图片须要利用base64方法编码。

这种技能和CSS Sprites技能都是可以利用构建工具得到的。
利用构建工具的好处是不用手工去进行图片的拼合更换，在开拓时利用单独的文件就可以。

然而坏处是，随着你的HTML/CSS文件的增大增多，你必须考虑你可能会有一个非常大的图片。
如果你在HTTP要求中没有利用gzip技能压缩你的HTML/CSS，那么我们不推举利用这种方法，由于减少HTTP要求数得到的大文件对付速率来说可能带来相反的结果。

> 小工具 / 参考

不要在<img>标签中调度图像

总是在img标签中设置width和height属性。
这样可以防止渲染过程中的重绘和回流。

知道这个之后，一个开拓者将一个700x700px的图像设置为50x50px来显示。

但是这个开拓者不知道的是，大量的没有用的数据也发送到了客户端。

以是请记住：你可以在标签中定义一个图片的寬高，但不虞味着你该当通过这么做来(等比)缩放大图。

> 参考

优化你的图片。

图片文件中包含许多对付Web来说没有用的东西。
举例来说，一个JPEG图片中可能包含一些Exif元数据（数据，相机型号，坐标等等）。
一个PNG图片会包含有关颜色，元数据的信息，有时乃至还包含一个缩略图。
这些只会增加文件的大小，而对付浏览器来说却毫无用途。