信搭建网站的用户都是看重网站速度，希望搭建的网站访问速度良好，这样才能保障网站业务的运行，所以今天小编就来介绍一下，优化网站访问速度的方法。

　　用户想要优化网站访问速度，或者说网站访问速度出现问题，可以先检测下网站速度。网站速度可以使用IIS7网站监控，先进行检测，查看搭建的网站是否被劫持、网站域名是否被墙、DNS污染检测、网站打开速度检测等信息

　　如果正常情况下，那么可以通过以下几种方法来优化网页用户的访问速度：

　　1、进行网站代码优化，删除冗余的代码，比如无用的空格、换行符、注释，不需要加载的JS等，将JS代码和CSS样式合并，减少请求次数，可以有效提高网页加载速度。

　　2、减少页面上不必要的元素，浏览网页实际上是将主机上的内容下载到本地硬盘，再使用浏览器查看，所以说网页本身所占空间越小，网页浏览速度就越快。尽量不要使用flash动画、大量的图片或多媒体资源，如视频、音频等。

　　3、尽量使用静态页面，静态页面可以直接运行在客户端，无需主机编辑便可以直接在浏览器上显示，在访问速度上比较快。而动态页面虽然交互性好，但这类程序需要由服务器执行处理，生成HTML页面，然后通过浏览器浏览，网页显示速度较慢。

　　4、简化页面结构，在设计网页时，不少站长为了追求页面的对齐，将整个页面内容塞进一个Table中，然后由单元格划分各个区块，这会让网页显示速度变慢。因为Table需要等所有的内容加载好再分级显示，如果某些内容难以加载出来，整个页面也就无法显示出来。正确的做法应该使用DIV+CSS的页面结构，它可以实现页面的逐步加载。

　　5、使用CDN加速网络，CDN即内容分发网络，它可以实时的根据网络流量和各节点的链接、负载状况以及用户的距离和响应时间等信息将用户的请求重新导向到离用户最近的服务节点。这能让用户就近取得所需内容，提高网页响应速度。

　　6、大图使用懒加载Lazy Load，图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求、减轻服务器压力，提高页面加载速度。

　　7、如果是大量图片的网站，那么可以对网站的图片进行压缩之后，再使用到网页上面，避免因为图片占用太多缓存而导致网页访问缓慢。

　　以上就是优化网站访问速度的方法，希望能帮助到有需要的用户。

家好，我是 Echa。

今天来分享 12 个优化 CSS 代码小技巧！

1. 避免高消耗属性

分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：

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

上述属性都是对性能要求比较高的。如果这些属性使用较少，那这就不是问题。但是如果一个页面出现几百次，那么整体的CSS可能会受到影响，所以要谨慎使用。

2. 使用 <link> 代替 @import

@import 规则主要用于导入资源或者CSS文件。它会阻止其他文件并行下载，并可能会导致网站速度变慢。

? 不要在CSS中这样操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多个HTML 中的<link>标签来代替@import，它将并行加载CSS文件，可以在一定程度上提高应用的加载的速度。

? 可以在HTML这样操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 简化选择器

我们知道，有很多方法可以对 HTML 元素进行样式设置，而最复杂的 CSS 选择器可能需要几毫秒的时间来解析。降低选择器的复杂性就可以减少浏览器的负载并保持代码简洁明了。

? 避免这么写：

.container > div.links-container ul li .link {

}

? 可以这么写：

.container .link {

}

4. 避免使用 !Important

在一些时候，可以使用!Important 来提高样式的优先级，以使样式生效。除非没有别的办法，否则不要使用!Important。

添加 !Important CSS声明将覆盖掉其他对应的样式声明，如果CSS的规则中 !Important 太多，浏览器就必须对代码进行额外的检查，这可能会降低页面的加载速度。所以，尽量避免使用!Important。在很多情况下我们是可以通过选择器来实现样式重写的，除非是想要对第三方库的CSS进行重写。

5. CSS实现特效和SVG代替图片

页面中加载图像很可能需要很长的时间，尤其是在图像未针对web进行优化的情况下。在实现背景图、渐变、几何图形时，尽量少使用图片，而是使用CSS代码实现。使用 CSS 代码实现就会比图片加载速度更快。

还可以使用SVG来代替PNG或者JPG图片：

• 可以给图片添加效果；
• 图像加载速度更快；
• 图像自动适应用户屏幕。

6. 压缩 CSS

我们可以通过压缩CSS文件来删除文件中所有的空白和不必要的代码来减少文件的大小。CSS文件变小了，加载的时间自然就变少了，页面的加载速度就会变。

7. 使用0而不是0px

当一个属性的值为0时，我们可以不添加任何单位。即不要这么写：0rem，0em，0px等。

当然，这么写是没有错的，但是这些单位是没有用的，当处理一个巨大的CSS文件时，没有单位会比有单位时文件小一点。

8. 使用十六进制而不是颜色名称

当我们将颜色设置为颜色名称时，浏览器就会花费更多时间来找出颜色的十六进制值。假如想使用红色，那设置为color:red之后，不同的浏览器显示效果可能是不一样的，作为开发人员，我们不能让浏览器来决定网页将如何显示。

因此，尽量使用使用十六进制（例如红色#ff0000）来定义颜色，就能确保在所有浏览器中以相同的色调准确得显示想要的颜色。

9. 避免过多 font-family

为每个选择器去定义字体并不是一个好的办法，它会导致代码很难维护，假如以后想要更改字体，就不得不在每个选择器中更改它。

因此不要像下面这样来定义字体：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定义要使用的字体，如果想要在其他选择器中覆盖该字体，就可以通过在该选择器中使用所需的字体来实现：

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family: "Times New Roman", Times, serif";
}

如果页面中很多部分的字体都不尽相同，就可以将字体定义在 class 中，然后在需要的HTML标签上使用该class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif";
}

10. 使用备用字体

有些情况下，应用中使用的字体可能在用户设备上不可用。在这种情况下，可以指定使用其他备用字体：

p{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

这样，浏览器就会按顺序进行解析，直到解析到第一个可用的字体，如果都不可用，就会使用浏览器的默认字体。

11. 使用 CSS 重置

每个浏览器都有自己的 HTML 元素默认样式。假如有一个没有任何样式的 H1 元素，那么在默认情况下，在Firefox中，会给它一个上下为21.433px，左右为 0 的margin值。而在Safari中，会给它一个上下为21px，左右为 0 的margin值。

因此，重置CSS样式，一个很好的做法就是从头开始定义样式。很多开发人员会使用通用选择器（*）来执行基本重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在使用通用选择器 (*) 进行重置有时会导致性能问题，因为它会针对每个标签去设置其样式。

可以使用一些常用的CSS重置代码库，比如normalize。也可以参考一些CSS重置的最佳实践。

12. 减少重复代码

当两个元素或选择器具有相同的 CSS 属性时，可以使用逗号来组合这些选择器，而不是重复声明样式，这样它们将共享 CSS 样式。

? 避免这样写：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}

.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

? 建议这样写：