如何优化链接CSS以提高页面表现

一、减小CSS文件的大小

1、压缩CSS文件。

/*
 * 原始CSS文件
 */
body {
  margin: 0;
  padding: 0;
}

使用CSS压缩工具来压缩CSS文件，如下所示：

/*
 * 压缩后的CSS文件
 */
body{margin:0;padding:0}

通过压缩CSS文件，可以去除CSS中的不必要的空格、注释和换行符等，从而减小文件的大小。

2、合并CSS文件。

将多个CSS文件合并成一个文件，并且利用CSS预处理器来管理这些文件，可以减小页面的HTTP请求次数。如下所示：

/*
 * style.less
 */
@import "reset.css";
@import "header.css";
@import "menu.css";

二、使用CDN来加速CSS文件的加载

1、选用靠谱的CDN服务商。

当前市面上有很多主流的CDN服务，如阿里云、腾讯云、百度云等，可以选择一个适合自己项目的CDN服务商。

2、使用CDN加速CSS文件的加载。

在href属性中引入CDN地址，并且可以在CDN服务提供商的设置中看到CDN地址，如下所示：

<link rel="stylesheet" href="//cdn.example.com/css/style.css">

三、移动CSS文件至head标签中

将CSS文件的引用放在head标签中，可以确保CSS文件优先于页面中其他元素的加载。

在head标签中添加CSS文件的引用，如下所示：

  
  
  
  <link rel="stylesheet" href="style.css">