/    Sign up×
Community /Pin to ProfileBookmark

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.

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@ShrineDesignsMay 09.2014 — 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.
Copy linkTweet thisAlerts:
@DezoLordauthorMay 10.2014 — Ok thank you.
Copy linkTweet thisAlerts:
@deathshadowMay 11.2014 — 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.
Copy linkTweet thisAlerts:
@DezoLordauthorMay 12.2014 — Yeah I too don't use linear-gradients.
Copy linkTweet thisAlerts:
@auntniniMay 12.2014 — That's helpful info. Thanks.
×

Success!

Help @DezoLord spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...