代码优化是页面优化的一个重要环节,也是页面优化的基础,但一直得不到人们的重视。为了让读者能从基础出发对页面进行优化,本书把“代码优化”作为一个独立的章节进行介绍。
代码优化简介
代码优化就是对网页中的HTML 源代码进行必要的调整以提高页面的友好性。页面经过代码优化后,一方面,可以有效精简页面中的冗余代码,加快页面的显示速度,同时也降低页面占用搜索引擎服务器的储存空间,从而提高页面的用户体验及搜索引擎友好性;另一方面,还可以有效地突出页面的主题,提高页面的相关性。
代码优化的主要工作包括:“精简代码” “头部优化” “权重标签使用”及“图片优化”。在这四
个环节中,“精简代码”是最基础、最根本的。
精简代码
精简代码是指清除或者简化页面中的代码,从而达到降低页面体积,提高页面的用户体
验及搜索引擎友好性的目的。
页面代码的精简包括:“清理垃圾代码” “HTML 标签转换” “CSS 优化” “JS 优化”及“表格优化”五大环节。其中,“清理垃圾代码”又是“精简代码”中最重要、最基础的。
清理垃圾代码
清理垃圾代码是指删除页面中的冗余代码。一个页面经过垃圾代码清理后,可以删除接近 80%的冗余代码。然而,什么样的代码才是垃圾代码呢?
1. 垃圾代码简介
垃圾代码就是指那些在删除的情况下也不会影响页面正常显示的非必要代码。这些代码占据着庞大的空间,不但耗费用户下载页面的时间,还占用搜索引擎巨大的储存空间及增加搜索引擎分析数据的时间。然而,这么庞大的垃圾代码是如何产生的呢?
2. 垃圾代码的产生
一般情况下,我们会使用网页制作软件制作网页,如:Fontpage,Word 及 Dreamweaver。这些网页制作软件在制作网页时,会生成相应的 HTML 代码,其中大部分是必须的,而有一小部分则是可有可无,这就是所谓的垃圾代码。因此,避免产生垃圾代码的最好办法就是以手工编写代码的方式制作网页。
即使是同样内容的网页,使用不同的网页制作软件进行制作,所产生的代码也会存在很大的区别。例如:对于包含以下内容的网页:“我做的第一个网页” 使用 Word 制作会产生 103 行代码,共 2.96 K 的内容;Fontpage 则产生 17 行代码,共 308 字节内容;而使用 Dr
eamweaver 只产生 12 行代码,275 的字节的内容。
Word
如下所示是使用 Word 制作网页时所产生的 HTML 代码,代码中包含了作者、版本、建立日期、最新更新日期、公司名称等标签及内容,其中绝大部分内容不管是对普通用户还是搜索引擎都毫无意义的。
Fontpage
如下所示是使用 Fontpage 制作网页时所产生的 HTML 代码。尽管比较简洁,但还是存在一些可有可无的标签及内容,例如:Generator(生成器)及 Progid 等。
Dreamweaver
使用 Dreamweaver 制作的页面所产生的代码是这三者中最简洁的。但是,却缺少一些非常重要的标签及内容,例如:“Description”及“Keywords”标签。 从上面例子中,我们可以看到使用 Dreamweaver 制作网页时所产生的代码量是最少的。因此,在没有掌握手工编写代码前,我们可以使用 Dreamweaver 制作网页,完成后再清理其中的垃圾代码。
尽管不同的软件制作网页时所产生代码会存在很大的差别,但有一部分代码是共有的,包括垃圾代码。
3. 垃圾代码的清理
从上面的几个例子中,我们可以看到网页制作软件产生的常见垃圾代码包括:空格、默认属性、注释语句及空语句等。
(1)空格
空格字符是网页中最常见的垃圾代码。但此处讨论的空格字符并非 HTML 语言中的“ ”标签,而是指在代码编缉环境下敲击键盘上的空格键所产生的符号。网页中每个空格都相当于一个字符,因此,空格字符也会占用巨大的空间。初步统计,空格字符约占页面总体积的 1.5%。也就是说,一个 100K 的页面中,其中 1.5K 是空格字符。
空格字符通常会出现在每行代码的开始、结束处,还有就是空行中,清理空格字符
页面不同位置上的空格字符,其清理的方式也有所不同,下面向读者介绍几种常用的空格字符清理方法:
1) 每行代码开始前的空格字符
对于每行代码开始前的空格字符,我们可以使用 Dreamweaver 或者 EditPlus 等软件进
行清理。具体操作步骤如下:
1. 转至 HTML 代码编缉模式(如果是 Dreamweaver);
2. “Ctrl + A” 选择全部代码;
3. 使用组合键“Shift + Tab” 直至删除所有空格为止。
2) 空行
对于空行中空格字符的清理,我们只能手工逐行去掉
1. 首先,使用鼠标选择空行;
2. 再按“Delete”键,即可删除空行。
(3)注释语句
注释语句是用于对代码功能或作用进行说明的语句,注释语句里的内容对于普通用户来
说是不可见的。即普通用户在页面中是看不到 HTML 代码中注释标签里的内容。
在制作网页时,我们或多或少会添加注释语句以增强代码的可读性。但是,过多的注释
语句会占用大量的空间。不仅如此,如果在注释标签里添加大量的关键字,还会被搜索引擎
认为是堆砌关键字,从而对网站进行惩罚
所以,在添加注释语句时,我们要坚守一个原则:“绝不添加那些即使删除后也不会影响
网页源代码可读性的注释语句。”例如:以下代码中的注释内容就是完全可以省略的:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><!--表格开始标
签-->
<tr><!--行开始标签-->
<td> </td>
</tr><!--行结束标签-->
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table><!--表格结束标签-->
(4)空语句
垃圾代码清理的最后一步就是删除代码中的空语句。简单地说,空语句就是指标签间不存在任何内容的语句。例如:“<p></p>”就是一个典型的空语句空语句的清理主要是针对那部分即使删除后也不会影响页面正常显示的标签,如:<b></b>,<font></font>,<h1></h1>等。但有一部标签是不能删除的(如:<tr>、<td>),否则页面将会出现错乱。
我们可以使用网页制作软件提供的特定功能对代码中的空语句进行清理,例如:Drea
mweaver 的“清理 HTML/XHTML”功能就可以快速清理页面中的空语句,如下图 5 -6 所示。
1. 点击菜单栏中的“命令”
2. 选择“清理 HTML”
3. 根据需要选择相应的选项,然后按“确定”即可。
手工编写 HTML 代码是搜索引擎优化从业者必须具备的基本技能。如果读者已经具备
手工编写 HTML 代码的能力,就应该优先采用手工编写代码的方式制作网页。
而对于 HTML 语言不熟悉的读者,也可以在网页制作完成后再对垃圾代码进行清理。
随着网页制作工具不断的改进,以前很多需要手工清理的工作,现在都可以用特定的软件代替。例如:Dreamweaver 或者 Advanced HTML Optimizer。
(seo入门专题教程不断更新中:https://www.365jz.com/Special/seo/)
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛