Bug #20625
Optimize CSS
Status: | New | Start date: | 2009-06-17 | |
---|---|---|---|---|
Priority: | Should have | Due date: | ||
Assigned To: | Patrick Broens | % Done: | 0% |
|
Category: | TypoScript | Spent time: | - | |
Target version: | 7.4 (Backend) | |||
TYPO3 Version: | 4.5 | Is Regression: | No | |
PHP Version: | Sprint Focus: | |||
Complexity: |
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)
Related issues
History
#1 Updated by JMTiepo3 over 2 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.
#2 Updated by Mathias Schreiber 7 months 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
#3 Updated by Benjamin Kott 5 months ago
- Assigned To set to Patrick Broens
Hey Patrick, can you have a look at this issue please while refactoring the Content Elements?
#4 Updated by Benjamin Mack about 1 month ago
- Target version changed from 7.2 (Frontend) to 7.4 (Backend)