WebGL seems to be slowing my app

I've been working for a month to redesign my game to improve it's frame rate on Android devices. I've only tested it in web preview so far but it took a lot of work to get it to run at around 30 fps on a Samsung phone with an ARM quad-core and 1 Gb of RAM, with some levels going below. Currently it uses around 160 objects and less than 20 Mb RAM (depends on screen size) in level. So I was thinking I finally got it to run decently.

However when I tested it on the devices of various friends I quickly became concerned. On a Lenovo tablet with the same specs as my phone it ran really slow, below 10 fps, exactly the same on a Huawei phone that also had similar specs, and absolutely horrible on a HTC octo-core with 2GB of RAM, the frame counter dropping below 5. I was almost loosing hope when I decided to try disabling WebGL in the game project. You can Imagine my shock when I saw my game was now running at 50-60 fps even in the more demanding levels on all 4 devices, granted I need to use some work-arounds to replace all my WebGL-dependent effects. Personally I'm really happy to just drop WebGL and use the work-arounds but since WebGL is supposed to be this complete powerhouse I'm wondering if maybe I did something wrong or missed something.

Is there anything I need to know about using WebGL? Should I avoid text and use sprite fonts instead or something like that? Does anyone have any idea why it's severely slowing my app? I'd really like to make it work correctly instead of just dropping it. Any help is appreciated.

The usual culprit is how the events are setup..

You can test that by removing all events, and having just the objects on the layout.

Note: Webgl has nothing to do with events.

I think I found the culprit. It's not WebGL that's slowing my game, but the WebGL based effects I was using. When I turned off WebGL, it turned those off as well so it stopped lagging. I was using Brightness for my buttons and the Multiply effect for some game elements. I can attest that an effect as simple as increasing button brightness when it's pressed can cause great lag on some phones. In this case, the 8-core HTC phone I was talking about. To be safe I will avoid effects altogether and use work-arounds, aka more animations for my objects.

Right now I've re-enabled WebGL but removed all WebGL-based effects and the game runs like a dream at 50-60 fps even on my Samsung 4-core.

EDIT: I just had it work almost decently on my old Huawei dual-core with 512 mb, but only after I enabled hardware acceleration using Chrome flags.

Yeah, unfortunately fx for C2 have to be used sparingly.

Yeah, unfortunately fx for C2 have to be used sparingly.

That's ok, I'm used to working with EPS8 format in illustrator and that one doesn't even do transparencies - I'm used to work-arounds. But at least now I know and the game finally runs smoothly.