Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Speed Penalty for using className

Recommended Posts

Has anyone noticed enough of a slow down on their site using className (instead of tweening the css property directly) to affect SEO ratings by search engines like Google?

Link to comment
Share on other sites

Hey jstafford :),


I know from your other thread that you're trying to tween between classes as your co-workers don't wan't to read Javascript and are more comfortable with a stylesheet. I can't imagine tweening between classes vs tweening in the Javascript would cause enough of a performance issue to give Google any cause to penalize your site. 


SEO is, of course, extremely complex and the Greensock forum is probably not the best place to get too deep into it, but I will say this.


When it comes to web animations, Google seems far more concerned about user experience. From the Google developers summit:


Animating properties is not free, and some properties are cheaper to animate than others. For example, animating the width and height of an element changes its geometry and may cause other elements on the page to move or change size. This process is called layout (or reflow in Gecko-based browsers like Firefox), and can be expensive if your page has a lot of elements. Whenever layout is triggered, the page or part of it will normally need to be painted, which is typically even more expensive than the layout operation itself.


Where you can, you should avoid animating properties that trigger layout or paint. For most modern browsers this means limiting animations to opacity or transform, both of which can be highly optimized by the browser; it doesn’t matter if the animation is handled by JavaScript or CSS.


Whether they'll actually penalize sites for a less than stellar user experience would take some testing. You may find some information about such tests - I don't know?


If it were me though, I'd be more concerned about creating unique content and helpful animations that guide the user through the experience of visiting your site rather than worry about a slight speed hit by tweening classes.


BTW - here is a little guide to which CSS properties trigger a layout and paint. http://csstriggers.com/



Of course this is all my opinion. YMMV :)

  • Like 2
Link to comment
Share on other sites

Do you have an example i am little confused on your question. Google does not rate the speed of your animations. It rates based on domain name, specific  keywords used in the content, if there isn't duplicate content on another website, etc.


I think what your referring to is page load and performance... that is different than SEO.


Of course when selecting with JS, targeting an ID will always be faster than targeting a classname.


If you are concerned about speed load than use Googles PageSpeed Insights:




Also some JS speed tests:


Id vs classname vs tag vs pseudo vs attribute selector:




Also some other JSperf.com speedtests:





  • Like 2
Link to comment
Share on other sites

I don't have any specific examples. Just curious if you guys could discuss some. Thanks for both of your responses.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.