网站优化之代码优化之CSS优化

文章作者:安格 发布时间:2019-06-04 15:25:30
很多人都注重内容的优化,却不注意网站结构的优化,网站结构其实有很多地方可以操作。例如代码优化,常见的可以SEO优化的地方有JS代码和CSS代码以及HTML代码。
今天就这儿工具来说一下CSS代码的常规操作方法,你网站如果想做CSS代码优化,可以参考一下。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。换句话说你网页的外观,布局,视觉都和它有关。
操作要点之一,引入CSS文件的方式。
网页中使用css共有三种方式,分别为:嵌入式、内联式、引用式。
嵌入式:将css写在<head></head>之间,并且用<style></style>标记进行声明。
内联式:对html的标记使用style属性,然后将css代码直接写在其中。
引用式:将html页面本身与css样式分离为两个或多个文件,使用时从外部引入当前页面。
推荐使用第三种,这样维护修改方便,加快网页显示速度,减小页面体积。
操作要点之二,CSS代码合并收缩。
充分利用css的继承和综合应用,对于这一点需要有一定的css基础才能做到。这个很好学,有很多教程。多个CSS文件如果不是必须分开,请合并为同一个文件,如此浏览器解读你的页面不需要多次打开不同的CSS文件。
就这儿认为这样可以加快服务器的响应,优化用户体验,也利于符合百度的算法,尽量控制页面在3秒内打开。
操作要点之三,了解CSS常见语法避免拖慢页面。
减少css嵌套,最好不要套三层以上,一般情况下块级元素加上类,里面的内联元素不用加,css写的时候块级class套内联tag,这样不仅可以减少css文件大小,还能减少性能浪费。
不使用@import,因为使用@import影响css文件的加载速度。减少低效代码的使用,如滤镜,express表达式,!import引入。
避免使用 expression 和 behavior。在页面渲染的过程中, expression 和 behavior 需要大量的计算,会大量地耗费浏览器资源。
最大的误区:
在最后要说一个就是很多人会建议正式发布网站之前去压缩CSS文件,这样也可以提高浏览器加载速度。事情是没错的,但是除非你后期不想修改页面,否则会你对维护造成一定障碍。
为什么?因为所谓的压缩,就是把所有东西挤成一堆,人类无法阅读,浏览器阅读毫无障碍。

版权与免责声明


Copyright © 2012-2018 河北威云信息科技有限公司. 版权所有 Power by DedeCms 冀ICP备12011028号