首先在做网站代码优化,要已经做过域名分析,空间分析,搜索引擎分析,竞争对手分析,关键词分析,在全部进行数据分析的的基础上进行的代码优化,一定要做到:知己知彼百战不殆!
1.清除垃圾代码(代码优化):
空格字符是网页中最常见的垃圾代码,空格常常出现在每行代码的开始和结束,还有就是空行
(1)每行代码开始处出现的空格字符
(2)每行代码结束处的空格字符
(3)空白行,在编写代码时常利⺌用空行或者注释对不同的模板功能进行分隔这样就产生了空白行
清楚空白行可以有以下的方法:
(1)把代码转至html代码编辑模式
(2)按 ctrl+A全选代码
(3)使用组合键
shift+Tab 删除
默认属性
例如网页中的内容常以左对齐显示,所以此时再用 左对齐属性有些多余了
常见的默认属性有以下几个:
align="left" 横向左对齐 valign="middle"竖向居中对齐 size="3" 文字大小属性值 默认情况下是3号
bgcolor="#ffffff" 背⺌景默认属性为白色
对于这些代码,可以利⺌用Dreamwea⺌ver 的替换功能把他们替换成 空白就可以了
注释语句
过多的注释语句不仅会占用大量的网页存储空间,而且还会稀释关键字的密度
长标签替换成短标签
比如,<b>和<strong>都是对字体加粗,起到的作用是一样的,但是<strong>比<b>多5个字符
网页中多种不同的标签可以实现同样的效果但是为了网页的精简可以才要短标签,网页中常见的有以下几种
加粗 <strong> 对应<b>
斜体 <em> 对应<i>
删除线 <strike> 对应<s>
缩进 <blockquote>对应 <ul>
2.Css等脚本优化(脚本优化):
CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:
步骤/方法
1. 使用Reset但并非全局Reset
不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:
*{margin:0;padding:0;}
这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
2. 良好的命名习惯
无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。比如下面这样的代码:
.aaabb{margin:2px;color:red;}
我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:
<h1>My name is <span class=”red blod”>Wiky</span></h1>
问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:
red{color:bule;}
这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,您可以选择意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}
这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如:
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。
3.代码缩写
CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4.利用CSS继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
可以写成:
#container{font-family:Georgia,serif; }
5.使用多重选择器
你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6. 适当的代码注释
代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。
7. 保持CSS的可读性
书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。
8. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。
9.避免使用CSS表达式(Expression)
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
代码压缩
当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。
3. SEO站内优化(整站优化):
一、代码及标签优化
代码和标签的优化,主要从以下几个方面进行:
1、网站代码精简和CSS&JS
2、网站标题标签(titile)设置合理化
3、网站关键词(keywords)设置合理化
4、网站描述(Description)设置合理化
5、网站H1/H2标签的合理优化
6、网站METE标签的合理优化
二、网站URL优化
1、网站页面的静态化处理(生成html)
2、网站扁平化层级结构
3、网站SEO定制文件名
4、网站导航的面包屑处理
三、网站内容优化
1、网站内容的原创性
2、网站内容的更新频率
3、网站数据库的总体数据量
评论(0人参与,0条评论)
发布评论
最新评论