1、压缩css
css文件可能包含很多不必要的字符，像是空格 注释 定义加载没有压缩过的css，比如两个样式 存在相同的css属性时，可以不用分别写样式可以把相同的样式通过 a,b{}的方式提取出来，像是一些 颜色 可以用 #000 来代替 #000000但是我们不会再 日常开发中 这样编写样式，我们在实际项目中往往是去使用webpack等打包工具的插件来实现css的压缩，优化。
2、Critical CSS
浏览器在展示页面前肯定需要获取和解析css资源，当css资源很多 很大时，网络情况不佳时 会造成渲染阻塞 Critical CSS是一种提取首屏css的技术 可以加快首屏的加载时间。将提取的样式内联到 HTML 文档的<head> 中，无需发出额外的请求来获取这些样式。 CSS 的其余部分可以异步加载，请记住，如果您内联了大量 CSS，则会延迟 HTML 文档其余部分的传输。 内联也有一些缺点，因为它会阻止浏览器缓存 CSS 以便在后续页面加载时重用，因此最好谨慎使用它。为了最大限度地减少首次渲染的往返次数，目标是将首屏内容保持在 14 KB（压缩）以下。新的 TCP 连接不能立即使用客户端和服务器之间的全部可用带宽，它们都经过慢启动以避免连接超载的数据超过其承载能力。 在这个过程中，服务器以少量数据开始传输，如果它以完美的状态到达客户端，则在下一次往返中将数据量加倍。 对于大多数服务器，在第一次往返中最多可以传输 10 个数据包或大约 14 KB。您可以使用此技术实现的性能影响取决于您网站的类型。 一般来说，网站的 CSS 越多，内联 CSS 的可能影响就越大
3、使用媒体查询优化 CSS
很多网站会请求大量的资源，但往往这些资源并没有针对 特定的屏幕进行优化，他们往往会发送大量的css，可能在某些设备上根本不会用到的，通常我们会使用媒体查询，来针对不同的设备发送不同的资源，来优化网页的加载速度。展示如何使用媒体查询发送所需大小的图像，这种技术通常称为响应式图像。什么是响应式背景图片，有时我们在不同的屏幕大小时，获取到的图片大小是不同的。类似的方案也可以用在一些普通的css样式上实现面对不同设备来获取不一样的资源。
4、优化css的交付
在浏览器可以呈现内容之前，它必须处理当前页面的所有样式和布局信息。结果，浏览器将阻止渲染，直到下载和处理外部样式表，这可能需要多次往返并延迟首次渲染的时间。如果外部 CSS 资源很小，可以直接将它们插入到 HTML 文档中，这称为内联。以这种方式内联小的 CSS 允许浏览器继续渲染页面。请记住，如果 CSS 文件很大，完全内联 CSS 可能会导致 PageSpeed Insights 通过Prioritize Visible Content警告页面的首屏部分太大。对于较大的 CSS 文件，您将需要识别并内联呈现首屏内容所需的 CSS，并将其余样式的加载推迟到首屏内容之后。不要内联大数据 URI 在 CSS 文件中内联数据 URI 时要小心。虽然在 CSS 中选择性地使用小数据 URI 可能是有意义的，但内联大数据 URI 会导致首屏 CSS 的大小变大，从而减慢页面呈现时间。不要内联 CSS 属性 <p style=...>应尽可能避免 在 HTML 元素（例如 ）上内联 CSS 属性，因为这通常会导致不必要的代码重复。
