^{web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识}

——不会WPO、SEO的前端工程师不是好码农　　

　　作为一名web前端工程师，除了要实现上级的要求，满足其所需要的功能，还要在平时代码编辑的习惯上考虑web性能优化以及SEO。

　　首先是为人处事的问题，凡事不要等别人说你了才知道做。我很喜欢那一句话：我们是人，不是奴隶，要有自主性。

　　这些基本的东西上级肯定会要求，与其留到领导跟你说的时候再改，不如一次到位。你耳根清净，他得闲考虑其他更有价值的问题。

　　旁言不做赘述，直奔主题。

• web性能优化（WPO：Web Performance Optimization）

　　减少HTTP请求

1. 使用雪碧图（精灵图），多张图片合并到一张进行请求；
2. 使用静态资源缓存：服务器上静态资源未更新时再次访问不请求服务器；关于静态资源缓存可参考的这篇文章
3. 压缩img，css，js等文件
4. 使用公共的css、js文件（base、common）
5. 图片懒加载

 　　服务器端渲染　　

　　服务端渲染不仅仅解决了seo和首屏加载过慢的问题，还能减少接口的暴露，前后端分离的弊端就是接口的对外暴露，导致别人可以抓取我们的接口为所欲为……而服务端渲染可以做到，至少一小部分不该暴露出去的接口是可以留在服务端的.

 　　CDN加速

　　CDN通过将资源存储在更接近用户的位置，缩短到服务器的往返行程，加快页面加载时间来解决性能问题。

　　优先加载css，js在末端加载

　　无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。

　　合理的ajax请求

　　对于返回内容相同的请求，没必要每次都直接从服务端拉取，合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。

　　缩小 favicon.ico 并缓存

　　有利于 favicon.ico 的重复加载，因为一般一个 Web 应用的 favicon.ico 是很少改变的。

　　减少DOM数量和层级数量

　　HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和扁平化的层级。

　　

• SEO

　　网站布局优化

　　网站层级越少越容易被搜索引擎的爬虫抓取，一般中小型网站不超过三级。超过这一层级容易造成爬虫不愿意爬取和受众获取必要信息困难而平白损失资源。

　　导航优化

　　在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对爬虫而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

　　　　

　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样爬虫能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，爬虫需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

 

　　减少使用iframe

　　搜索引擎的蜘蛛不会辨认在ifram中被挪用的图片、文本、url等内容的，由于该内容不属于该页面，只是访谒的时辰被姑且的挪用，而且在SEO倡议中也有提到：“frame/frameset/iframe标签,会导致百度spider的抓取坚苦,倡议不要操作”这样更能证实其弊!

　　当然这也是iframe的一个优点，首先我们希望我们的部分内容被搜索引擎抓取，引流目标受众。但是往往我们需要考虑产权保护，希望把目标受众转化为忠实用户，我们自然不希望所有页面内容都被搜索引擎的爬虫抓取。iframe成为了一种解决方案。另外对用户而言iframe的本页面持续访问的页面体验也是相对较好的。

　　div+css布局　　　

　　如果你的网页整体架构是通过table实现的，强烈建议你废除。table只适用于做数据列表。

　　要优化table，首先要避免下面这些：

1. 1. 用table来架构网页　　　　布局死板
   2. table里面又套table　　　　逻辑混乱，搜索引擎无法正确处理上下文关系。
   3. 滥用rowspan和colspan　　理由同上。

　　　

　　title标题

　　强调重点，关键词前置

　　<meta keywords>

　　关键词、关键词、关键词！切记重复和过分堆砌

　　<meta description>

　　高度囊括网页内容，切记不能太长，避免重复堆砌

　　<h1>

　　正确使用h1标签，一个页面只出现一次

　　a标签

　　站内链接要加title加以说明，供用户和爬虫分析。而外部链接则需要加上el="nofollow"，告诉爬虫不要爬，因为一旦爬取它就无法再回来了。

　　控制超链数量，超链太少爬虫就没有了桥梁，无法在站内自由行走。超链太多就会造成滥用，降低用户体验，搜索引擎也会对应降低权重。

　　img标签使用alt属性加以说明

　　防止图片加载失败，用户无法明白此处究竟要表达什么。

　　来自友情链接的助攻

　　免费的获取链接方式里，友情链接是最直接好操作的一种方式。谈到友情链接，大家都不免谈到Google的PR值，因为除了PR值没有其他更权威而且方便直观的了解一个链接的好坏，但核心大家其实想说的是友情链接的质量，从目前来看有几个方面来判断是否值得跟一个网站交换友情链接：

1. 百度、谷歌快照时间，越新说明这个网站搜索引擎权重高、更新频繁。
2. 百度、谷歌收录数量，收录的越多越好。
3. 网站相关性，就是指交换的网站与自己的网站主题是否相关，越相关越好。
4. 网站PR值和导出链接数量，PR值越高、导出链接越少越好。
5. 网站核心关键词的百度、谷歌排名越高越好。

　　谨慎使用display：none

　　爬虫会默认过滤爬取display：none里面的内容，可以考虑opacity或z-index

　　杜绝404

　　低级错误，浪费目标受众

流量核心

　　归根结底，一个网站的流量还是取决于网站的核心价值。你的内容是不是受众所需要的，才是最应该考虑的问题，其他的一切都只是工具辅助而已。

　　用心做产品，分析好客户需求