以下是通过Google Chrome优化网页CSS加载速度的方法：
一、启用压缩技术
1. 服务器端启用GZIP压缩：如果你有对服务器的控制权，确保服务器配置为对CSS文件启用GZIP压缩。在Apache服务器中，可以通过修改配置文件（如`.htaccess`文件）来实现。在文件中添加以下代码：

AddOutputFilterByType DEFLATE text/css

这样，当浏览器请求CSS文件时，服务器会将文件进行压缩后再传输，减小文件大小，从而提高加载速度。对于Nginx服务器，可以在配置文件中找到对应的位置，添加`gzip on;`以及相关的配置项来启用GZIP压缩。
2. 使用Chrome开发者工具检查压缩情况：在Google Chrome中，打开开发者工具（按F12键或右键点击页面选择“检查”）。在“Network”面板中，找到要查看的CSS文件，查看其响应头中的“Content-Encoding”字段，如果显示为“gzip”，则表示文件已被压缩。如果没有压缩，需要检查服务器配置是否正确。
二、合并CSS文件
1. 手动合并：将多个CSS文件合并为一个文件，可以减少HTTP请求的数量。例如，如果你的网页使用了多个外部CSS文件，如`style1.css`、`style2.css`等，可以将这些文件的内容合并到一个新的文件（如`combined.css`）中，然后在HTML页面中只引用这个合并后的文件。这样可以节省浏览器向服务器发送请求获取每个CSS文件的时间。
2. 使用构建工具合并：对于较为复杂的项目，可以使用构建工具（如Webpack、Gulp等）来自动合并CSS文件。这些工具可以根据配置，将项目中的多个CSS文件合并、压缩，并生成最终的CSS文件。以Webpack为例，你需要安装相关的依赖包，然后在项目的配置文件中设置相应的规则，让Webpack在构建项目时自动完成CSS文件的合并和压缩操作。
三、优化CSS代码
1. 精简代码：删除不必要的空格、注释和重复的样式规则。例如，去掉CSS文件中多余的空格和换行符，简化选择器，避免使用过于复杂的样式规则。同时，检查是否有重复定义的样式，将其合并或删除。
2. 避免使用昂贵的CSS属性：某些CSS属性可能会导致性能问题，如`box-shadow`、`border-radius`等，尤其是在移动设备上。如果可能，尽量减少对这些属性的使用，或者寻找性能更好的替代方案。例如，对于一些简单的圆角效果，可以考虑使用背景图片来代替`border-radius`属性。
3. 按需加载CSS：对于一些不是必须的CSS样式，可以采用按需加载的方式。例如，有些页面元素只在用户进行特定操作（如点击某个按钮）时才会显示，那么可以为这些元素相关的CSS样式设置延迟加载。可以使用JavaScript来实现这一点，当需要显示相关元素时，再动态加载对应的CSS文件。
四、利用缓存机制
1. 设置缓存头信息：在服务器端，为CSS文件设置合理的缓存头信息，让浏览器能够缓存这些文件。例如，可以设置`Cache-Control`头信息为`max-age=31536000`（表示缓存一年），`Expires`头信息为一个较远的未来时间。这样，当用户再次访问网页时，浏览器可以直接从本地缓存中获取CSS文件，而不需要重新向服务器请求，从而提高加载速度。
2. 使用版本号或哈希值管理缓存：当CSS文件发生变化时，为了避免浏览器使用旧的缓存文件，可以在文件名或文件路径中添加版本号或哈希值。例如，将`style.css`改为`style.v1.css`或`style.abc123.css`（其中`v1`或`abc123`是根据文件内容生成的唯一标识）。这样，每次文件更新时，文件名都会发生变化，浏览器会认为这是一个新的文件，从而重新下载并缓存。
五、优化图片与CSS的配合
1. 优化图片大小和格式：网页中的图片往往会影响页面的加载速度，而CSS中的样式也会对图片的显示产生影响。优化图片的大小和格式可以减少页面的加载时间。例如，将图片保存为合适的格式（如JPEG、PNG等），并根据图片的内容和需求调整图片的压缩比例。同时，使用CSS的`width`和`height`属性来指定图片的尺寸，避免浏览器在加载图片时进行多次重绘。
2. 使用CSS精灵图：将多个小图标合并为一张大的图片（即CSS精灵图），然后通过CSS的`background-position`属性来显示不同的图标。这样可以减少HTTP请求的数量，提高图片的加载速度。例如，在一个网页中有多个小图标，可以将它们合并为一张精灵图，然后在CSS中定义每个图标的位置，通过`background-image`和`background-position`属性来显示相应的图标。