critters - 🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

  •        27

Critters is a Webpack plugin that inlines your app's critical CSS and lazy-loads the rest. It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.

https://npm.im/critters-webpack-plugin
https://github.com/GoogleChromeLabs/critters

Dependencies:

css : ^2.2.1
nwmatcher : ^1.4.4
parse5 : ^4.0.0
pretty-bytes : ^4.0.2
webpack-sources : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

penthouse - Generate critical css for your urls

  •    HTML

Penthouse is the original critical path css generator, helping you out to speed up page rendering for your websites. Supply your site's full CSS and the page you want to create the critical CSS for, and Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page. Read more about critical path css here. The process is automatic and the generated CSS is production ready as is. Behind the scenes Penthouse is using puppeteer to generate the critical css via the chromium:headless.

critical-path-css-demo - Above-the-fold CSS generation + inlining using Critical & Gulp

  •    ApacheConf

Generate and inline critical-path CSS example using Critical. Live demo of before and after critical-path CSS generation and inlining.

critical-path-css-tools - Tools to prioritize above-the-fold (critical-path) CSS

  •    

The following is a list of tools to help generate, inline and report on critical-path CSS. Async loading should be used to fetch the rest of your site-wide styles after you've inlined your critical-path CSS.


mini-css-extract-plugin - Lightweight CSS extraction plugin

  •    Javascript

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

webpack.js.org - New repository for webpack documentation and more!

  •    Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

purifycss-webpack - Remove unused CSS with webpack

  •    Javascript

PurifyCSS for Webpack. This plugin uses PurifyCSS to remove unused selectors from your CSS. You should use it with the extract-text-webpack-plugin.

budgeting-sample-app-webpack2 - Budgeting - React + Redux + Webpack 2 (tree shaking) Sample App

  •    Javascript

Production-ready React + Webpack architecture implemented on consumer web apps of some of the most successful enterprises in the world. Perceived performance and development experience are key factors in this setup. You can use this code base for learning or to scaffold your mission-critical project. See live demo.

budgeting - Budgeting - React + Redux + Webpack (tree shaking) Sample App

  •    Javascript

Production-ready React + Webpack architecture implemented on consumer web apps of some of the most successful enterprises in the world. Perceived performance and development experience are key factors in this setup. You can use this code base for learning or to scaffold your mission-critical project. See live demo.

sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

extract-text-webpack-plugin - Extracts text from bundle into a file

  •    Javascript

Extract text from a bundle, or bundles, into a separate file. ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

import-cost - displays the import size of the package you are importing inside the code editor

  •    Javascript

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size. In this project we use lerna for managing the multiple packages.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.

react-css-components - Define React presentational components with CSS

  •    Javascript

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

webpack-starter - ✨ A lightweight foundation for your next webpack based frontend project.

  •    Javascript

A lightweight foundation for your next webpack based frontend project. When you run npm run build we use the mini-css-extract-plugin to move the css to a separate file and included in the head of your index.html, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

usus - Webpage pre-rendering service. ⚡️

  •    Javascript

Static HTML pages with inline CSS load faster and are better indexed than single page applications (SPA). Å«sus pre-renders single page applications into static HTML with the critical CSS inlined. Removing the blocking CSS and inlining the CSS required to render the page increases the perceived page loading speed. Presumably, improves SEO by reducing the page loading time.

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

chrome-extension-webpack-boilerplate - A basic foundation boilerplate for rich Chrome Extensions using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes

  •    Javascript

A basic foundation boilerplate for rich Chrome Extensions using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes. I'll assume that you already read the Webpack docs and the Chrome Extension docs.