Inefficient CSS Selectors

20 views
Skip to first unread message

ruinen

unread,
Sep 21, 2012, 4:42:23 PM9/21/12
to actives...@googlegroups.com
I ran Google's PageSpeed against my site using ActiveScaffold. It reported 45 very inefficient rules, 47 inefficient rules, and 6 potentially inefficient uses of :hover. For example:

  • .active-scaffold-header div.actions div.action_group li a    Tag key with 4 descendant selectors and Class overly qualified with tag and Class overly qualified with tag
I am a novice when it comes to CSS performance, but I wonder if there are worthwhile improvements to be made? If so, I'd be happy to investigate fixing this up. Anybody got any thoughts?


Sergio Cambra

unread,
Sep 22, 2012, 2:17:04 AM9/22/12
to actives...@googlegroups.com
Most of the tag.class could be only .class, maybe some selector need the
tag.class

In this case, probably div could be removed, and li probably too:
.active-scaffold-header .actions .action_group a

And maybe .actions could be removed too I'm not sure.

However, I'm not sure if performance is really bad due to many selectors, I
don't know how to measure it. If you want, try to fix it and test you get the
same results, and send pull requests, but please, don't make all changes in
one commit, I prefer small commits to test it.

If you need some help, ask me

--
You received this message because you are subscribed to the Google Groups
"ActiveScaffold : Ruby on Rails plugin" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/activescaffold/-/ifwmfGZTpgYJ.
To post to this group, send email to actives...@googlegroups.com.
To unsubscribe from this group, send email to
activescaffol...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/activescaffold?hl=en.




ruinen

unread,
Sep 22, 2012, 3:33:05 AM9/22/12
to actives...@googlegroups.com
Looks like Speed Tracer can show you the time spent on CSS style recalculation. So I will have an experiment and see if there is much to gain - https://developers.google.com/web-toolkit/speedtracer/
Reply all
Reply to author
Forward
0 new messages