浅谈前端SEO

前言

在上家公司时，接手过这么一个任务，改版公司网站。在进行网址性能分析的时候，发现了很多地方可以进行SEO优化，最终采取

• css精灵图
• 图片压缩，
• List item
• 减少http请求，
• 启用gzip，
• 优化后台查询方法，
• 优化代码结构

等方案。今天就顺便记录下方案已经摘录下网上比较全面的优化方案。

首先附上连接：yahoo的优化原则=》https://developer.yahoo.com/performance/rules.html?guccounter=1

本文摘自《摘自高性能网站建设指南》

前端性能优化策略图（图片源自网络）

时间都去了哪里？

浏览器缓存为空 ：当我们首次浏览一个页面的时候，真正的对于html文档的请求占用总请求的时间一小部分。其余大部分时间是用于下载其余的所有组件（图片、脚本、样式表、Flash等等），用户的大部分时间也是用于等待组件的下载。

浏览器缓存不为空 ：如果是第二次浏览该页面，html文档下载时间占比相对来说上升了，因为总的下载时间减少了（由于部分组件得到了缓存的原因，因此不需要再进行下载）。但是大多数时间还是花在了下载组件上面。

为啥需要前端性能优化

• 第一，如果我们可以将 后端响应时间缩短一半，整体响应时间只能减少5%~10%，如果关注前端性能，同样将响应时间减少一半，整体响应时间可以减少40%~45%。
• 通过前端通常只需要较少的时间和资源。减少后端延迟需要大改动，而前端不需要。
• 前端性能调整已经被证明是可行的，Yahoo!中的团队通过最佳实践降低了响应时间，幅度通常为25%或者更高。

性能黄金法则

只有10%~20%的最终用户响应时间花在了下载HTML文档商，其余80%~90%时间花在了下载页面的所有组件上。

优化方案

方案一：减少HTTP请求（图片地图、CSS Sprites、内联图片和脚本、样式表合并）

根据前面的分析大约80%~90%的时间都是花在了组件的下载上面，因此可以减少组件的数量。但是这个又会和产品设计和引发性能问题相互矛盾。（图片地图、CSS Sprites、内联图片和脚本、样式表合并）这些可以解决这个矛盾。

1、图片地图：

解释：图片地图允许你在一个图片上面关联多个URL，目标URL的选择取决于用户点击了图片的那个位置。（当然可以对每一个链接使用单独的一张图片，但是这样会引发多个http请求，因此使用图片地图只会引发一次http请求，响应时间会降低，减少了HTTP的开销）。

实例：一个无图片地图的连接

实例：一个有图片地图的连接

通过比较上述两个页面的加载时间，发现第二个明显时间小于第一个

图片地图包括了服务器端图片地图和客户端图片地图：

• 服务器端图片地图：将所有的点击提交到同一个URL，向其传递用户点击的x和y坐标，Web服务器将x和y坐标映射为合适的操作。
• 客户端图片地图（更适用）：将用户的点击映射到一个操作，无需向后端应用程序发送请求，映射通过HTML的MAP标签实现。

图片地图的缺点：

定义图片上面的坐标，如果采用手动方式，很难完成并且容易出错。而且除了矩形之外无法定义其它的形状。

2、CSS Sprites：

和图片地图一样，CSS Sprites也可以合并图片，但是更为灵活。CSS Sprites是将多个图片合并到一个图片中，CSS Sprites适用于任何支持背景图片的HTML标签中。通过使用CSS的background-position属性可以将元素放置到图片中期望的位置上面。

<style>
    #div1{
        background-image:url('sxs.gif');
        background-position:-260px -90px;
        width:26px;
        height:24px;
    }
</style>
<div id="div1"></div>
 
 
 

实例：一个CSS Sprites的实例