加快首屏渲染速度（一）——抽取critical CSS

最新推荐文章于 2024-05-15 20:30:00 发布

hao像飘在外太空

最新推荐文章于 2024-05-15 20:30:00 发布

阅读量2.1k

点赞数

分类专栏：前端工具tools

本文链接：https://blog.csdn.net/sinat_24070543/article/details/53331260

版权

前端工具tools 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

核心思路：
一、抽取出首页需要的css

二、用行内css形式加载这部分css(critical css)
三、等到页面加载完之后，再加载整个css，会有一部分css与critical css重叠

示例

内嵌关键的CSS，具体方法如下：

注意 <link>放在了</html>后面

 
 
  
  
  
  
 
 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

在网页加载之后，原始small.css才会加载。

————————————

抽取critical css有自动化工具grunt-criticalcss，完全不需要自己动手

亲测好用，

npm install grunt-criticalcss --save-dev

我再加点注释吧

grunt.initConfig({
    criticalcss: {
        custom: {
            options: {
                url: "http://localhost:4000",   // 你的网址
                width: 1200, 
                height: 900,
                outputfile: "dist/critical.css", 
                filename: "/path/to/local/all.css", // 使用的css的本地路径
                buffer: 800*1024,
                ignoreConsole: false
            }
        }
    },
});

grunt.loadNpmTasks('grunt-criticalcss');

hao像飘在外太空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
加快首屏渲染速度（一）——抽取critical CSS

核心思路：一、抽取出首页需要的css二、用行内css形式加载这部分css(critical css)三、等到页面加载完之后，再加载整个css，会有一部分css与critical css重叠示例内嵌关键的CSS，具体方法如下：注意放在了后面 .blue{color:blue;} class="blue"
复制链接

扫一扫