在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):addyosmani/critical-path-css-demo开源软件地址(OpenSource Url):https://github.com/addyosmani/critical-path-css-demo开源编程语言(OpenSource Language):ApacheConf 71.7%开源软件介绍(OpenSource Introduction):critical-path-css-demoGenerate and inline critical-path CSS example using Critical. Live demo of before and after critical-path CSS generation and inlining. PageSpeed Insights results of before and after Before: After: WebPageTest results Before: After: Great. So, what are your recommendations?Use Critical for generating and inlining your critical-path CSS and loadCSS to async load in your site-wide styles. Why is critical-path CSS important?
Why should critical-path CSS be inlined?
Installation$ cd critical-path-css-demo
$ npm install && bower install Generating and inlining critical-path CSSNote: There are two build commands available. This allows you to compare the difference between the output of a normal build and the output with critical-path CSS. The default (minify, concat) build for the project can be run with: $ gulp The complete (critical-path) build can be run with: $ gulp critical This performs the normal build, then generates and inlines critical-path CSS for the page. It automatically async loads in the site-wide styles using loadCSS as part of the workflow offered by the module. TutorialFollow the next few lines to install and scaffold a project using Yeoman and Gulp: $ mkdir myapp && cd myapp
$ npm install -g yo generator-gulp-webapp
$ yo gulp-webapp
# Select Bootstrap and say no to Modernizr & Sass You should now have a valid set of source files, including a The first thing we're going to do is install the Critical module which can generate and inline your critical-path CSS for you. This can be installed as follows: $ cd myapp
$ npm install critical --save-dev Great. Next, add a reference to Critical at the top of your var critical = require('critical'); We can now use it in our build process. Let's write a new task called Our workflow for critical-path CSS is to first run a normal gulp.task('critical', ['build'], function () {
}); Next, we'll add in our configuration for the gulp.task('critical', ['build'], function (cb) {
critical.generate({
inline: true,
base: 'dist/',
src: 'index.html',
dest: 'dist/index-critical.html',
minify: true,
width: 320,
height: 480
});
}); That's it. You can now run DisclaimerNote that this sample project is just that - a sample. It does not demonstrate how well these tools and techniques work on a complex site nor a site making heavy use of dynamic styles. Your mileage may vary and I encourage testing the tools available before making a decision about whether Critical makes sense for you. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论