Transparency, gradients, etc. and mobiles

[Travis]

In CSS, we can easily achieve transparency, gradients, shadows, etc, ... with just a couple of lines (back to my time, you needed to create GIF or PNG images, to simulate these effects :)).

I was wondering if the use of these effects, are impacting the rendering time on smartphones, in a significant way that it could downgrade the user experience?

I assume that, it can be neglected compared to network / connection times, but I can't make my mind if this is also slowing down the scrolling of a page.

[not2easy]

CSS visual effects are normally faster and less browser/bandwidth intensive than processing images for the same purpose because images normally require an external resource requiring image rendering. Of course, if those effects are applied to something such as fonts that are used throughout the page it might make a difference. That's why the 'normally' qualifier was used (meaning in general practices).

I would say that if pages are slow to load, CSS is the last likely place to look. Though, again, that depends on efficiency of the CSS file which can vary widely.

I always suggest that whenever possible, visit the w3c's validators to check that some minor coding/spelling error isn't at work when things aren't producing expected results. They can give you a concise report of every issue or assure you that it's all good. Either way it can save a lot of time.

[Travis]

Thank you for your reply not2easy, ... in fact, I certainly said things badly, sorry. I was talking about the CPU resources needed to execute the CSS special effects , and if it was slowing down the rendering, not the downloading , of the pages, and eventually their scrolling.

Let's say, I use for the color of a text, "rgba(0,0,0,0.5)" , it means that when the browser renders the text, it applies a 50% transparency effect to a black text. So it requires more "calculation" than if the text was just in plain black, or gray. And I was wondering if it can impact the time to render the page and may be when the user scrolls the page, as the browser is rendering the text, can it make the scrolling not smooth ?

[not2easy]

There are a wide number of variables as to what a person experiences visiting a site on a mobile device. I can't think that all people visiting a given page will experience it exactly the same. Connection, location, browser/device age and condition, hosting variables and concurrent traffic can all enter into what kind of experience a visitor might have and it can be the same as yours or not.

CSS display calculations on modern devices should not be delaying page rendering to a noticeable degree. The browser would not recalculate each letter any more than if the text were a solid color - unless each letter, line, or paragraph is specified differently. It would read your specification for the text and apply that for each instance as specified. Rendering does not stop at the end of each class encountered, the CSS is processed on file load and applied as the page is parsed by the browser.

There are many things that can and do affect a page's performance for mobile. Some that come to mind are settings, a low battery, heavy network traffic, old devices, signal strength and more. For that reason I can't imagine how we might measure the CPU usage for each nano-process of rendering a page in a way that is useful for improvement. I'm not saying it can't be measured, just that for two devices we may find different measurements and for 100 visitors there might be 100 different measurements.

[keyplyr]

For mobile page speed, Google measures it with a slow 3g connection on an older 1g processor like used on the Nexus1.

70% of cellular networks connect to the global internet with a 3g connection or slower through 2020

[testmysite.thinkwithgoogle.com...]

Nothing to do with a CPU. The phone & it's connection are the culprits.

[Travis]

I am not sure people understood my question :) ... that's my fault. But thank you all for your contributions.