Loading time more in Iphone safari - javascript

I am trying to load my web page in mobile(IPhone), In chrome browser it taking only 3 seconds but in safari it taking almost 2 minutes to load a entire page, Is there any specific reason for this behavior? If is it so how can I overcome this?

If I had a link to your page I could tell you exactly what is causing the problem.
The second biggest issue with mobile carriers is the number of simultaneous requests allowed. A desktop will download about 6 page resources like CSS, JS, and images (http requests) simultaneously. Mobile, one, maybe two.
The biggest issue is the tower will often drop the radio signal between the phone and the tower between each request. It takes about 2 seconds for the phone to reestablish the connection with the tower.
With mobile it is very important to minimize the number of http requests per page.
You want to make sure your http response header contains a Content: keep-alive for each http request.
Do not have unused CSS selectors.
Much the used CSS is inefficient and bloated by use of over qualified selectors.
Most web pages have multiple CSS files linked in, most unused. Most pages only require a small amount of CSS which could fit withing the pages <head><style> rather than being linked in.
There should never be more than one CSS file.
Javascript should not be used to layout the page. All JS does for layout is alter the HTML and CSS that should be have been done by the page designer. When JS is needed, it should be loaded after the page renders.

Related

Making Socket.IO show browser's page-loading indicator (the spinning wheel)

I am building a web application in Node.js, and using Socket.IO to handle data transfer between my client and server sides.
The core piece of my web application is a content feed. My client-side Javascript emits a Socket.IO call for the contents of the newsfeed. Once the response comes back from the server, it populates the feed on the webpage using JQuery.
My issue is that Socket.IO doesn't cause the browser's page loading indicator (for Chrome, this is a spinning wheel in the webpage's tab) to show. I want it to show. Without this loading indicator, my webpage looks like it's finished loading when it really hasn't (the feed hasn't been populated yet).
What is the proper solution to this problem? Thank you in advance!
There is no proper answer per se: browser vendors have different rationales for why certain activities would and would not show "loading" states: A good rundown here.
In general, ajax-like requests (things asynchronous to actual full page loads) should probably NOT show loading indicators by default, as busy states indicate to users that the browser is slow/busy, and we use ajax requests for all sorts of background tasks. There are, of course, times when a developer would want to show these indicators (form submission, single page apps that download subsequent pages via ajax: times when we want to convey to the user that something major is happening and that they SHOULD wait for it to complete) but we don't have a lot of control over forcing that to happen when it comes to async requests. The only real way to "fake" it on some browsers is to load content in an iframe: some modern browsers do trigger the "busy" state in that case.
With Websockets, most vendors have, probably quite reasonably, applied the same logic as ajax requests: there are a lot of operations you'd want to do with websockets that can happen without a user actually initiating them directly, so they shouldn't trigger that "browser is seriously busy, hold on a second" feel. And, like with ajax, there's sadly no api I know of for countermanding that design decision.
The iframe solution is limited: it works in some browsers but not all (notably, it's ignored in all major mobile browsers). And doing it crudely (i.e. creating a hidden iframe for when you want it to trigger the load indicators and removing it when you want to cancel them) has costs: you basically need to hit a resource that is designed to "stall" (like a php page that just runs sleep(10000) and so keeps the connection open). That's both weighty (extra http request just to trigger an effect) and also ties up some server with keeping open connections that are essentially not doing anything. That probably won't scale, particularly if that server is the same one hosting your app.
You're probably instead stuck with coding a custom loading indicator (spinner, fake progress bar fixed at the top of the screen). It's not satisfying, but it's the only thing guaranteed to communicate some of what you want to users. I have a solution for jQuery's ajax that exploits the iframe approach (Noisy JSON) that you could potentially reproduce as a plugin for socket.io, but if you're using websockets, that basically means falling back to ajax-style communication for requests. And you're still out of luck on Safari, mobile, and newer IEs.

Multiple concurrent downloads from a webpage

Background
We have a website that delivers dynamic content via download to our customers. Currently this is done by simply making a request to another page which dynamically sets the response ContentType and streams out the file data.
The Problem
We have now been tasked with delivering multiple pieces of content at once at the click of a button (or as a page loads). We have tried various approaches:
1) Multiple iFrames on the page with a different download URL in each. This did not work in all browsers, and since our platform is targeted at mobile phones, many of the native phone browsers did not handle the iFrames at all.
2) Multiple AJAX requests for the content. This is flawed as the AJAX requests were simply returning the binary data and the page was trying to output all of this onto the page rather than deliver as a download.
3) Multiple JavaScript timeouts. This worked for up to 3 downloads, but was very unreliable because if the second Timeout function begun before the first one had started the download, then the whole thing would simply break and not continue.
At this point I'm fresh out of ideas. I tried Googling for similar solutions to the problem but didn't come up with anything and I'm starting to think that it's actually just not possible.
Note that since the content is target at mobile devices, zipping the files up and delivering all at once is not an option since the devices are often unable to decompress the content.
The question, then, is: Is there a way to reliably trigger a web browser to download multiple pieces of content at once?
It turns out that this really isn't possible on mobile devices. Most mobile browsers support the methods involved, but due to the way that each tab of a browser is threaded and paused, it was only possible to fire one download at a time, since any redirect action would interrupt the remaining javascript from processing.

iPad not loading all HTML5 elements

I'm writing this web app, which has quite a lot of .png's on it so it is relatively heavy (5MB). The problem I have is, that iPad seems not to be loading all elements every time I start the webapp in homescreen mode.
The app is basically a bunch of DIV's with background images for them which are "nice buttons" and js code running. Suddenly the image is not loaded, so I see no button, but I can press it and the functionality is there, so my JS code is loading and working. I suspect it has something to do with having too much images, so these don't get loaded if the ipad thinks it has no ressources for them -
Does anyone had such experience?
The problem was not the iPad or HTML 5. My Webapp is loading a lot of images and on the server side I have IIS / ASP .NET in an XP machine. The MaxConnections of the IIS is set by default to 10. As it gets flooded by requests from the App, it locks randomly some images and the iPad (or any browser) cannot load them (403 error). Increasing the MaxConnections parameter to the maximum value of 40 solved the problem:
{C:\Inetpub\AdminScripts>cscript adsutil.vbs SET w3svc/1/MaxConnections 40}
Now I want to detect these 403 errors to warn user if it may still happen, but that's another story (and another question in StackOverflow)...

Preload external website content, then redirect

When leaving a website my user get a message you are now leaving, which redirects after 4 seconds. Can that time be used to somehow preload the target site's content, so that after the redirect the site appears faster?
If the site to be fetched is on your domain, you can parse the next file with JavaScript and request the assets.
If not, you can't figure out its assets (not via XHR anyway, most of the time) so you can't preload them. You could hack it by placing the site in a hidden iframe. You could also use your server as a proxy, to get a list of assets and pass it to your HTML to start preloading them.
You could try also using this meta tag...
<link rel="prefetch" href="/images/big.jpeg">
Source.
It is a lot of effort for arguably not much gain though.
You could start loading the site into an invisible <iframe>. If it's cached properly, this will reduce load time when the user actually enters the page.
This would however have all kinds of potential side effects, like autoplay music and videos starting in the background.
I would tend to leave this kind of preloading to the web browser (and/or the prefetch tag that #alex shows!)

Application Running With SSL not loading all scripts/CSS on first visit

Hopefully this isnt a tricky one. I've got a web app that doesn't load all javascript/css/images on the first visit. Second visit is fine.
After approximately 2 minutes of inactivity the problem reoccurs.
These problems only started occuring after the customer requested SSL be applied to the application.
Ajax requests stop working after 2 minutes of activity despite a successful page load of all javascript elements.
Application timeout is 30 minutes - like I said, everything was fine before SSL was applied.
All javascript and CSS files use absolute URLS - e.g https://blablabla
There appears to be no pattern as to why certain files arent loaded. The firebug Net output shows the status for the failed elements as 'Aborted'. For example, site.css and nav.css are in the same folder, are declared after each other in the head tag yet one is loaded and the other is not. Both will load fine after refreshing the page (unless roughly two minutes have passed).
An Ajax request also shows as aborted after two minutes. However, if i do the request again the Ajax request will succeed. Almost as if the first request woke something up.
None of these problems occur in Chrome
Any ideas? :)
FYI this is a .Net 4 C# MVC app running under IIS7 but I'm not sure its relevant since it works in Chrome. Everything worked fine before SSL was applied.
Removed SSL across the board and secured action methods with [RequireHttps]. Then changed the scripts and CSS in the master files to point to absolute HTTP urls. Javascript then worked fixing the ajax.
If anybody has any idea why CSS/Javascript broke over SSL it would be cool. Im guessing it's perhaps the work load? Since it worked the second time I'm guessing half the CSS and scripts were cached making less of a workload over SSL?
Anyway, working now!

Categories