I have really strange problem. The thing is it seems that Cloudflare Rocket Loader doesn't work on mobile devices, but works perfectly on desktops.
My website is loading for less than a 1 sec on desktops and for more than 12 secs(!) on mobile devices.
I checked Networking in Chrome dev tools.
This is what's happens on desktop:
screenshot
And this is on Android device:
screenshot
It seems that Rocket Loader is just ignoring everything. What could be the problem?
RocketLoader is still in beta so can be a bit bugger. The better alternative is to enable HTTP/2 which has the benefit of multiplexing and a single connection whilst also having other benefits such as Server Push and Header Compression.
To get HTTP/2 on Cloudflare, all you need to do to enable SSL on your site (such as by setting an "Always Use HTTPS" Page Rule in Cloudflare).
Related
The issue I am currently having is when trying to generate a performance report with google lighthouse and/or page speed insights for mobile devices. on desktop emulation I am getting a score of 99 but through mobile emulation it is not even detecting an FCP event. when actually viewing the site on mobile however, it is very responsive and quick to load. I'm not really sure why this may be the case and am not aware of any potential solutions. The only suspicion i have is that the site is not 'optimized' for mobile, as it is the exact same site for desktop just with layout adjustments using JS and CSS. The following image is of the localhost report (https://i.stack.imgur.com/13XnB.png)
to clarify this happens both locally and when hosted.
Things I have tried include:
lazy loading image assets with react-lazy
removing all 3d assets from the site temporarily (react-three-fiber)
trying other analytics tools such as webpagetest (this was able to successfully generate a report and indicate the performance on mobile was not bad)
async load all Api integrations such as google analytics, google reCAPTCHA
pre-connect to all 3rd party resource URIs
My websocket connection works:
When testing on localhost on Desktop Chrome, Desktop Safari, and iOS
When testing on production on Desktop Chrome and iOS.
It DOES NOT work:
When testing on production on Desktop Safari
There are no console errors in the browser. I can see the websocket is created, but it never fires "open" event on Desktop Safari. On the server side, the connection comes through fine everywhere other than from Desktop Safari, where I don't see anything come in.
The websocket is on the exact domain as the origin, and both are using secure connection (https/wss)
There are a lot of moving parts on production (e.g. load balancer). I've looked at and configured things like "stickiness" and TLS versions on each layer in production.
Again, it works most places.
I'm thinking there must be something like TLS, CORS, etc that I'm not fulling understanding that is causing the breakdown.
This is what happens on iOS (and about the same in Chrome desktop, etc):
This is what happens in Desktop Safari on Mac:
Well. After many hours of spinning my wheels I solved it:
There is a setting in AWS Load Balancer attributes called "Client port preservation". Once I checked this, websockets started to flow from Desktop Safari:
I have a website with webrtc that works great between desktops.
Now I'm trying comunicate between desktop and mobile, video is ok but the audio has lots of noise in mobile, I'm using the following constraints for desktop and mobile:
var constraints={audio:true,video:{"mandatory":{"minWidth":"320","minHeight":"240","maxWidth":"320","maxHeight":"240","maxFrameRate":"15","minFrameRate":"15"}}};
If I change the mobile audio constraint to:
audio:{echoCancellation:false}
Solves the noise problem, but now the desktop device hears the sound with echo. How can I solve this problem? The tests that I'm dooing are in chrome(desktop) and in mobile side Chrome for Android and in a hybrid app. The mobile device is a ZTE with android 6.0.1
Welcome to the world of webrtc, probably the browser is outdated and isn't supporting the echoCancellation flag (or is still buggy).
Update the browser might resolve the issue (if you can). Otherwise maybe try another mobile device and check if it works there, if that doesn't work I only know of the if(mobile) ... else ... solution until the browser is updated.
In worst case you even have to check for specific versions to disable the flag.
I'm building a web app, which involves detection of shaking event for a mobile device:
if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
I'm using shake.js plugin by Alex Gibson.
When testing my app in Chrome desktop browser I'm getting this warning:
The devicemotion event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
In this link there's this text:
We want to start applying the concepts in https://w3c.github.io/webappsec/specs/powerfulfeatures/ to features that have already shipped and which do not meet the (new, not present at the time) requirements. We want to start by requiring secure origins for these existing features:
Device motion / orientation
EME
Fullscreen
Geolocation
getUserMedia()...
Even though it currently deprecated on desktop Chrome, knowing the guys in Mountain View I'm sure it will shortly be deprecated on mobile Chrome and Android Webview too.
My app is hosted on a server without secure connection, just HTTP. Is there a way to bypass this warning and have a shake detection in my app with HTTP connection?
The best way to bypass the deprecation is to move your application to HTTPS.
Many browsers are going to deprecate plain HTTP in order to make the web more secure. You should follow this trend and make your application support HTTPS. It's not hard though, there are free SSL certificates coming ( Let's Encrypt ).
There is no way to bypass this warning on unsecured origins and you are correct it will be deprecated on all platforms that we are able to auto-update. Right now it is a deprecation warning only and has not been pushed to be a full removal yet. We don't have a timescale as to when exactly it will be removed.
Google chrome provides remote debugging, which is how I normally debug on my Galaxy S3, but I have now come across a problem with loading speed and javascript lag that appears only to happen in the default browser and not in Chrome.
Can anyone suggest any tools/methods for testing with the default browser.