www.webdeveloper.com
Results 1 to 6 of 6

Thread: Does Text-Shadow, Box-Shadow, Border-Radius Affect Page Loading Speed?

  1. #1
    Join Date
    May 2014
    Posts
    3

    Does Text-Shadow, Box-Shadow, Border-Radius Affect Page Loading Speed?

    Hello.

    If I use too much of text-shadow, box-shadow and border-radius in the CSS, will it somehow increase the loading time of the website?

    Thanks in advance.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    There is "loading time", the time that it take to finish initializing. And there is "rendering time", the time it take to draw a resource on screen.
    Rendering will affect the perceived loading time (e.g. loading and rendering).
    Drawing shadows should only have a minor effect on rendering.
    Things like resources (i.e. stylesheets, javascript, images, fonts, etc.) effect rending and loading more so, especially if they are cross-domain resources.

  3. #3
    Join Date
    May 2014
    Posts
    3
    Ok thank you.

  4. #4
    Join Date
    May 2014
    Posts
    1,017
    Really it's not as significant an impact on a 'modern' system, at least not compared to parsing markup and CSS. If you are conerned about speed there are a LOT better places to put the efforts than worrying about CSS3 effects... EXCEPT:

    For linear-gradient. Linear gradient is generated as an actual image before it is applied in most browsers, instead of being tiled or applied in realtime. This can REALLY bite you in the backside on memory use and render time if you use it on LARGE elements (like body). Firefox in particular is disastrously poor performing on CSS3 effects, though it's made great strides since version 27 dropped.

    It's actually a laugh that rounded corners (fancy math) and box-shadow (blending effects) are better performing than a simple linear-gradient (bi-directional Bresenham Algo)... but those other two are done in the render path, linear-gradient is actually implemented as a background-image, meaning it is built BEFORE rendering starts.

    Which is why I'm still using a background-image instead, and using background-size to scale it up.

  5. #5
    Join Date
    May 2014
    Posts
    3
    Yeah I too don't use linear-gradients.

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    That's helpful info. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles