I am trying to implement this module for my site (10.3.10) and am hoping to use the recommended critical package from addyosmani. However, I can't figure out how to actually configure the package to generate the critical CSS files from my Drupal site. I am building the tooling in gulp. Here's what I have so far:

// FYI: vars.dist_directory is an imported variable w/ path information. 

gulp.task('critical', () => {
   import("critical").then((critical)=>{
       critical.generate({
        base: vars.dist_directory,
        src: 'index.html',
        target: vars.dist_directory + "css",
        width: 1300,
        height: 900,
      });
   });

The blocker right now is what I should put for the src property. The error I'm getting is "Error: File not found: static/assets/index.html", which makes sense as it doesn't exist. What do I use to make this work for a Drupal site?

Comments

superfluousapostrophe created an issue.

flyke’s picture

flyke commented

For src, you use the url of the page you wish to create critical css for.
For me, its my front page. Since my local version runs on ddev I enter my ddev site url there.
I don't use gulp but npm/webpack. I have a scripts/generate-critical.js that looks like this:

// Script to generate critical css for your site.
import { generate } from 'critical';

generate({
    src: 'https://starterkit.ddev.site',
    target: {
        css: 'css/critical/default-critical.css',
    },
    width: 1300,
    height: 900,
    inline: false,
    extract: false,
});

And in my package.json I have a script:

  "scripts": {
    "criticalcss": "node scripts/generate-critical.js"
  },

Which I run with:
ddev npm run criticalcss