Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use non-blocking CSS

See original GitHub issue

Currently donejs does something which goes against PageSpeed recommendations and inserts all of the css into the head as <link>s. This will block the page from rendering as these stylesheets are loaded.

We should change this and do a couple of things:

Inline “essential” styles directly in <style> tags. This might just be the main css bundle. Ideally this could even be trimmed down to just selectors that are being used by the page.
Make the rest of the links be non-blocking by using something like loadCSS.

Issue Analytics

State:
Created 7 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

2reactions

DesignByOnyxcommented, Aug 30, 2016

I have a lot of experience doing this and getting a good rapport with PageSpeed is very difficult. Inlining critical CSS and deferring other CSS is really the only way. Pretty much anything that requires an http request before the DOMContentLoaded event fires (CSS <link>s and synchronous <script> tags) will cost you favor with PageSpeed. It basically wants your initial HTML payload to deliver everything required to render something for the user without waiting on extra requests.

1reaction

frank-dspeedcommented, Oct 3, 2016

i think its realy a good idea to add loadCSS Functionality but we should add a wrapper around it that accepts config like inline defer for each css that it loads also the wrapper should be pushstate agnostic so that it still allows reaching inlined and not inlined css files