搜索引擎优化入门：前端性能优化

Ryee

一、为什么要做前端页面的优化？
搜索引擎优化总体来说会涉及两个层面的问题，1、爬虫效率  2、引擎爬虫带回去的索引页面内容。这两个方面相关联的恰恰都与前端页面有关。

首先要明确一点：网站是给人用的，用户体验第一位。前端开发工程师是将产品和后端开发的技术做衔接，做到人机交互的视觉表达（浏览器中）。

在兼容用户体验的前提下…… …… ……
才可进一步提升前端页面对搜索引擎的友好设计，有好设计的目标就是上面提到的两点：1、爬虫效率  2、抓取内容

常见的问题：
1、爬虫爬行的页面有非常多的链接，实质性内容很少，这一点有些像网址站（当然如果你就是网址站是可以容忍的）
2、页面中非常多的JS 应用代码
3、程序员养成了很好的注释习惯，有很多注释写在页面中
4、每个人的习惯不同，多人写的页面DOM元素数量很多包罗万象
5、头部请求量很大
6、页面体积庞大
7、巨量的图片嵌在页面中又是甚至普通用户访问起来都很慢的响应
8、为了好看，我们把很多内容都用图片处理了用户看着色彩绚丽引人入胜
9、我们还用了一两种叫做iframe和Ajax的技术
问题还不止这些，这仅仅是常见的而且还有很多已然广泛存在问题……

解决这些优化问题的目的是什么？
你要对搜索引擎优化就要让引擎的爬虫更好、更快的遍历你的网站，并且让爬虫带走你想要给他的内容，来满足这些内容在搜索引擎结果页面的排名表现。

爬虫的主要动作，1、沿着<a>标签的足迹去遍历网站  2、拿走html代码中的文本内容 来给页面建立查询索引。




到这里你知道我们要做前端优化的意义了，那么怎样解决掉上面提到的常见问题呢？
不要着急，你可以参考这部分了
二、Yahoo团队经验：网站性能优化的34条黄金法则

1.Minimize HTTP Requests 减少HTTP请求

　　图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用CSS sprites将小图拼合后利用background来定位。

2.Use a Content Delivery Network 利用CDN技术

　　CDN确实是好东西，不过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

　　浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户是不会主动刷新，看自己衡量了~这项可以通过修改.htaccess文件来实现。

4.Gzip Components Gzip压缩

　　Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到这里做下测试。

5.Put Stylesheets at the Top 把CSS放顶部

　　让浏览者能尽早的看到网站的完整样式。

6.Put Scripts at the Bottom 把JS放底部

　　网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions

　　CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个