Does Text-Shadow, Box-Shadow, Border-Radius Affect Page Loading Speed?
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.
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.
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.
Yeah I too don't use linear-gradients.
That's helpful info. Thanks.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread