web页面性能优化以及SEO

前端性能优化

减少http请求

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输。减少http请求的数目可有效提高访问性能。减少http的主要手段是合并CSS、合并javascript、合并图片。

启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。

CSS Sprites

合并 CSS图片，减少请求数的又一个好办法。

懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

为什么将css放在头部，js放在尾部可以增加页面的性能

现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示

减少对DOM的操作

操作dom会产生几种动作，极大的影响渲染的效率。其中布局和绘制是最大的。合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

减少Cookie传输

Cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响

使用CDN加速

CDN核心目的就是使用户可就近访问网络，取得所需内容，解决网络拥挤的状况，明显提高用户访问网站的响应速度或者用户下载速度。当一个网站开启了CDN加速，其给用户的感觉是访问网站速度或者下载东西的速度会明显比没有开启加速更快，变快或者下载东西变快了。

前端SEO

合理的利用title、description和keywords。

H1，文章标题 告诉搜索引擎这个是一段文字的标题，起强调作用。

为图片加上alt和title属性

尽少使用iframe框架搜索引擎不会抓取iframe里面的内容，重要的内容不要放在框架里

合理的结构。网站有合理的结构，清晰的导航，可以在页面中加入面包屑，上下篇，相关文章等，这样整个站点之间可以相互链接，形成网状结构，利于蜘蛛爬行。

代码精简，提高网页信噪比。网页信噪比指网页中的文本内容部分与生成这些文本而产生的html标签内容的比率。网页信噪比越高，说明页面中纯文本内容相对越多，搜索引擎抓取页面也越容易。使用div+css编码，外部引用css样式表及javascript文件，都能大幅度提高网页信噪比