Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MVC 4 website very slow on iPad

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:

  1. jquery-1.8.2.min.js
  2. knockout-2.2.0.js
  3. jquery.easing.1.3.js
  4. 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>
like image 850
Denys Wessels Avatar asked Nov 14 '14 15:11

Denys Wessels


4 Answers

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:

  1. 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
  2. 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
  3. 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.
  4. 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.
  5. Does your network blocking traffic for certain devices?
  6. Optimize your Knockout code. Knockout is great, but you can overdo with its automatic UI refresh and dependency tracking.
  7. Optimize your JavaScript code. Run your code through jshint.com or jslint.com
like image 67
stack247 Avatar answered Nov 03 '22 17:11

stack247


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:

  1. replace that version of jQuery
  2. 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"
    ));
like image 40
ymz Avatar answered Nov 03 '22 15:11

ymz


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.

  1. Go to control panel and select Network Connections.
  2. Right-click the local area connection that you want to be statically configured, and then click Properties.
  3. Click Internet Protocol (TCP/IP), click Properties, click Advanced, and then click the WINS tab.
  4. Click Disable NetBIOS over TCP/IP.
like image 1
Gavin Mannion Avatar answered Nov 03 '22 16:11

Gavin Mannion


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.

like image 1
JWP Avatar answered Nov 03 '22 15:11

JWP