RD Critical CSS

Developer

Reusser Design

3rd Party (Free)

2 downloads (last 90 days)

MIT License Download v4.0.6

EE Version Support

  • ExpressionEngine 3
  • ExpressionEngine 4
  • ExpressionEngine 5

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Plugin

Tags

ExpressionEngine 3 and 4 plugin for inlining critical css files and providing polyfill support for rel=preload.

Invoke the {exp:rd_critical_css} tag with a critical parameter that points to your critical css file, and a styles parameter that points to your preloaded stylesheets (separate multiple with a pipe ‘|’ character) i.e.

{exp:rd_critical_css critical='/path/to/critical.css' styles='/path/to/stylesheet1.css|/path/to/stylesheet2.css'}

Optionally add an external_fonts parameter to additionally preload Google Fonts, TypeKit, etc i.e.

{exp:rd_critical_css external_fonts='https://fonts.googleapis.com/css?family=Open+Sans' critical='/path/to/critical.css' styles='/path/to/stylesheet1.css|/path/to/stylesheet2.css'}

If the stylesheets have not already been loaded, RD Critical CSS will inject the contents of your critical css file (removing any sourceMap info) and external font files into the <head> so that above-the-fold content will be styled without blocking the rendering of the page.

Immediately following this <style> element, it will inject a <link> element for each file specified in the ‘external_fonts’ and ‘styles’ parameters using rel=preload. Following these, it embeds a <script> tag with compressed loadCSS and cssrelpreload scripts (currently v1.3.1) to load stylesheets asynchronously (see https://github.com/filamentgroup/loadCSS).

If the stylesheets have already been loaded and cached, it will instead inject normal <link> elements using the normal rel=stylesheet parameter/value pair.

Download RD Critical CSS

EE Support Downloads Add-On Version Release Date
3.0.0+ Download 4.0.6

RD Critical CSS Links

This entry was created May 14, 2018, 10:52 am.
This entry was last updated November 14, 2019, 3:53 pm.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

1 Review:

stefanos 05.14.18

stefanos
Rating - {addon_rating_average}

Nice add-on, it’s exactly what I needed !

Working very well !!