文章中心
文章中心
我们以信息质量为主,为客户展现真实可靠的数据
易懂SEO应用系统 > 文章中心 > SEO优化 > CSS优化方法

CSS优化方法

网站专员SEO优化423人看过2021-5-20 08:00:50

01、CSS使用简写方式

简写可以使CSS文件更小

使用缩写语句,如下面所示的 margin 声明,可以从根本上减小 CSS 文件的大小。


p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }


02、查找并删除未使用的 CSS

如果代码没有执行任何操作,那么就删除它

03、CSS进行压缩,提高CSS加载速度

04、内联样式表CSS放上关键代码

加载外部样式表需要花费时间,这是由于延迟造成的,因此,可以把最关键的代码位放在 head 中,但是,请确保不要做得过多。


<html>

<head>

<style>

.red{color:red;}

</style>

</head>

<body>

<div class="red">

Hello, world!

</div>


05、允许反并行解析

@import 将 CSS 样式方便添加代码中。遗憾的是,这些好处并不是没有代价的,由于 @import 可以嵌套,因此无法并行解析它们。更并行的方法是使用一系列 <link> 标记,浏览器可以立即获取这些标记。


@import url("a.css");
@import url("b.css");
@import url("c.css");
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">


06、用 CSS 替换图片

几年前,一套半透明的 png 在网站上创建半透明效果是司空见惯的。现在,CSS过滤器提供了一种节省资源的替代方法。例如,以下这个代码片段可以确保所讨论的图片显示为其自身的灰度版本。


img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}


07、使用颜色快捷方式

常识告诉我们,六位数的颜色描述符是表达颜色最有效的方式。事实并非如此——在某些情况下,速记描述或颜色名称可以更短。


.main { background-color: #ffffff; }
.main { background: #fff; }


08、删除不必要的零和单位

CSS 支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零,如下面的代码片段所示。此外,请记住,零始终是零,添加维度不会为包含的信息附带价值。


padding: 0.2em;
margin: 20.0em;
border: 0px;

padding: .2em;
margin: 20em;
border: 0;


09、消除过多分号

这种优化需要谨慎,因为它会影响代码的更改。CSS的规范允许省略属性组中的最后一个分号。由于这种优化方法所节省的成本很小,所以我们主要针对那些正在开发自动优化的程序员说明这一点。


p {
. . .
font-size: 1.33em
}


10、使用纹理图集

由于协议开销的原因,加载多个小图片的效率很低。我们可以把小图片组合成一个大的PNG 文件,然后通过 CSS 规则将其分解。


.img {
width:80px;
height:31px;
background-position: -160px -160px
}
.img:hover {
width:80px;
height:32px;
background-position: -80px -160px
}


11、CSS省略单位 px

提高性能的一个简单方法是使用CSS标准的一个特性。为 0 的数值默认单位是 px—— 删除 px 可以为每个数字节省两个字节。


h2 {padding:0px; margin:0px;}
h2 {padding:0; margin:0}


12、避免需要性能要求的属性

分析表明,一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况,尽量不要使用它们。


border-radius
box-shadow
transform
filter
:nth-child
position: fixed;


13、删除空格

空格——考虑制表符、回车符和空格——使代码更容易阅读,但从解析器的角度看,它没有什么用处。

14、删除注释

注释对编译器也没有任何作用。创建一个自定义解析器,以便在发布之前删除它们。这不仅节省了带宽,而且还确保攻击者和克隆者更难理解手头代码背后的思想。

15、设置缓存

有句老话说,最快的文件永远不会通过网络发送。让浏览器缓存请求有效地实现这一点。遗憾的是,缓存头的设置必须在服务器上进行。

16、打破缓存

设计人员通常不喜欢缓存,因为他们担心浏览器会缓存上次的样式表。解决这个问题的一个简单方法是包含带有文件名的标记。遗憾的是,由于一些代理拒绝缓存具有“动态”路径的文件,此步骤所附带的代码中概述的方案并不适用于所有地方。


<link rel="stylesheet" href="style.css?v=1.2.0">


本站注重原创,部分内容来源于网络整理,如有侵权,请联系QQ 570803231 进行删改,谢谢。

易懂SEO专注网站建设、SEO优化和网站安全,十多年来通过我们不懈努力获得了众多客户认可和尊重。

我们的目标:让所有用户都能用上一款好的网站系统!

我们的优势