MVC 4 website very slow on iPad

Question

I have developed a point of sale system using MVC 4.The responsiveness and loading times on Windows and Mac is instant but on an iPad it takes 8-13 seconds to load a page or perform an action such as adding items to basket. To improve the speed of the web application I enabled compression in IIS and minified all my java script files I also used bundling to bundle the following .js files together which supposedly improves loading of pages as well:

jquery-1.8.2.min.js
knockout-2.2.0.js
jquery.easing.1.3.js
b.popup.min.js(used for displaying a modal popup only 6KB)

The other javascript files I use on pages are between 5KB and 15KB.After doing all this the application seems to be a few seconds quicker, but still takes unacceptably long(8-10 seconds).

Has anyone experienced similar performance issues on an iPad and how did you resolve it?Is there anything else I can do to improve performance?

I'm using Windows Server 2003 and IIS 6.0

Here's my bundle registration code:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-1.8.2.min.js",
        "~/Scripts/jquery.easing.1.3.js",
        "~/Scripts/knockout-2.2.0.js",
        "~/Scripts/common/common.min.js",
        "~/Scripts/popup.min.js"
        ));

    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
    BundleTable.EnableOptimizations = true;
}

And this is where I call it on the master page:

@using System.Configuration
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Prestige SSC</title>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    @Styles.Render("~/Content/css")   
    <script type="text/javascript">
        var screenRefreshTime = '@ConfigurationManager.AppSettings["ScreenRefreshTime"].ToString()';
        screenRefreshTime = parseInt(screenRefreshTime);
    </script>
</head>
<body>
    @RenderBody()
</body>
</html>

It could be the network connection. Are all three devices using the same network? At my office, the wireless is much slower, so comparing my PC to my iPad would not make sense. Have you tried Chrome on the iPad? It *feels* like I get better performance using Chrome over Safari. — CM Kanode, Nov 14 '14 at 16:15
I've tried on a Windows laptop,mac book and Samsung tablet running Windows 8 using the same Wi-Fi as the iPad and all three are very fast.I only have the performance issues with the iPad for some reason.Yes i also tried accessing the site on both Chrome and Safari and they are both slow. — Denys Wessels, Nov 17 '14 at 08:34
Please specify iPad generation version you verified on. Does your site work slow on all iPad generation versions? The reason of the problem can be client side data binding (as I see you use Knockout). So, I suppose that you should look at this direction. — Maxim Kornilov, Nov 17 '14 at 12:58
`screenRefreshTime = parseInt(screenRefreshTime);` are you refreshing the screen in iPad too? that can cause issues. — Bart Calixto, Nov 21 '14 at 22:55
It will be helpful to post the waterfall view of the site loading .. also have you tried moving the scripts to the bottom? — Mandar Limaye, Nov 24 '14 at 07:51
Knockout and many similar two binding frameworks become very slow when number of html elements grow in the page. Disclaimer, I am author of Atoms.js, and we created Atoms.js framework specifically to address binding and javascript speed in mobile/tablet and other light devices. http://github.com/neurospeech/atoms.js — Akash Kava, Nov 24 '14 at 08:09

stack247 · Answer 1 · 2014-11-20T22:42:27.160

When it comes to web site performance, it can be millions of things. It's not necessary the JavaScript files that causing the problem. Here's few things that might help you:

Connect your iPad to Mac / PC and enable Safari web inspector tools. With Web Inspector Tools, you can see what process is taking longest time. See this: https://developer.apple.com/library/iad/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
Go through the list of possible fixes from this free ebook: http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/entrypage/avoid-find-fix-asp-problems
Try to run from Chrome in iPad. Chrome is known to have the fastest JavaScript engine. Also, try remote debugging your iPad's Chrome. Chrome's developer tools has JavaScript Profiler to check what specific code / function that lags. See: http://blog.prototest.com/guide-to-remote-debugging-ios-and-android-mobile-devices.
You can also remote debug to Android-based tablet. If the same thing happens on Android tablet, use PC Chrome to remote debug your mobile device.
Does your network blocking traffic for certain devices?
Optimize your Knockout code. Knockout is great, but you can overdo with its automatic UI refresh and dependency tracking.
Optimize your JavaScript code. Run your code through jshint.com or jslint.com

score 2 · Answer 2 · edited May 23 '17 at 11:49

for iPads (and also any other device / platform that has a browser which is not IE 8 or less) jQuery 2 perform way better.. it is actually jQuery that weight a lot and in older versions it carries on lots of unrelevant validations and backward compatibility stuff

so, you can try to:

replace that version of jQuery
split your jQuery include command from the rest and use an if statement to determine if you need an older or newer version of jQuery

in short (based on this post Detect Internet explorer browser version problems)

var jQuery = "~/Scripts/jquery-2.1.1.min.js";

if ((Request.Browser.Browser == "IE") && ((Request.Browser.MajorVersion < 9)))
{
    jQuery = "~/Scripts/jquery-1.8.2.min.js";
}

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    jQuery,
    "~/Scripts/jquery.easing.1.3.js",
    "~/Scripts/knockout-2.2.0.js",
    "~/Scripts/common/common.min.js",
    "~/Scripts/popup.min.js"
    ));

Thanks for your answer, I've tried this but it's still as slow as it used to be.The 2.1.1.min.js is only 10kb smaller than the 1.8.2.min.js but I tried it anyway...No speed improvements — Denys Wessels, Nov 24 '14 at 15:02
the speed is not reflected by the size of the file but as it reflected by the way the new version works (better for new devices).. thsnks for the update - i will try to figure it out — ymz, Nov 24 '14 at 15:09

score 1 · Answer 3 · answered Nov 23 '14 at 07:16

Try downloading wireshark to the server, start it up, and recreate the error while capturing the packet flow. Then find the packets for that application right click and choose "Follow TCP Stream". You'll be able to see and filter just those packets out.

You want to look for inbound requests and outbound responses with respect to how long it took for the server to respond. If the times are fast <100ms then you have to next look to see how long each subsequent request from the IPAD is taking. You should be able to spot where the dealays easily just by looking at the relative time column in the trace.

From there if this is a pure client issue you'll need to focus on the device side. If it's a network thing, then you'll at least be able to rule out the application. If it's an application issue, then you'll be able to see what needs to be corrected.

Keep in mind that no application can run from a client until all the network things are ready, for example there must be a DNS resolve before any packets can fly. You may also note that one or more duplicate packets are being sent.. This is usually an indicator of improper bridging and or router issues. There may also be what is known as a Hop count issue, whereby delays are being caused by the number of routers the device has to hit. There could also be a router "Breathing" issue whereby the router's traffic is overwhelming it (which the architecture says "just throw the packets away"). When this happens TCP attempts to retry, which in essence makes things worse.

score 1 · Accepted Answer · edited Dec 04 '14 at 07:33

Check your server network activity using Wireshark https://www.wireshark.org

I've had the problem where the server was trying to connect to the client using netbios and ICMP to resolve the clients details and that was timing out.

Disable the Netbios over TCP on the server and check then to see if it's a networking issue and not actually a programming issue.

Go to control panel and select Network Connections.
Right-click the local area connection that you want to be statically configured, and then click Properties.
Click Internet Protocol (TCP/IP), click Properties, click Advanced, and then click the WINS tab.
Click Disable NetBIOS over TCP/IP.

MVC 4 website very slow on iPad

4 Answers4

Linked