SEO代码优化之精简代码详细步骤

[ SEO优化   // 2014-08-28  ]
165

         SEO不光是写关键词。写文章、发外链那么简单,真正的高手是要懂得网站整体构架,页面布局,以及网站代码的优化,所谓优化代码,就是对网页中的HTML源代码进行必要的调整,以提高页面的用户体验以及搜索引擎友好性的目的。那么,我们要怎么进行代码优化? 

         代码优化的主要工作包括精简代码、头部优化及权重标签的使用以及图片优化。其中精简代码则是其中最基础,最根本的。

精简代码:

         精简代码,是指删除页面的冗余代码或者简化页面中的代码。所谓的垃圾代码就是那些删除后不影响页面正常显示的非必要代码。一个页面经过垃圾代码清理后,可以删除接近%80的冗余代码。

         页面代码的精简步骤有五个环节,分别是清理垃圾代码、HTML标签的转换、CSS优化、JS优化以及表格优化,其中精简代码是其中最重要最基础的一个环节。

清理垃圾代码步骤:

          使用网页制作工具设计网页时常见的垃圾代码主要包括空格、默认属性、注释语句以及空语句等~~~~

       空格:

        空格字符是网页中最常见的垃圾代码。但此处讨论的空格字符并非HTML语言中的 “&nbsp” 标签,而是指在代码编缉环境下敲击键盘上的空格键产生的符号。网页中的每 个空格都相当于一个字符,因此,空格字符也会占用巨大的空间。

       空格字符通常会出现在每行代码的开始和结束处,还有就是空行中。对于页面中不同位置上的空格字符,清理的方式主要有以下几种:

         1、对于每行代码开始前的空格字符可以使用Dreamweaver或者EditPlus等软件进行清理。具体操作步骤如下:

         第一.转到HTML代码编辑 格式(如果是Dreamweaver);

        第二.按Ctrl+A选择全部代码;

        第三.使用组合键Shift+Tab,直到删除所有空格为止;

     空行:

          对于空行中空格字符清理;只能手工逐行去掉。

          1、首先用鼠标选中空行;

SEO konghang

               2、再按Delete,即可删除空行。

       每行代码结尾处的空格字符:

          对 于代码结尾处空格字符:对于每行代码结束处的空格字符,我们可以使用Dreamweaver或者Editplus编辑软件的替换功能进行清理:

       1、用鼠标选择 “ > ” + “一个空格字符  ”  即  “ >  ”  ; 

       2、再按Ctrl+F,就会弹出软件的【查找和替换】的窗口,替换处填上“>”,再点击“全部替换” 即可。

SEOkkongzifu

          页面经过以上的清理空格字符后,大概可以删除70%左右的垃圾代码。也就是说,空格字符代码量大概占总垃圾代码的70%,还有30%左右的垃圾代码分布在默认属性、注释及空语句中。

        默认属性代码清理:

          在利用网页制作软件制作网页时,通常会产生一些默认属性的代码。例如,我们在HTML代码中不添加左对齐属性,页面中的内容也是以左对齐的方式显示的,所以代码中左对齐属性是可以删除的。

       在页面中,还有很多其他属性都是默认属性,以下是较常见的。

       1.align=“left”;横向居左对齐属性值,默认情况下文字或者图片都是横向居左对齐的。

       2.valign=“middle”:竖向居中对齐属性,默认情况下文字或者图片都是竖向居中对齐的。

       3.size=“3”:文字大小属性值,默认情况下是在当前窗口中打开;

      4.target=“_self”:新面面打开属性值,默认情况下网页中文本的字体颜色是黑色;

      5.Font=“#000000”:文字颜色属性值,默认情况下网页的背景颜色是白色;

      6.Bgcolor=“#FFFFFF”:背景颜色属性值,默认情况下网页的背景是白色。

         利用Dreamweaver的替换功能,可以完成对默认属性代码的替换。在“查找”中填上要替换的默认属性代码,“替换”处留空白,还可以在“查找范围”上选择替换范围。然后点击“替换全部”就可以删除“查找范围”内所有指定的默认属性代码。如下图:

SEO morenshuxing

         注释语句:

          注释语句是用来对代码功能或作用进行说明的语句,注释语句的内容对于普通用户来说是不可见的。即用户在页面中看不到HTML代码中的注释标签里的内容。

          在制作网页的时候,我们或多或少会添加注释语句以增强代码的可读性。但是过多的注释语句会占用大量的存储空间,不仅如此,如果在注释标签里添加大量的关字,还会被搜索引擎认为是堆砌关键字,从而对网站进行惩罚。

         所以,在添加注释语句时,我们要坚守一个原则:绝不添加那些即使删除后也不会影响网页源代码可读性的注释语句。比如如下的注释语句完全可以省略删除!

SEO代码注释

      空语句:

          垃圾代码清理的最后一步就是删除代码中的空语句。简单地说,空语句就是指标签间不存在任何内容的语句。例 如,<b></b>就是一个典型的空语句。空语句的清理主要针对即使删除后也不会影响页面正常的标签,如<b>< /b>、<font></font>、<h1></h1>等。但有一部分标签是不能删的 (如<tr>或者<td>),否则页面将会出现错乱。

         对于空语句的清理,我们可以使用网页制作软件提供的特定功能对代码中的空语句进行清理。例如,Dreamweaver的“清理HTML/XHTML”功能就可以快速清理页面中的空语句:

    (1)、点击菜单栏中的“命令”,选择“清理HTML”;

SEOqingliHTML

       (2)、根据需要选择相应的选项,然后按“确定”即可。

SEOqinglihtml2

           对于一些不熟悉HTML标签的朋友来说,清理垃圾代码可以使用专业的编辑软件,比如Dreamweaver或者advanced HTML optimizer等工具。尤其是advanced HTML optimizer是比较常用的垃圾代码清理工具,不但可以删除代码里面多余的标签,还可以把长标签转换成短标签,不过,advanced HTML optimizer会把所有的换行删除,严重影响代码的可读性。

写在最后:

          经过垃圾代码清理之后,页面中的70%的冗余代码已经被清除,但是精简代码的工作还未成功,比如转换HTML中的长标签以及对CSS、 JavaScript进行优化。