如何利用极客精神优化网站的网络组件和代码

如今，很多的网站为了美化网站页面或网站功能的完善，常常为网站加了很多的组件，但作为一名SEO人员，我们就要为我们的网站做些页面优化和代码精简了，尤其是一些图片网站，合理的页面优化技巧可以使网站的页面缩减10%-30%（具体可查看马海祥博客《网站页面精简的10个优化技巧》的相关介绍），这样可以最大限度提高网站的打开速度。

可如果你是一名拥有极客精神的SEO人员，你还需要对你的社交网络组件和常规代码进行再次的优化，对此，马海祥特意整理了以下10个建议，教大家如何优化网站的网络组件和代码。

1、移除网站中社交网络的组件

看到这个标题请不要惊讶，我并不是让你放弃第三方社交平台，而是希望你能放弃那些肥胖的官方组件，你的网站中有社交平台的分享按钮么？这些按钮会为你的网站增重大概0.5M，我们知道，这些分享功能都是由JavaScript实现的，有些分享组件的网络连接会强制在加载页面之前进行。

太大的社交组件完全没有必要，你完全可以添加一个轻量级的社交分享按钮在你的网页中，几行html代码就能搞定的事为什么要弄的这么复杂呢？很多人可能都没有在意到一个小细节，FaceBook的官方“赞”按钮就要270KB，现在你应该明白这么做的必要性了，我们应该深入研究如何优化社交组件。

2、检查所有第三方组件的大小

社交网络并不是唯一的原因，其它第三方的组件也大大增大了你网站的大小，这些组件有时候甚至会加载其它网站的内容，这些加载的数据可能高达几百KB。

如果你必须要使用这个组件，那我们要考虑的就是如何更好的处理和简化这个组件了，理想情况下，马海祥认为JavaScript组件应该都是轻量级的，它们在页面底部被加载。

3、考虑使用懒加载或内容点播

假设你的网站是用来显示视频供应商提供的视频，无论用户是否有意要播放，页面都会加载视频API和其它相关的资源，为什么不让用户请求之后，再加载这些东西呢？

你也可以采用滚动式页面，在用户往下拉滚动条时再开始加载新的内容，这样做虽然可能会对SEO造成影响，但是在特定的情况下，如照片展示，微博内容展示等都会有不错的效果。

4、使用可缩放矢量图(SVGs)

SVGs包括点，线和图形，它们被以矢量的形式被定义在XML中，SVGs是响应式设计中比更理解的解决方案，它们可以缩放成任意大小而且不会影响到显示的效果，而且文件大小一般都会小于bitmap。

当然，SVGs并不是在任何情况下都适用，如果是相册或是混合通道的图片就应该使用JPG或是PNG格式，其他比如logo，图表可以放心选用SVGs。

有一些工具可以直接把bitmaps格式的图转成矢量格式，但是多少影响到图片的效果，这里推荐Inkscape和SVG edit，它们都是很不错的创建SVGs的工具包。

5、用CSS取代图片

你还在用切片技术创建图片的圆角边框等样式吗？我们都知道，CSS可以生成很多种前台效果，包括各种样式的按钮，背景……，虽然他们在不同的浏览器中可能会有不同的展示样式，但用户并不会在意这些，他们不会像你一样开很多个浏览器对比同样的代码会有什么样的区别。

你完全不用担心古代浏览器会对CSS样式造成影响，当你构建一个响应式设计的页面，你要通配各种大小的屏蔽，这个时候如果你还是用图片就会有很多问题，所以CSS是很好的选择（具体可查看马海祥博客《CSS无图片技术的实现方法有哪些》的相关介绍）。

不过需要注意的是重绘CSS的阴影和梯度代价也是非常大的，特别是你同时在几十个元素中都添加了这些特性，所以你必须多次去实践，对比在你的网站中是用CSS好还是用图片好，这些都要因网站具体情况而定。

6、用CSS效果和动画取代JavaScript

如果在你的JavaScript代码中到处都是$("#x").fade() 和 $("#y").slideDown()这会对你的网站造成很大的影响。

在几年前我们必须得这么做，但是现在不同了，我们可以选择用CSS3的animations，transitions和transformations取代了JavaScript的效果，原因如下：

（1）、CSS3 animation是由本地浏览器自主绘制的，在没有错误的情况下，它会比JavaScript效果好，而且快很多。

（2）、CSS3 animation代码更容易编写，而且代码量少。

（3）、如果JavaScript不使用第三方类库，3D效果的实现会比CSS3提供3D转换难很多。

7、用图标字体(icon fonts)代替图片

利用字体工具把我们平时Web上用的图形图标（icons）转换成web fonts，就成了icon fonts，它可以借助CSS的@font-face 嵌入到网页里，用以显示icons，因为字体是矢量化图形，它天生具有“分辨率无关”的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象（具体可查看马海祥博客《JPG、PNG和GIF图片的基本原理及优化方法》的相关介绍）。

由于图标字体的灵活性和易用性使得图标字体使用越来越广泛了，我们经常可以看到不同的UI框架都整合了各种的图标字体。

除了“分辨率无关”这个最大的优点之外，icon fonts还具有：

（1）、文件小：相比图片几十几百KB的容量，icon fonts几乎是羽翼级轻量。

（2）、加载性能好：因为图标都被打包进一套字体内，http request减少，这如同我们常用的css sprites技术。

（3）、支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等。

（4）、兼容性好：web fonts起源很早，别说主流浏览器，连IE6/7都能良好支持，除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini这类自限型浏览器。

当然icon fonts也有它的不足：

（1）、样式单一，无法针对不同分辨率来调整icon的细节，比如降低大尺寸icon的线条粗细。

（2）、颜色单一，CSS无法方便的去定义彩色的icon，倒是有通过叠加组合的方式来达到彩色图标的目的。

（3）、移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8都不能正常显示icon fonts。

（4）、有少量的移动设备有可能会和icon fonts的字符编码冲突，导致icon显示不正常（我们自己风车Android版本就碰到了这个问题）。

所以，icon fonts也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：

（1）、你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。

（2）、你的目标用户使用桌面浏览器为主，或者你愿意为非兼容设备做兼容hack。

icon fonts是一个令设计师和前端工程师都心花怒放的方案。

icon fonts的制作主要有两条思路：

（1）、利用字体工具手动制作。

（2）、利用在线工具自动生成。

8、使用sprite来优化图片资源

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。

“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

时间进行到2000年，Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片，这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新，图片之间通常会留出较大的空白，使得图片不会影响网页的内容。

但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约，所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。

在网站图片的解决方案中，CSS3应该是首选，其次是SVG和icon font，最后才是Bitmap，经常使用的Bitmap文件应该打包放在一个单独的sprite中，这样一来图片就可以在CSS中访问到了，像这样：

.sprite {
　　width: 16px;
　　height: 16px;
　　background: url("sprite.png") 0 0 no-repeat;
　　}
　　.sprite.help { background-position: 0 -16px; }
　　.sprite.info { background-position: 0 -32px; }
　　.sprite.user { background-position: 0 -48px; }

9、使用data URIs

假设你有一个图片，把它在网页上显示出来的标准方法是：

<img src="http://www.mahaixiang.cn/images/A.png"/>

这种取得资料的方法称为http URI scheme，同样的效果使用data URI scheme可以写成：

<img src="data:image/png;base64,iVBOKGgoAAAAQAAAADCAIAAAA7ElFQmCC" />

换句话说我们把图像档案的内容内置在HTML档案中，节省了一个HTTP请求。

data uri的主要优点是减少了http请求数，调用起来比css sprite更加灵活，缺点是增加了客户端的资源消耗。

在所有浏览器的非缓存的模式下，CSS sprite方式比data URI方式快了数百微秒，但事实上CSS Sprite比Data URI方式多发送了一次连接请求，包括TCP慢启动招致所有相关的连接开销。

缓存条件下Android 4.2和iOS 6的CSS sprite模式都有大概2倍的速度提升，只是iOS条件下减少了220ms而Android减少了70ms（原生浏览器）。

相对来说，Chrome和Firefox的情况平衡得好点，缓存和非缓存情况下只有50%到60ms左右的性能差异。

在这里，马海祥建议大家将data URIs用于非常小的资源，并且不能在CSS和内联HTML中多次使用它们。

10、使用网站评估工具

检查是否减肥成功的最好方法就是站到称上称一下，同样，你需要使用网站评估工具评估一下你给网站“瘦身”的效果。

很多开发者工具和免费的在线测试工具都不错，百度和Google的站长分析工具都很好用。

马海祥博客点评：

搜索引擎进入你网站的每一步工作就是提取文字内容，而作为一名专业的站长或SEO来说，我们可以做的就是尽量减少搜索引擎提取文字内容的难度，优化网站页面，精简html代码，尽量减少不必要的组件或代码，减少文件大小，用一种极客精神来做SEO优化，你会得到一种意想不到的效果。