我对网站优化总结了几点:网站结构优化,前端代码优化,网页设计优化,链接优化等四个方面。每个优化细节,都产生着交叉式的影响,而且对网站产生着不同的作用。然而前端代码是网站的基础语言,也是搜索引擎认知的语言,所以每个网站都要重视前端代码,今天分享一下,我是如何进行优化前端代码的。
前端代码主要包括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; |
可以简写为
去除代码空格
去除多余的空格键,可以有效减少网页的字节数
例如:
.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;} |
id="iframe1104309_0" src="http://pos.baidu.com/ycgm?rtbid=1971540&rdid=9223372032564593756&dc=2&di=1104309&dri=0&dis=0&dai=9&ps=0x0&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1470459540516&ti=%E9%87%8D%E8%A7%86%E7%BD%91%E7%AB%99%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96%E5%87%A0%E4%B8%AA%E7%BB%86%E5%88%99%20-%20%E7%AB%99%E9%95%BF%E4%B9%8B%E5%AE%B6&ari=2&dbv=2&drs=3&pcs=1280x628&pss=1280x4066&cfv=14&cpl=10&chi=1&cce=true&cec=UTF-8&tlm=1470430741&rw=628<u=http%3A%2F%2Fwww.chinaz.com%2Fweb%2F2011%2F0418%2F172931.shtml<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DPwIy9WCxzGz9O_9WY8KvsEl8pGartp2JGVOGOf2S-mIveqKdO3TQQERCpH_HLFf6tG25IrMaG41Etoy_B--PyK%26wd%3D%26eqid%3Dc38a3c72000c86000000000357a56909&lcr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DPwIy9WCxzGz9O_9WY8KvsEl8pGartp2JGVOGOf2S-mIveqKdO3TQQERCpH_HLFf6tG25IrMaG41Etoy_B--PyK%26wd%3D%26eqid%3Dc38a3c72000c86000000000357a56909&ecd=1&psr=1280x800&par=1280x723&pis=-1x-1&ccd=24&cja=true&cmi=30&col=zh-CN&cdo=-1&tcn=1470459542&qn=9443a5bb5811f28e&tt=1470459540463.1432.1830.1831" width="200" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; vertical-align: bottom; margin: 0px;">
(3)结构清晰优化
网站代码清晰是指,把代码分区处理:网站头部、网站身体,网站底部,3个区域进行不同的布局。不同区间的代码要区别总的选择器,选择不同颜色加以区分隔开处理。
总结:网站的前端代码,搜索引擎重视评估程度为20%。代码简化,爬行的目录层次浅,这样加强了搜索引擎对代码的友好程度,进而提高网站的权重,关键词才会有良好的排名。如果代码冗余,烦琐,搜索引擎也就关注的少了。