siteorigin / laravel-critical-css Goto Github PK

The goal of this Laravel package is to give a simple middleware that integrates with Critical, a package for calculating critical CSS (CSS for elements above the fold). This is to increase initial page load speed through this technique. It lets a page remove all render blocking CSS, which negatively affects page speed scores.

Our primary goal with this package, versus just adding Critical to our build process, is to give per page critical CSS. This is especially useful for CMS content where each piece of content will have its own critical CSS.

Middleware

We'll integrate with Laravel through a middleware class. This middleware should do its work after the application has created the response. See: Middleware and Responses.

This is a rough description of the steps involved in this middleware.

• Check if we have a cached version of the Critical CSS already. Base cache on the MD5 of the HTML and source CSS.
• If not, call Critical through PHP. Create a temp file for the HTML and pass it the source CSS.
• Add the critical CSS to a style tag in the response header.
• Return that response.

Configuration

The user should be able to configure most of the options for Critical. At least those which are useful for our middleware.

The default value for the input CSS should be public/app.css.

There might be some additional configuration needed for running Critical on the command line.

Testing

We need 100% test coverage for this package, but that shouldn't be too difficult to achieve. We just need to use TestBench to create a simple route and make sure valid CSS is generated.

Don't Handle CSS Deferred Loading

Our package wont handle the actual deferred loading of CSS. Users will need to handle this themselves using their own Blade templates.

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/stylesheet.css"></noscript>

We also wont strip out any CSS from the original source CSS. This should stay in tact so it's the same across all pages.