Bug #20625
closedOptimize CSS
0%
Description
I was pointed to this great extension for firefox called 'page speed'.
It checks other things than YSLOW does and does more 'in depth' checking.
http://code.google.com/speed/page-speed/
It comes with some recommendations about the CSS fo css styled content:
Very inefficient rules (good to fix on any page):
- div.csc-textpic-border div.csc-textpic-imagewrap .csc-textpic-image img Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap ul Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap ul li Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dt Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image dd img Tag key with 4 descendant selectors and Class overly qualified with tag and Class overly qualified with tag and Class overly qualified with tag
- div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image img Tag key with 3 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
- div.csc-textpic img Tag key with descendant selector and Class overly qualified with tag
- dl.csc-textpic-image dt Tag key with descendant selector and Class overly qualified with tag
- dl.csc-textpic-image dd Tag key with descendant selector and Class overly qualified with tag
(issue imported from #M11349)
Updated by JMTiepo3 over 11 years ago
- Target version deleted (
0)
I would like to "bump" this bug since it seems to be very old, but it didn't get fix yet.
Actually I can't really ask for a "fix" since it's not a bug, but I would love to get 100% result on my page speed tests.
Anyways, 4 years later (2013), the issue still exists. Below the rules it nags about:
Very inefficient rules (good to fix on any page):
DIV.csc-textpic .csc-textpic-imagewrap table Tag key with 2 descendant selectors and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap table tr td Tag key with 4 descendant selectors and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap FIGURE Tag key with 2 descendant selectors and Class overly qualified with tag
DIV.csc-textpic-border DIV.csc-textpic-imagewrap IMG Tag key with 2 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
DIV.csc-textpic .csc-textpic-imagewrap IMG Tag key with 2 descendant selectors and Class overly qualified with tag
Inefficient rules (good to fix on interactive pages):
UL.csc-uploads LI Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads LI Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads IMG Tag key with descendant selector and Class overly qualified with tag
UL.csc-uploads SPAN Tag key with descendant selector and Class overly qualified with tag
I've come up with a solution though. I don't know if this is possible to make with the current setup, but here it goes:
Instead of using those selectors, just use the class tag like this:
<ul class="csc-uploads">
<li class="csc-uploads-li"></li>
<img class="csc-uploads-img" />
<span class="csc-uploads-span"></span>
</ul>
And use the following CSS code:
ul.csc-uploads
li.csc-uploads-li
img.csc-uploads-img
span.csc-uploads-span
The above example should fix all errors in the "inefficient rules" section.
The same can be applied, of course, to the "very inefficient rules" section.
I hope you will pay some attention to this, as I am told that inefficient rules can slow the website down with (sometimes) as much as 20ms a tag!!
Also, I think uppercase HTML is a bit oldskool.. Perhaps it's better to use small case HTML/CSS (DIV.csc-textpic => div.csc-textpic) but that's just a suggestion.
Updated by Mathias Schreiber almost 10 years ago
- Description updated (diff)
- Category set to TypoScript
- Target version set to 7.2 (Frontend)
- TYPO3 Version set to 4.5
- Is Regression set to No
Updated by Benjamin Kott over 9 years ago
- Assignee set to Patrick Broens
Hey Patrick, can you have a look at this issue please while refactoring the Content Elements?
Updated by Benni Mack over 9 years ago
- Target version changed from 7.2 (Frontend) to 7.4 (Backend)
Updated by Susanne Moog over 9 years ago
- Target version changed from 7.4 (Backend) to 7.5
Updated by Benni Mack about 9 years ago
- Status changed from New to Closed
We now have fluid_styled_conten which comes with a lot of cleaner and less CSS code. Thus, we can close this one. If not, please let me know.