网站瘦身 SEO代码优化

《网站瘦身 SEO代码优化》由会员分享，可在线阅读，更多相关《网站瘦身 SEO代码优化（11页珍藏版）》请在装配图网上搜索。

1、本站所有资源部分转载自互联网！版权归作者所有!网站瘦身 SEO 代码优化seo 代码优化是一项比较复杂的工程，大多数 seo 人员对网站的代码优化了解并 不多，希望这篇 seo 代码优化的文章能有一点点帮助。网站为什么都需要 SEO 搜索引擎优化呢?有一部分原因就是网页设计不规 范造成的。今天我在这里讲一下网页如何瘦身，代码如何优化？我们大家都知道，网页设计无论是基于那种语言都是两种布局方式和架构： 一是：table做的；二是：div+css做的然而这两种架构也不是绝对的互斥的，也有出现你中有我，我中有你的情 况。为什么要网页瘦身呢？原因是，搜索引擎本身的资源是有限的，在一定的时间内他的存储空

2、间也是 有限的。如果一个页面是2k相比一个将1m的页面来说，2k的页面存储500个 的空 间，只能放一个 1m 的页面。鉴于对搜索引擎的考虑，我们应该让他减轻负 担.还有就是： 1.尽可能的减少数据的数据的传输量。 2.尽可能的减少数据的 传输频率。如何做到以下几点： 1.提高网页的下载速度 2.降低服务器使用的资源 3. 提高网络带宽利用率首先我们会把注意力放在导致速度下降的最大因素上：图片，二进制文件上。 这固然重要，但是优化 html 代码， css 代码和 javascript 也是相当重 要的。但是，我们常常忽略了这一点。我们了解一个典型的网页加载流程是：首先(x) html文件最先

3、浏览器读到，然后加载到内存中，因为这个文件决 定了整个网页中其他文件的关系，一般情况下，我们称这个为主文件(host document)浏览器一旦加载完成这个文件，便开始解析各种markup 了在从文件 顶部开始向下解析的过程中，会同时发出一系列的相关对象的请求，包 括外部 脚本，样式表单， flash 等其他元素。而这些 css 和 javascript 则有可能继续 触发一些相对图片和脚本资源的请求。从这了可以看出主文件的重要性，如果能把他尽可能快的传给浏览器，浏览 器就可能先一步解析。所以第一步，需要对主文件进行优化，减肥。如何优化传 输，我们 的基本方法是： 是什么？减少空白区域，精简

4、 css 和 javascript本站所有资源部分转载自互联网！版权归作者所有!1. 除去空白区域，一般而言，空白区域（空格，制表符，换行符等）都可 以安全删除，但要避免修改 pre, text area，及受 css 属性中 white- space 影 响的标签。 我还有一个建议就是，这些代码在优化前，大家留一个备份，因为 毕竟有空白区域的代码，我们看起来比较舒服，不至于是我们的眼睛太累，可能 我们后期还要对优 化的过的代码进行再操作2. 出去注释，除了在客户端给 ie 和 doctype 声明的注释，几乎所有的注释 都可以k掉，毫无顾虑3. 使用短格式的颜色表示，我们常常在用颜色的时候喜

5、欢用16 进制和全颜 色名称，认为这样比较精确，但我们要尽可能根据实际情况使用短格式的颜色表 示 女如#ffOOOO，其实就是red4. 用短格式的字符表示。和最短颜色表示一样，一些名称可以用最短字符来 表示，我们可以用较短的数字来代替某些长长的字母。5. 除去无用的标签。有些无用的标签，比如使用了多次的重复标签或者某些 编辑器里面用做广告的meta标签，都可以安全地去掉。css 优化， css 也有一套成熟而有简单的方法。实际上，时下大多数的 css 都较（x） html更容易压缩。1. 除去 css 中的空白区域。相比 html 来， css 对于空白区域没有那么敏感， 所以除去空白区域可

6、以极大地减少css文件和style样式表的区域大 小2. 除去css注释，如同除去markup代码中的注释一样，由于css的注释对 普通的最终用户来说并没有什么使用价值，使用应该除去。不过，如果考虑到 较 低级的浏览器，则css中的style标签中的屏蔽注释信息不可以除去。使用短格 式表示颜色，同上，不再重复。3. 对 css 的规则进行合并，如这短代码：pfont-size:36pt;font-family:aral;line-height:48pt;font-weight:bold;可以这样写： pfont:bold 36pt/48ptarial;这样的话，数据量顿时就见效了许多。这些都我

7、们可以注意到，而又没有在 意的方面， seo 就是细节，细节决定成败。4、在CSS优化中最危险的动作可能是重命名类或ID值了。看看如下规则：.superSpecial color: red; font-size: 36pt;本站所有资源部分转载自互联网！版权归作者所有！可将其更名为sS。而 对ID值一样可以遵循这样的原则，例如对于：#firstParagraph background-color: yellow;则可将原来的”#firstParagraph”重命名为”#fp”，并在整个文档中重复 这一动作 。诚然，这样做可能会涉及到“标识-样式-脚本”互相依赖的问题： 如果一个“tag”有一个

8、ID值，而这个值又可能不但用于样式表，还可能用于脚 本参考，甚至可能是一个链接目标地址。在这种情况下，您一旦修改了这个值， 您就必须得保证对所有相关的脚本和链接参考都进行了相应的修改，包括其他文 件中的这个 值，所以千万要小心细致。改变类的值相对改变ID值来说，危险性小一些。因为经验告诉我们，比较起ID 值来说，大多数JavaScript程序员都不太经常处理类的值。然而，改变类的名 称来缩减CSS的尺寸也面临着和改变ID名称同样的问题，所以再次强调，要小 心谨慎。请注意：最好不要更改名称属性，尤其是表单区域中的名称属性。因为 这些数值也会被服务器端程序所操作。虽然不是不可能，但对多数的网站来讲

9、， 要 计算好这些相互依赖关系是困难的。JavaScript 优化越来越多的网站都依赖于JavaScript来生成导航菜单、表格确认和其他各种各 样实用的东西。不足为奇，大多数这些代码都非常笨重，亟待优化。对JavaScript 代码的很多优化技术同那些用于markup代码和CSS的技术很相似。不过，对 JavaScript的优化必须更加小心翼翼，因为一旦操作有误，其后果可能不仅仅 是显示变形，并且可能导致网页残缺不全。下面我们先来看看一些最简单明了的 方法，然后再探讨那些需要小心操作的技巧。n除去JavaScript注释除了 注释，其他所有的 / or /* */ 注释都可以安全删除，因为

10、它们对于最 终使用者来说没有任何意义（除非有人想了解您的脚本是如何工作的）。n除去JavaScript中的空白区域本站所有资源部分转载自互联网！版权归作者所有！有意思的是，除去 JavaScript 中的空白区域并不象想象的那么有用。一方面 像如下代码： x = x + 1;显然可以简短得写成 x=x+1;然而，很多随便的JavaScript程序员会忘记在两行之间加上分号，这时空白区 域的除去就会带来问题。比如，下面合法的JavaScript使用了暗示的（implied） 分号： x=x+1 y=y+1草率地删除了空白区域则会产生如下表达式： x=x+1y=y+1显然，错误就产生了。但如果您加

11、上必需的分号，如下：本站所有资源部分转载自互联网！版权归作者所有！x=x+1;y=y+1;则在字节数上并没有减少。然而在此，我们仍然鼓励这种格式的变化，因为对 w3compiler Beta 版的测试反馈中，很多人对看起来压缩了的脚本非常满意 （也许这是因为视觉上确认了对原始代码的格式转变）。他们也喜欢这种处理方 法产生的另一个效果，那就是让交付的代码变得更难读。n 进行代码优化简单的方法如除去暗示的（implied）分号，某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码。一些简略的表达方式也会产生很好的优化，例如： x=x+1;可以写成： x+;不过得小心谨慎，不然代码很容易出错。

12、n 14.重命名用户自定义的变量和函数本站所有资源部分转载自互联网！版权归作者所有！为了阅读方便，我们都知道在脚本中应该使用象sumTotal这样的变量而不是s。 不过，考虑到下载的速度，sumTotal这个变量就显得冗长了。这个长度对于最 终使用者来说没有意义，但对浏览器下载则是个负担。这个时候s就成为较好的 选择了。先写好方便阅读的代码，然后再使用一些工具来处理以供交付。这种处 理方式在这里再一次展示了其价值所在。将所有的名称都重新用一个或两个字母 来命名将带来显著的改善。n改写内建（built-in）对象长长用户变量名会造成JavaScript代码过长，除此之外，内建（bu订t-in）对

13、象 （比如 Window、Document、Navigator 等）也是原因之一。例如： alert(window.navigator.appName);alert(window.navigator.appVersion);alert(window.navigator.userAgent);可以改写成如下简短的代码： w=window;n=w.navigator;a=alert;a(n.appName);a(n.appVersion);本站所有资源部分转载自互联网！版权归作者所有！a(n.userAgent);如果这几个对象使用频繁的话，这样改写带来的好处就不言而喻了。事实上这些 对象也的确经

14、常被调用。然而我要提醒的是，如果 Window 或 Navigator 对象仅 仅被使用了一次的话，这样的替换反而使代码变得更长。所以手工进行这种优化 时要格外小心，不过好在目前市面的常用的 JavaScript 代码优化工具都已经考 虑到这个因素了。这个技巧带来一个对象更名后脚本执行效率的问题：除了代码长短上带来的好处， 这种改写更名实际上还会稍微的提高一点脚本执行的速度，因为这些对象将会被 放在所有被调用对象中比较靠前的位置。 JavaScript 游戏开发程序员使用这个 技巧已经有多年了，下载和执行速度都会有所提高，并且对本地浏览器的内存花 销也会降低，可谓一石三鸟。文件方面的优化最后一

15、类的优化技巧与文件和站点的组织有关。下面谈及的一些技巧可能会牵扯 到服务器的调整和站点的重构。n 重命名用户访问不到的独立文件和目录一些站点往往包含有诸如 SubHeaderAbout.gif 或 rollover.js 等是用户无法通 过 URL 来访问的文件。它们通常都保存在一个标准名称的目录中，比如 /images， 因此我们常常会在 markup 代码中看到这样的句子：本站所有资源部分转载自互联网！版权归作者所有！或者更糟糕的象既然这些文件从来都不会被访问到，对于最终使用者而言，方便不方便阅读便无关紧要。考虑下载速度的因素，上述句子改成下列形式更有意义：然而手工的文件和目录的修改工作量

16、太大了，我们可以借助一些内容管理系统来 完成相关的工作，比如将内容重命名成简短格式等。前面提到的 w3compiler 就 有自动复制并且检查相互依赖关系的功能。如果使用得当，这个技巧会给引用这 些文件的(X)HTML文件减肥不少，并且也让那些剽窃(X)HTML的人重新使用这些 文件设置了重重障碍。n 使用 URL rewriter 来缩短所有的网页 URL注意在刚才提到的技巧中并不建议对网页的文件名(例如products.html)进行 重命名。那样的话，则下面的标示：Products就会变成本站所有资源部分转载自互联网！版权归作者所有!Products这背后的主要原因是读者会看到一个这样的

17、 URL： 相比起 来，后者比前者要来的更有意义、更 好用的多。不过，在不牺牲网页 URL 原义的前提下，假如我们结合更名技巧和修改服务器配 置的话，我们还是有可能从缩短文件名中得到收获。譬如，在源代码中把 products.html用p.htmll替换掉，之后再设立一个URL复写（rewrite）规则， 由服务器端的一个类似复写模块的过滤器比如 来使用这个规则，从而再把这个 URL 扩展成一个较为用户友好的值。注意这个窍门，如果这个复写规则只执行外 部（external）重定向的话，新的URL仅仅会写在使用者浏览器的地址条处， 因而会强迫浏览器重新请求该页。在此种情况下，文件本身没有被重命名

18、，仅仅 是在源代码中 URL 里使用了重命名的简短的文件名。由于这个技巧依赖于 URL 的复写，并且缺少对服务器端工具（如复写模块）的广泛 接触渠道和理解，即使是象 w3compiler 之类的高级工具在目前也不推崇使用这 个技巧。然而，考虑到像Yahoo!这样的大型网站通过积极使用该技巧得到了显 著的获益，这个技巧是不能够被忽视的，毕竟它给目录及文件名称都是非常具描 述性的站点提供了明显的减肥（X）HTML文件的效果。n 除去或缩短文件扩展名想想看，其实有些情况下文件的扩展名并没有多大用处，比如.gif, .jpg, .js 等。浏览器不会依赖这些扩展名来显示页面，而是在处理时使用 MIME

19、 类的头信 息（header）o 了解了这一点，我们就可以把：本站所有资源部分转载自互联网！版权归作者所有！简化为：img src=images/SubHeaderAbout或是结合文件名目录名重命名，我们可以得到.您可别乍一看这个结果就吓跑了，.sA.gif仍然是.sA.gif文件，只不过网页的 访问者不知道罢了。不过，为了使用这个相对高级的技巧，您还需要对服务器来做一下修改。主要要 做的工作是启用一个叫做“内容协商” （content negotiation）的东西。它可能 是服务器自带的，也可能需要一个扩展（比如象 Apache 的 mod_negotation 模 块或者 IIS 里

20、Port80 的 PageXchanger ）来支持。这样做会有一个负面的影响， 它可能会造成服务器性能的一点损失。然而，内容协商的功能所带来的好处远大 于所付出的。干净利落的 URL 可让您的网站即安全又轻便，甚至还使得自适应的 内容传递变成可能：根据访问者浏览器的功能和系统的设置来向他传输不同类型 的图片或语言！更多的说明请参看同作者所著的 Towards Next Generation URLs 一文。注意：少了扩展名的 URL 不会降低您网站在搜索引擎上的排名。 Port80 软件和 其他知名网站（如 W3C 网站）都使用此技术而没有负面效果。n重构scrip七和七yle调用方式来优化

21、请求次数本站所有资源部分转载自互联网！版权归作者所有！我们常常在一个 HTML 文件头中看到这样标记代码：大多数情况下，上述代码应该被简化成：其中 g.js 包含了所有供全局使用的函数。虽然把脚本文件分成三份对于维护来 说是有道理的，但对于代码的传输则没有意义。单个的脚本下载要比三个分离的 请求高效的多，并且这也同时简化了 markup 代码的长度。有趣的是，这个方法 模仿了传统编程语言编译器的连接概念n 考虑代码级的 cache 能力提高网站性能中最重要的方法之一是提高缓冲能力（cacheability）。网页开发 者对使用meta标签来设置缓冲控制都很熟悉，可是撇开meta对代理的缓冲毫

22、无用处不说，缓冲能力的真正价值是其对相关对象（比如图片或脚本）方面的应 用。为了提高缓冲能力，您要考虑根据改变频率对相关对象进行分段，把更适合 缓冲处理的东西放在某个目录中（比如：/cache或者/images/cache。一旦您按 照这个方法来组织您的网站，添加缓冲控制规则就很容易了，这样你的网站就会 向经常来的访问者“跳”出来。本站所有资源部分转载自互联网！版权归作者所有！现在，您已经了解了 20条有用的优化技巧来使您的网站变得更快。从单条来看 它们可能没有很大的作用。可是把它们合起来使用的话，网站的传输能力便会有 明显的提高。还有，对seo优化而言，用div+css可以更好布局网站的架构，搜索引擎 都是从上往下看的，累了就不看了，就是代码靠前 显示的内容却未必再前面， 这样搜索引擎先看前面的div就是可以根据自己的需要进行定位。