保定网络推广-网站代码优化应该怎样做
- 时间：9年前
- 浏览：159次
起首在做网站代码优化，要已做过域名剖析，空间剖析，搜索引擎剖析，竞争对手剖析，关键词剖析，在悉数举行数据剖析的的基础上举行的代码优化，肯定要做到：知己知彼百战不殆!
1.消灭垃圾代码(代码优化)：
空格字符是网页中最罕见的垃圾代码，空格经常涌现在每行代码的最先和完毕，另有就是空行
(1)每行代码最先处涌现的空格字符
(2)每行代码完毕处的空格字符
(3)空缺行，在编写代码经常利⺌用空行或许解释对差别的模板功用举行分开如许就发生了空缺行
清楚空缺行能够有以下的要领：
(1)把代码转至html代码编辑形式
(2)按 ctrl+A全选代码
(3)运用组合键
shift+Tab 删除
默许属性
比方网页中的内容常以左对齐显现，所以此时再用 左对齐属性有些过剩了
罕见的默许属性有以下几个：
align="left" 横向左对齐 valign="middle"竖向居中对齐 size="3" 文字大小属性值 默许状况下是3号
bgcolor="#ffffff" 背⺌景默许属性为白色
关于这些代码，能够利⺌用Dreamwea⺌ver 的替代功用把他们替代成 空缺就能够了
解释语句
过量的解释语句不仅会占用大批的网页存储空间，而且还会稀释关键字的密度
长标签替代成短标签
比方，和都是对字体加粗，起到的作用是一样的，然则比多5个字符
网页中多种差别的标签能够完成一样的结果然则为了网页的精简能够才要短标签，网页中罕见的有以下几种
加粗 对应
斜体 对应
删除线 对应
缩进
对应
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，但有没有想过如许的代码一样是很有题目的：
My name is Wiky
题目在于假如你须要把一切底本赤色的字体改成蓝色，那修正后就款式就会变成：
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、网站数据库的整体数据量
