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

2019-03-15    来源:196tuan.com

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

历经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%。代码简化,爬行的目录层次浅,这样加强了搜索引擎对代码的友好程度,进而提高网站的权重,关键词才会有良好的排名。如果代码冗余,烦琐,搜索引擎也就关注的少了。

来源:沈阳196团,http://www.196tuan.com

标签: 网站代码优化 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:浅谈内容和链接之提高网站相关性

下一篇:修改网站title的几种形式以及危险系数