Comments (2)
If you are seeing a big size difference between "critical" CSS generated by usus and CSS generated by other existing tools, chances are that the other tools are simply broken. See this issue for example:
The "critical CSS" that is generated by uncss is nowhere near the CSS required to load the page.
On the other hand, ūsus uses Chrome's CSS coverage tool to determine which CSS was used when loading the page. If elements below the fold have been rendered, CSS for those elements will be included too. It is up to the JavaScript application to avoid rendering those elements if they are not critical (see for example https://github.com/stratiformltd/react-loadable-visibility).
Does this sound reasonable?
I am always open to be corrected.
from usus.
I have not tested this much t.b.h. but it sounds very reasonable.
I guess there's a balance in dealing with the critical path between size and 'functionality': while other tools might reduce critical CSS size (and therefore might render quicker, but somewhat incorrectly), CSS Coverage might use more CSS (and therefore add to the download weight but render great).
There is a threshold, I believe, where it makes less sense to inline the CSS if it's heavy: because we are essentially duplicating it. Heavy (duplicated) inline CSS + the added complete CSS might (in some cases) reduce rendering performance of the page, compared to not extracting/inlineing critical CSS at all.
In these things it's the developers' responsibility to find the proper balance.
from usus.
Related Issues (20)
- Pseudo classes missing from extracted CSS? HOT 2
- Skip `inlineStyles` when already inline? HOT 2
- preload non-critical CSS pattern? HOT 2
- Add an option to preload fonts using rel=preload HOT 9
- Add tests
- Exclude CSS loaded by alien frames (e.g. third party scripts)
- Add a chart illustrating how usus integrates into the web stack
- Detect if a page responded with a 404 statusCode HOT 2
- Custom page load event. HOT 1
- Engines definition excludes node 6
- Ability to pass down custom Chrome settings HOT 1
- Prevent inline styling HOT 3
- media queries not included
- Postprocessing url() in result critical css HOT 4
- CentOS - ECONNREFUSED ip:port
- [Ask] How to Open Raw HTML (.html) in React 'Public' Folder?
- await is a reserved word (12:12) HOT 1
- Create examples for Node JS SEO crawlers use
- just prints to console no way of saving file HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from usus.