优化网站:优化CSS并加速网站的21种方法

优化CSS需要一个多维的办法优化网站。固然手工编写的代码能够利用各类手艺停止简化,但是手工查抄框架代码是低效的。在那些情况下,利用主动化的简化会产生更好的成果。

下面的步调将带我们进入 CSS 优化的世界优化网站。并非每一个都能够间接应用到你的项目中,但是必然要记住它们。

01. 利用简写

利用缩写语句,如下面所示的 margin 声明,能够从底子上减小 CSS 文件的大小优化网站。在 google 上搜刮 CSS Shorthand 能够找到许多其他的速记形式。

p { margin-top: 1px;

margin-right: 2px;

margin-bottom: 3px;

margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

02. 查找并删除未利用的 CSS

删除没必要要的部门 CSS,j显然会加快网页的加载速度优化网站。谷歌的Chrome阅读器有那种开箱即用的功用。只需转到查看>开发人员>开发人员东西,并在比来的版本中翻开Sources选项卡,然后翻开号令菜单。然后,选择Show Coverage,在Coverage analysis窗口中高亮显示当前页面上未利用的代码,让您大开眼界。

03. 以更便利的体例做到那一点

在逐行阐发中导航其实不必然便利,利用谷歌阅读器的 Audits 就能够快速帮我们阐发,利用体例,翻开开发者东西,点击 Audits 栏位,点击 Run audits 后就起头阐发成果优化网站。

04. 留意那些问题

加载外部款式表需要破费时间,那是因为延迟形成的——因而,能够把最关键的代码位放在 head 中优化网站。但是,请确保不要做得偏激,记住,施行维护使命的人员也必需读代替码。

<html>

<head>

<style>

.blue{color:blue;}

</style>

</head>

<body>

<p class="blue">

Hello, world!

</p>

06.允许反并行解析

@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">

07. 用 CSS 替代图片

几年前,一套半通明的 png 在网站上创建半通明效果是习以为常的优化网站。如今,CSS过 滤器供给了一种节省资本的替代办法。例如,以下那个代码片段能够确保所讨论的图片显示为其本身的灰度版本。

img {

-webkit-filter: grayscale(100%);

/* old safari */

filter: grayscale(100%);

}

08.利用颜色快速体例

常识告诉我们,六位数的颜色描述符是表达颜色最有效的体例优化网站。事实并不是如斯——在某些情况下,速记描述或颜色名称能够更短。

target { background-color: #ffffff; }

target { background: #fff; }

09. 删除没必要要的零和单元

CSS 撑持多种单元和数字格局优化网站。它们是一个值得感激的优化目的——能够删除尾随和跟从的零,如下面的代码片段所示。此外,请记住,零始末是零,添加维度不会为包罗的信息附带价值。

padding: 0.2em;

margin: 20.0em;

avalue: 0px;

padding: .2em;

margin: 20em;

avalue: 0;

10. 消弭过多分号

那种优化需要隆重,因为它会影响代码的更改优化网站。CSS的标准允许省略属性组中的最初一个分号。因为那种优化办法所节省的成本很小,所以我们次要针对那些正在开发主动优化的法式员申明那一点。

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

11.利用纹理图集

因为协议开销的原因,加载多个小图片的效率很低优化网站。CSS 精灵将一系列小图片组合成一个大的PNG 文件,然后通过 CSS 规则将其合成。TexturePacker ()等法式大大简化了创建过程。

.download {

width:80px;

height:31px;

background-position: -160px -160px

}

.download:hover {

width:80px;

height:32px;

background-position: -80px -160px

}

12. 省略 px

进步性能的一个简双方法是利用CSS尺度的一个特征优化网站。为 0 的数值默认单元是 px—— 删除 px 能够为每个数字节省两个字节。

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

h2 {padding:0; margin:0}

13. 制止需要性能要求的属性

阐发表白,一些标签比其他标签更高贵优化网站。以下那些解析会影响性能—若是在没有需要的情况,尽量不要利用它们。

border-radius

box-shadow

transform

filter

:nth-child

position: fixed;

14. 删除空格

空格——考虑造表符、回车符和空格——使代码更容易阅读,但从解析器的角度看,它没有什么用途优化网站。在发布前删除它们,更好的办法是将此使命委托给 shell 脚本或类似的东西。

15. 删除正文

正文对编译器也没有任何感化优化网站。创建一个自定义解析器,以便在发布之前删除它们。那不只节省了带宽,并且还确保攻击者和克隆者更难理解手头代码背后的思惟。

16. 利用主动压缩

Yahoo 的用户体验团队创建了一个处置许多压缩使命的应用法式优化网站。它以 JAR 文件的形式发布,可在此处获得(运行。

java -jar yuicompressor-x.y.z.jar

Usage: java -jar yuicompressor-x.y.z.jar

[options] [input file]

Global Options

-h, --help Displays this

information

--type <js|css> Specifies the

type of the input file

17. 在 NPM 运行它

若是你希望将产物集成到 Node.JS 中,请拜候 npmjs.com/package/yuicompressor优化网站。维护不良的存储库包罗一组包拆器文件和JavaScript API。

var compressor = require('yuicompressor');

compressor.compress('/path/to/

file or String of JS', {

//Compressor Options:

charset: 'utf8',

type: 'js',

18. 连结 Sass 的查抄

固然 CSS 选择器的性能不像几年前那么重要(请参阅参考材料),但是像 Sass 如许的框架有时会产生十分复杂的代,不时查看输出文件,并考虑优化成果的办法优化网站。

什么是Sass优化网站?()

19. 设置缓存

有句老话说,最快的文件永久不会通过收集发送优化网站。让阅读器缓存恳求有效地实现那一点。遗憾的是,缓存头的设置必需在办事器长进行。充实上面讲的的两个 Chrome 东西,它们供给了一种快速阐发更改成果的办法。

20. 突破缓存

设想人员凡是不喜好缓存,因为他们担忧阅读器会缓存前次的款式表优化网站。处理那个问题的一个简双方法是包罗带有文件名的标识表记标帜。遗憾的是,因为一些代办署理回绝缓存具有“动态”途径的文件,此步调所附带的代码中概述的计划其实不适用于所有处所。

<Link rel="stylesheet" href="style.css?v=1.2.3">

21. 不要忘记根底常识

优化CSS只是游戏的一部门优化网站。若是你的办事器不利用 办事器的一些调整。若是您发现本身在一个差别的系统上,只需参考办事器文档即可。

pico /etc/

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css

打造最大的挖矿交流社区
SEO交流,纯交流无广告,SEO网站优化机器,小白变大神,期待你的加入!

标签: 优化网站

作者头像
admin创始人

打造最大的seo交流社区

上一篇:常用的网站优化方法分享:优化网站
下一篇:SEO网站优化该怎么做?:seo网站优化

发表评论