重视网站前端代码优化几个细则

历经2年的学习，我对网站优化总结了几点：网站结构优化，前端代码优化，网页设计优化，链接优化等四个方面。每个优化细节，都产生着交叉式的影响，而且对网站产生着不同的作用。然而前端代码是网站的基础语言，也是搜索引擎认知的语言，所以每个网站都要重视前端代码，今天分享一下，我是如何进行优化前端代码的。

前端代码主要包括CSS语言和HTML语言。这里主要说一下CSS代码优化。

Css代码优化对网站的好处是：

（1）加快用户打开网站的速度，一般情况一下，用户打开网站超过8秒，用户就排除了这个网站。所以在优化代码的时候，代码简单是重要的一个方面。简单代码是网页的字节数减少了，减少了浏览器下载代码的时间。

（2）网站改版css便于修改，标准的css让代码整齐，简单，不管是网站的改版，还是网站修改内容，都便于维护，省去大量的时间。

代码优化细则：

（1）CSS代码简写。这里说的简写主要解决的问题是，网站代码冗余，去除不必要的空格等等。如果可以用一句表达的语言，就不要多出几行代码，符合W3C标准。

代码冗余

例如：最长用的margin，属于多个属性简化为一条综合属性

未优化前

margin-left：2px;

margin-right：4px;

margin-top：8px;

margin-bottom：6px;

可以简写为

margin:8px 4px 6px 2px;

去除代码空格

去除多余的空格键，可以有效减少网页的字节数

例如：

.a{

Font-size:14px;

Border:2px solid red;

Padding:1px 2px;}

可以简写为：

.a{ Font-size:14px; Border:2px solid red; Padding:1px 2px;}

（2）同属性提出

如果2个样式带有同样的属性，可以把同属性单独提出处理。例如A样式和B样式的字体颜色、大小、边框都一样，那么就可以考虑提出。

例如：

.gongyong{font-size:12px;border:1px solid red}

.yangshi{ width:10px;}

.yangshi2{width:20px;}

（3）结构清晰优化

网站代码清晰是指，把代码分区处理：网站头部、网站身体，网站底部，3个区域进行不同的布局。不同区间的代码要区别总的选择器，选择不同颜色加以区分隔开处理。

总结：网站的前端代码，搜索引擎重视评估程度为20%。代码简化，爬行的目录层次浅，这样加强了搜索引擎对代码的友好程度，进而提高网站的权重，关键词才会有良好的排名。如果代码冗余，烦琐，搜索引擎也就关注的少了。