第七章 网页代码优化

第七章网页代码优化7.1代码优化简介代码优化是页面优化的重要环节，是页面优化的基础。代码优化就是对网页中的HTML源代码进行必要的调整，以提高页面的友好性。页面经过代码优化后：–一方面可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性；–另一方面，可以有效地突出页面的主题，提高页面的相关性。主要包括：精简代码、头部优化、权重标签使用、图片优化。7.2精简代码精简代码是指清除或者简化页面中的代码，从而达到降低页面体积、提高页面的用户体验及搜索引擎友好性的目的。页面代码的精简包括五大环节：清理垃圾代码、HTML标签转换、CSS优化、JS优化及表格优化。其中，清理垃圾代码是最重要、最基础的7.2.1清理垃圾代码清理垃圾代码就是指删除页面中的冗余代码。一个页面经过处理后，可以删除将近80%的冗余代码。垃圾代码是指那些在删除的情况下也不会影响页面正常显示的非必要代码。这些代码占据着庞大的空间，不但耗费用户下载页面的时间，还占用着搜索引擎巨大的存储空间及数据分析时间。垃圾代码的产生一般情况下，我们会使用网页制作软件制作网页，例如：Frontpage、word和Dreamweaver。除了站大部分的必须代码以外，还有一小部分可有可无的垃圾代码。用不同的工具制作的网页，生成的垃圾代码也不一样，其中word生成的最多，而Dreamweaver代码最为精简。完全避免生成垃圾代码的方法，就是通过手工编写代码。在掌握这种方法之前，最好的方式是用Dreamweaver编写，然后手工清理。垃圾代码的清理网页制作软件产生的常见垃圾代码包括：空格、默认属性、注释语句、以及空语句。空格：–空格字符是网页中最常见的垃圾代码。这里的空格指的是在代码环境下敲击键盘空格键产生的符号，并非HTML语言中的“ ”，网页中的每个空格都是一个字符；–初步统计，空格字符约占页面总体积的1.5%；–空格字符通常会出现在每行代码的开始和结束处，还有就是空行中1.网页制作时，网页制作软件生成代码时，默认产生的缩进字符；2.空白行：编写代码时，常利用空行或者注释对不同功能模块进行分割产生的；3.每行代码结束处的空格字符：是在编辑HTML代码时不小心加上去的;Dreamweaver中空格字符的删除对于每行代码开始前的空格字符–转至HTML代码编辑模式；–按Ctrl+A选择全部代码；–使用组合键Shift+Tab，直至删除所有空格为止。对于空行中的空格字符，只能手动清理。对于每行代码结尾处的空格字符–用鼠标选择“”+“一个空格字符”，–再按Ctrl+F，弹出查找和替换窗口；–在替换处填上“”，再点击“替换全部”即可默认属性在利用网页软件制作网页时，通常会产生一些默认属性的代码。这些属性是可以删除的，而且并不会影响页面效果。例如：–align=“left”，横向左对齐属性，默认情况下就是左对齐–valign=“middle”–size=“3”：文字大小属性，默认情况下就是3号字体；–target=“_self”：新页面打开属性值，默认情况下就是在当前窗口中打开注释语句注释语句是用于对代码功能或作用进行说明的语句，其中的内容对于普通用户来说是不可见的，即在页面中不显示注释标签里的内容。制作网页时，我们或多或少会添加注释语句以增强代码的可读性，但是，过多的注释会占用大量的空间。如果在里面添加大量的关键词，还会被搜索引擎认为是堆砌关键字，从而受到惩罚。在添加注释语句时，要坚守一个原则：绝不添加那些即使删除后也不会影响网页源代码可读性的注释语句。空语句简单的说，空语句就是指标签间不存在任何内容的语句。例如：p/p就是一个典型的空语句。空语句的清理主要是针对即使删除后也不会影响页面正常现实的标签。在Dreamweaver中可以通过命令菜单中的清理HTML命令来实现。代码清理软件：advancedHTMLoptimizer。但它会删除所有的换行，从而严重影响代码的可读性。7.2.2HTML标签转换HTML标签转换主要是使用短标签替换在网页中实现同样效果的长标签。例如：b与strong，都是表示字体加粗，但是后者比前者多了5个字符。如果页面上有很多的加粗标签，就会产生不少的冗余代码。效果长标签短标签加粗strongb斜体emi删除线strikes缩进blockquoteul利用Dreamweaver的查找替换功能，可以轻松完成HTML长短标签的替换。7.2.5表格优化表格优化是精简代码的最后一步。主要是解决表格间的嵌套问题，让表格间保持独立，从而加快表格内容的显示速度。提高用户体验。也可以精简页面代码。我们先来了解一下浏览器解析HTML代码的过程：当浏览器遇到一个标签的开始标签时，就寻找与之匹配的结束标签，直至匹配上才会在浏览器中显示该标签的内容。例如，当浏览器遇到table标签时，就会寻找/table标签，如果找不到，就不会显示标签中的内容。一个3行1列的表格，每个单元格里再嵌套入一个表格，假设每个小表格里的内容为50KB，则表格里代码至少有150KB，浏览器至少需要下载执行150KB的代码后才会显示表格里的内容，速度较慢。而如果让表格之间保持独立，则只需要下载50KB左右的内容，就会显示相应的内容，速度较快，而且节省代码。关于表格标签table/table标签是表格标签；tr/tr表格中的一行；td/td表格中的一个单元格th/th表头单元格。小结我们总是想办法降低页面的体积，但是并不是说页面体积越小越好，因为页面体积越小，意味着页面中的内容越少，能给用户提供的信息越少，一般来说：–一个页面的体积保持在100KB左右对于搜索引擎更为友好；–搜索引擎更重视页面中前100KB的内容；–搜索引擎更愿意收录体积在100KB的页面。当然，随着各方面技术的发展，搜索引擎会慢慢接受体积更大的页面的。7.3页面头部优化HTML代码中head/head之间的区域称为网页的头部。在网页的头部中，通常存放一些介绍页面内容的信息，例如页面标题、描述及关键字等。在对头部进行优化的过程中，除了要清理垃圾代码外，最重要的还有拟写标题、描述文字、以及关键词标签的内容。7.3.1摘要信息搜索引擎向用户展示搜索结果的内容包括：–页面标题、网页描述、URL、更新日期、网页快照等；其中，页面标题以及页面描述称之为页面的摘要信息。摘要信息的生成在不同的搜索引擎中会存在比较大的差别，即使是同一个搜索引擎也会由于页面的实际情况而有所不同；一般情况下，搜索引擎会提取页面标题标签中的内容作为摘要信息标题；而描述则通常来自于页面描述标签的内容或直接从业面正文中截取。7.3.1摘要信息一般情况下，Google和百度都是提取title/title之间的内容作为标题；Google会以描述标签的内容作为摘要信息中的描述，前提是Description/Description标签的内容不是十分的糟糕。百度则更倾向于从页面正文内容中去截取相关的信息作为描述，一般会选取关键词词频较大，并且存在句子形式的区域；或从页面中不同的地方提取包含关键字的内容拼凑成接近句子形式的描述想用户进行展示，（中间用省略号分隔）。7.3.2title标签title标签，即标题标签。是对页面主体的概括，相当于一篇文章的题目。标题标签的优化是网站优化中最重要的内容之一，对页面相关性产生决定性的影响。大多数的搜索引擎都是提取网页标签中的全部或部分内容作为搜索结果中摘要信息的标题向用户展示。因此，再拟写标题内容时，要做到主题突出、内容简洁。标题长度标题标签中的内容非常重要，但是，为了提高页面的用户体验，搜索引擎会根据实际情况从页面标题中取全部或部分重要的内容向用户展示，不同的搜索引擎中会有所区别：–Google中摘要信息的标题长度一般在70B左右；–而百度中则为56B左右；–超出范围的内容将会被省略。因此，我们在拟写标题的时候，长度应该控制在28个中文字符（56个英文字符）之内。关键词分布搜索引擎分析页面的时候，在HTML源代码中的自上而下的进行，所以关键词应该尽量前靠。另外，就向前面说的那样，无关紧要的词不要放到页面标题当中，尤其是靠前的位置。正确的方式应该是：＜title＞手机—中国最好的手机网站/title关键词词频关键词词频绝非越大越好；有观点认为，一般情况下，在标题内容中，主关键词出现次数不应该超过3次，每个辅关键词只出现一次是比较合理的；另外，不要简单的罗列关键词，最好是采用对关键词进行描述的形式。例如：–title小游戏|休闲小游戏/title–title小游戏—打造全国最好休闲小游戏网站/title–以上两种方式，都提高了主关键词“小游戏”的词频，也都增加了辅关键字“休闲小游戏”，但是第二种是采用的对主关键词进行描述的形式，所以更能得到搜索引擎的青睐。关键词组合技巧标题优化的最后一个环节就是如何实现标题中关键词的组合与分隔问题。这比较类似于URL中的各组成部分的组合。在标题中常用的分隔符为竖杠“|”、空格“”、逗号“，”；例如：–title手机|评测|图片/title–title手机评测图片/title–title手机，评测，图片/title–title手机评测图片/title以上四种形式中都包含关键词“手机”、“评测”、“图片”、“手机评测”、“评测图片”、“手机图片”，但这四种方式的效果并不一样；一般认为其优先级是，竖杠空格逗号没有分隔符；描述标签描述标签，即description标签，其内容是对页面内容的概括，相当于页面的简介。由于描述标签经常被一些不法分子用于堆砌关键词，导致其对页面相关性的影响力日渐下降。但其重要性仍然非常中要。描述长度：Google一般只截取225个字节（112个中文字符）左右的内容作为页面的描述，超出的就会被省略。关键词分布：与在页面正文和页面标题一样，关键词前置，都有助于提高页面相关性。关键词词频：有观点认为，在限定的范围内，主关键词出现5次左右，辅关键词出现1次左右比较合适。另外，描述性文字有利于简单的关键词罗列。关键词组合技巧在描述标签里，我们同样可以使用主、辅关键词结合的方法来拓展描述的意义。需要注意的是，标题标签里的主、辅关键词也必须出现在描述标签的内容里，这样才能有效突出该页面的主辅关键词。7.3.4关键词标签关键词标签即keywords标签，是头部三大标签之一。但是相对于其他两个标签，关键词标签所起的作用微乎其微，甚至被人忽略，这主要是因为被恶意优化者滥用的结果。但是无论如何，为了能在残酷的竞争中脱颖而出，我们还是要把握好每一个可能会影响页面相关性的细节。关键词标签的优化同样涉及内容长度、关键词组合、关键词分布、关键词词频等问题。但相对标题及描述标签要简单的多。要注意的是，关键词标签中罗列的关键词应该是在标题和描述中出现过的。切忌：堆砌和网页内容无关的关键词。7.3.5其他标签Robots标签：主要是用来限制搜索引擎对网站相关内容的抓取，页面中如果不添加Robots标签，搜索引擎就认为该页面下所有的内容都是允许抓取的。Created标签：为文档建立日期标签。例如：Created2010-06-2T14:46:00Z/o:CreatedLastSaved标签：为文档最后更新日期标签，用于注明文档最后一次修改的时间。搜索引擎以前会以此标签作为页面最后更新时间的一句。前两个标签都因为被滥用，而被搜索引擎所忽视。7.4权重标签的使用常见的权重标签–标题标签h–字体标签font–加粗标签b–斜体标签i–下划线标签u特别强调：h1标签非常重要，但会影响页面美观，可以利用CSS控制–h1class=“h1”/h1注意：只有当权重标签与页面中相关的关键字相结合后才能起到提高页面相关性作用。