您的位置:网站首页 > 博客 > 正文

网站优化的重点之一是代码优化

作者:知网科技 日期:2015/10/10 21:33:49 人气:
标签:
  代码优化所存在的重要地位
  在网站优化的过程中,大家应该听说过代码优化吧,很多人应该会觉得代码优化无足轻重,那么今天我就来讲述代码优化在网站优化中所存在的重要地位。
  
  
  代码优化是页面优化中一个重要的环节,也是页面优化的基础,但是一直没有得到站长们的重视,因为很多人对代码优化不是很了解,所谓的代码优化就是对网页中的HTML源代码进行必要的调整,以提高页面的友好性。页面经过代码优化后,一方面可以有效的精简页面中冗杂的代码,加快页面的显示速度,同时也降低页面占用搜索引擎服务器的存储空间,从而提高页面的用户体验以及搜索引擎友好性,另一方面还可以有效的突出页面的主题,提高页面的相关性。
  
  代码优化的工作注意包括精简代码、头部优化、权重标签使用以及图片优化,这四个环节中,精简代码是最基础、最根本的。
  
  
  
  如何通过精简代码达到代码优化
  
  
  
  精简代码指的是清除或者简化页面中的代码,从而降低页面体积、提高页面的用户体验以及搜索引擎的友好性的目的。页面代码的精简包括五大环节,他们是清理垃圾代码、HRML标签转化、CSS优化、JS优化以及表格优化,其中清理垃圾代码也是精简代码中最重要、最基础的。
  
  
  
  1.清理垃圾代码是指删除页面中的冗余代码,一个页面经过垃圾代码的清理后,可以删除接近
  
  80%的冗余代码。
  
  然而什么样的代码才是垃圾代码呢?所谓的垃圾代码就是在删除的情况下也不会影响页面正常显示的非必要的代码,这些代码占据着庞大的空间,不但不耗费用户下载页面的时间,还占用搜索引擎巨大的存储空间以及增加搜索引擎分析数据的时间。
  
  然而这些庞大的垃圾代码是如何产生的呢?垃圾代码的产生一般情况下如下,我们会使用网页制作软件制作网页,如FrontPage、Word以及Sreamweaver,这些网页额制作软件在制作网页的时候,会产生相应的HTML代码,其中大部分是必须的,而有一小部分则是可有可无的,这就是所谓的垃圾代码。因此避免垃圾代码的最好办法就是以手工编写代码的方式制作网页。
  
  即使是同样内容的网页,使用不同的的网页制作软件进行制作,所产生的代码也会存在很大的区别。例如对于包含“我做的第一个网页”内容的网页,使用Word制作会产生103行代码,共2.96KB的内容;FrontPage则会产生17行代码,共308B内容;而使用Dreamweaver只会产生12行代码,共275B的内容,所以Dreamweaver制作网页所产生的代码是三者中最简洁的,但是缺少一些非常重要的标签以及内容,例如Description以及Keywards标签。但是不管是那种软件制作的网页都会产生代码垃圾。
  
  
  
  垃圾代码清理
  
  
  
  网页制作时所产生的代码垃圾主要有空格、默认属性、注释以及空语句等。其中空格字符是代码中最常见的垃圾代码,但是此处要讲的空格字符并非HTML语言中的“&bsp;”标签,而是指在代码编辑环境下敲击键盘上的空格键所产生的符号。网页中每个空格相当于一个字符,因此空格字符也会占用巨大的空间。初步统计,空格字符约占页面总面积的1.5%,也就是说一个100KB的页面中,其中1.5KB是空格字符。
  
  空格字符通常会出现在每行代码的开始和结束处,还有就是空行中,如下所示:
  
  (1)每行代码开始前的空格字符,常利于空行或者注释对不同功能模块进行分割,这样就产生了空白行,如下面的例子:
  
  10<tablewidth=”778”border=”0”cellspacing=”0”cellpading=”0”>
  
  11A<tr>
  
  12每<td>&nbsp;</td>——————(C)每行代码后空格字符
  
  11行</tr>
  
  13代<tr>
  
  14码<td>7nbsp;</td>
  
  15前
  
  16空</tr>
  
  17格<tr>
  
  18字<td>7nbsp;</td>
  
  19符</tr>
  
  20</table>
  
  21(B)整个空格字符
  
  22
  
  23
  
  空格字符分布示意图
  
  每行代码开始前的空格字符
  
  对于每行代码开始前的空格字符,可以使用Dreamweaver或者EditPlus等软件进行清理,具体操作如下:
  
  (1)转至HTML代码编辑模式。
  
  (2)按ctrl+A选择全部代码
  
  (3)使用组合键Shift+Tab,直至删除所有的空格为止。
  
  对于公共字符的清理,只能手工逐渐去掉:
  
  (1)首先使用鼠标选择空行
  
  (2)再按Delete键,即可删除空行
  
  对于每行代码结束处的空格字符,可以使用Dreamweaver或者其他的编辑软件功能进行清理:
  
  (1)用鼠标选择“>”+“一个空格字符”,即“>”;
  
  (2)再按Ctrl+F,就会弹出如下图对话框
  
  (3)“替换”处填上“>”,再点击“替换全部”即可。
  
  
  
  
  Dreamweaver替换功能
  
  页面经过清理空格字符后,大概可以删除70%左右的垃圾代码,也就是说空格字符的代码量大约占总垃圾的70%,还有30%作用的垃圾代码分布在默认属性、注释语句以及空语句中。
  
  默认属性
  
  再利用网页制作软件制作网页时候,通常会产生一些默认属性的代码,例如我们在HTML代码中不添加左对齐属性,页面中的内容也是以左对齐的方式显示,所以代码中的左对齐属性是可以删除的。
  
  在页面中,还有很多其他的属性都是默认属性,一下是较常见的:
  
  (1)align=”left”:横向居中对其属性值,默认情况下文字或者图片都是横向居左对齐的。
  
  (2)Vagin=”middle”:竖向居中对其属性值,默认情况下文字或者图片都是竖向居中对齐的。
  
  (3)Size=”3”:文字大小属性值,默认情况下是3号字体。
  
  (4)Target=“_self”:新页面打开属性值,默认情况下是当前窗口中打开。
  
  利用Dreamweaver的替换功能中,可以完成的对默认属性代码的替换。在“查找范围”上选择替换范围,在“查找”中填上要替换的默认属性代码,“替换”处留空白,然后点击“替换全部”就可以删除“查找范围”内所有指定的默认属性代码。
  
  
  
  Dreamweaver替换功能
  
  
  
  注释语句是用于对代码功能或者作用进行说明的语句,其中的内容对于普通用户来说是不可见的,即普通用户在页面中看不到HTML代码中注释标签里的内容。
  
  在制作网页时,我们或多或少会添加注释语句以增强代码的可读性,但是过多的注释语句会占用大量的空间,不仅如此如果在注释标签里增加大量的关键字,还好被搜索引擎认为是堆砌关键字,从而对网站进行惩罚。
  
  所以再添加注释语句的时候,要坚守一个原则:绝不添加哪些即使删除后也不会影响网页源代码可读性的注释语句。例如下面的代码就是完全可以省略的:
  
  
  
  空语句是垃圾代码清除中的最后一步,简单的说,空语句就是纸标签间不存在任何内容的语句,例如<p></p>就是一个典型的空语句。
  
  空语句的清除主要是针对及时删除以后也不会影响页面正常显示的标签,如<b></b>、<ftont></front>、<h1></h1>等,但是有些标签不能删除的,比如<tr>、<td>,否则页面将会出现错路。
  
  我们可以使用网页制作软件提供的特定功能对代码中的空语句进行清理,例如Dreamweaver的“清理HTML/XMXL”功能就可以快速的清理页面中的空语句了。
  
  (1)点击菜单栏中的“命令”;
  
  (2)选择清理HTML
  
  (3)根据需要选择相应的选项,然后按“确定”即可。
  
  手工编写HTML代码是搜索引擎优化从业者必须具备的基本技能,如果你已经具备手工编写HTML代码的能力,就应该优先采用手工编写代码的方式制作网页。而对于不熟悉HTML语言的读者,也可以在网页制作完成后再对垃圾代码进行清理,随着网页制作工具的不断改进,一起很多需要手工情况的工作,现在都可以用特定的软件代替,例如软件Dreamweaver或者AdvancedHTMLOptimizer。
  
  AdvancedHTMLOptimize是常用的垃圾代码清理工具,使用这款工具不但可以删除代码里的多余的标签,还能把长标签转换为短标签,但是这个工具会吧所有的换行删除,严重影响代码的可塑性,例如:
  
  
  经过垃圾代码清理之后,页面中70%以上的冗余代码已经被清除。

(())
顶一下
参与讨论
姓名: 验证码:看不清楚,换一个
最新评论

联系我们

软件开发: 15838307519(司经理)

网络营销: 13676968269(王经理)

网络建设: 13073737771(郭经理)

24小时服务电话: 0371-56683330

了解更多APP开发

+好友