Closed
Bug 834865
Opened 12 years ago
Closed 10 years ago
Web inlining tool
Categories
(DevTools :: Inspector, defect)
Tracking
(Not tracked)
RESOLVED
DUPLICATE
of bug 975522
People
(Reporter: taras.mozilla, Unassigned)
References
Details
Attachments
(1 file)
|
2.40 KB,
patch
|
Details | Diff | Splinter Review |
CSS advice on http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/ suggests that devs split css into an "important" inline bit and include the rest near </body>
This is true based on my experiments and
12:33 <@bz> taras: we start layout after we've seen <body> and all stylesheets from <head> are loaded
12:34 <@bz> taras: furthermore, if there is a stylesheet loading, parsing a <script> tag will not run it until that sheet loads
Having developers do this by hand seems tedious, a browser has sufficient info to automate it.
|
Reporter | |
Comment 1•11 years ago
|
||
Had some spare time. Here is a prototype. Thanks for putting up with my newbness on #devtools.
I tested this on taras.glek.net and news.com. On taras.glek.net this produces a subset of CSS usage that's 3x smaller than what I have in there. On news.com the reduction is 10x.
I haven't tested how well the reduced css works yet.
I think having 'strip crap from my website' tool that eliminates unused JS, CSS + has option to inline it to speed up pageload would be very cool.
To test this I paste:
devtools.reload();Cu.import("resource://gre/modules/devtools/Loader.jsm")
let {CssLogic} = devtools.require("devtools/styleinspector/css-logic")
cl = new CssLogic();
cl.reset();
ret=cl.extractUsedCSS(gBrowser.contentWindow.document);
cl.inlineCSS(ret)
into browser console.
|
||
Comment 2•11 years ago
|
||
Let me try to understand what's happening here and what we could build from that:
This code finds ("extracts") the current used rules. If we run your code after the page has loaded, the code that is NOT extracted can be moved after </body> because it's not required to load the page (it's the "interactive" part of the CSS code, and loading this code would block other important operations). The extracted code should be moved in <head>.
So what we could build would be a GCLI command ("CSS_Snapshot" ?) that would:
- reload the page
- split CSS code in 2 chunks (important vs. interactive code)
- open a new tab, with an explanation about "important vs interactive" and 2 <pre> that would include the 2 chunks
Am I getting this right?
|
|
Reporter | |
Comment 3•11 years ago
|
||
I wasn't sure where to hook up such a tool, was going to ask for ideas. A GCLI command is a great idea!
I think this is a tool to take out menial labor out of reducing the css footprint/overhead. As such the only important part is identifying rules that are used. We can then display those in a single <pre> and the developer can decide what to do with the rest. We should also display a basic statistic like "10% CSS rule utilization", etc. Ideally we'd estimate network overhead savings by seeing how long the page spent waiting for css to download. We'd also want to link to an mdn article explaining that CSS blocks rendering of the page.
|
|
Reporter | |
Comment 4•11 years ago
|
||
Here is another video showing the benefits of such a tool, 20 to 1 second reduction in visible-content-time https://www.youtube.com/watch?v=VKTWdaupft0
Inclining is the next big thing in tools
|
|
Reporter | |
Comment 5•11 years ago
|
||
I suggested inlining css as a first step towards a 'make my page fast' tool...but I didn't make that clear in the bug.
The ideal highlevel tool would: look at the network timeline, figure out resources that are needed to render the page and suggest a proposed improvement (in time to load page) + html with inlined css, modified <script> tags, filled in DOM, etc.
Summary: CSS inlining tool → Web inlining tool
|
||
Comment 7•11 years ago
|
||
That's actually a pretty good idea. Sounds to me like we would have to simply "observe" the page load and extract all CSS rules and JS scripts that didn't get used during the initial page load and put them at the end of the page.
It's true that initial load time is critical.
This should be developed as a plugin first.
Flags: needinfo?(akratel)
|
|
||
Updated•11 years ago
|
Blocks: perf-kanban
|
||
Comment 8•11 years ago
|
||
Bug 975522 looks like we can handle this by splitting rules into 3 groups - initially-used / used-later-unused.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → DUPLICATE
|
|
Reporter | |
Comment 9•10 years ago
|
||
Joe, I think it's useful to have a tool that produces a inlined css to cut/paste as a result. Unless the other bug will have that, this isn't a dupe
|
|
||
Comment 10•10 years ago
|
||
(In reply to Taras Glek (:taras) from comment #9)
> Joe, I think it's useful to have a tool that produces a inlined css to
> cut/paste as a result. Unless the other bug will have that, this isn't a dupe
Agreed. I think it would be good to have a GCLI command that shows you all 3 parts.
>> export css --used --clipboard
>> export css --initial --tab
(I've not spent much time thinking about how the command should work, but something like that)
Whether it gets done in bug 975522 is a matter of the progress I make with that bug (I have a deadline!)
For now, I'll reopen this, so it's not lost. If you get it done in 975522, dupe away!
Status: RESOLVED → REOPENED
Resolution: DUPLICATE → ---
|
|
||
Updated•10 years ago
|
Status: REOPENED → RESOLVED
Closed: 11 years ago → 10 years ago
Resolution: --- → DUPLICATE
|
||
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•