Bug #20625

Optimize CSS

Added by Michiel Roos about 6 years ago. Updated about 1 month ago.

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

related to Core - Task #61842: Refactor CSS-Styled-Content + Content Elements New 2004-05-15 2014-08-08

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)

Also available in: Atom PDF