I got this website: All things I like and up until recently it was working perfectly. But suddenly it needs 20 seconds to load - I haven't touched the code in that time.
What could be the cause of this? 20 seconds is really long time.
I am using FBML implementation and not IFrame.
Have you checked it on firebug
Well i checked and your total load time was 28.9 seconds. And most noticeable amount of time was spend on waiting for resources (for Fans and likes boxes) from static.ak.fbcdn.net and then getting them.
So there seem to be no problem from your site its the Facebook Server thats taking time in fetching the data and sending it back to your page.
You can still optimize your own resources like backgrounds ets.. i notice a big 100x200 image for header
Super slow with facebook is annoying!
I stumbled across this page looking for a solution - the only one i cant think of (and hence, the one i'm going to enact) is to pre-size the div that the fb stuff will appear in. Page will still load slow, but won't readjust itself after 10 seconds!
Related
I've been doing some refactoring on a slow running web application, and managed to reduce the number of requests and the size of the downloads to help improve the situation. Now the loading time is consistently shorter. However, consistently before there was hardly any time elapsed before the last 2 requests. Now consistently there is a gap.
Q1: What do these 'gaps' indicate in Chrome Network view?
Q2: Looking at the screenshots, the DOMContentLoaded time vs. the overall Finish time, are there any conclusions I can draw that could help me optimise further?
Record the page load in the Performance panel. See Get Started With Analyzing Runtime Performance to get the gist of how to use the panel. Understanding the network bottleneck can also help get you oriented.
However, you'll want to press the Reload page button (like Sam does in the "understanding the network bottleneck" video) instead of the Record button to record the page load performance, as the "get started with analyzing runtime performance" instructs you to do.
Once you've got a recording, the Main section shows you all of the main thread activity that occurs while the page is loading. The Network section shows you all of the Network requests. You'll probably be able to visually verify that there's a bunch of JavaScript work going on during the gap that you're seeing in your screenshots.
If it's still not clear to you, post a screenshot of your Performance panel recording and I'll help you decode the results.
One of our web pages has a rendering performance issue, when the page is open, the spinner is freeze or loading very laggy, and after 6-12 seconds the page completes loading. So i'm using the Network's waterfall in chrome dev tool to diagnose the issue. But I got a few scenarios which i don't understand what happened.
In the following screenshots, all the resources for the corresponding page are loaded in a very short time, but the spinner is freeze for 6 seconds or 9 seconds, i'm not sure what is happening after the resources are loaded and before the page completes loading, maybe the spinner is in a wrong thread or gets blocked somehow? What is the means that i should use to find out the cause?
Scenario 1
Scenario 2
UPDATE
Network Screenshot
Timeline Screenshot
UPDATE
After checking the Event Log, i think the issue happens at Angular digest cycle, that endpoint response time should still be 780ms.
Thanks for the detailed info. It'd be more helpful if you can link to the page, but I understand that's often not possible. I'll just provide some general data for people in the same boat. I don't know if I'll be able to completely answer this specific question, though.
In the Scenario 1 and Scenario 2 screenshots you can see that your resources are loading in 1 or 2 seconds. That's your cue that the issue isn't related to the Network.
So while this is a page load issue, it has nothing to do with the network.
In Timeline Screenshot you can see that your CPU usage is completely maxed out from about 1900ms to beyond 16000ms. So your page is forcing the browser to do a tremendous amount of work. This is probably in the JavaScript.
To diagnose this, I'd investigate the flame chart (under Main) which you can see in Timeline Screenshot. The longer the bar, the longer that function is taking to complete. Or, if you see a small function getting called thousands of times, that could be the cause. If you can optimize those calls, then you can get your page visually loaded faster. You can click Self Time header in the UPDATE screenshot to rank the function calls according to which took the most time.
Again, I don't know how helpful this answer is for this particular question, but I thought I'd try to rephrase the problem in a different, more general way.
My page load times have been wildly fluctuating, and sometimes it takes so long to serve a page that I get a server timed out error, even during relatively quiet times of day for my site.
I have been using pingdom to check page load times and to try and find where the problem lies.
It seems when a page loads normally (in approx 6 seconds), there is a 1.63 second 'Wait' Time for the main html file, before it starts receiving the file.
You can see this here:
http://tools.pingdom.com/fpt/#!/GEoqJlVdZ/http://www.bluedogposters.com.au/shopdisplayproducts.asp?id=11&cat=Movies
But 2 minutes later, when the same page is taking 17 seconds to load, there is an 11.7 second Wait Time before starting to receive this same html file.
You can see an example here:
http://tools.pingdom.com/fpt/#!/he2L5Jhgz/http://www.bluedogposters.com.au/shopdisplayproducts.asp?id=11&cat=Movies
Do you know what can cause this difference in the Wait times because it seems this is the reason my site has been so slow recently.
Accoring to the Waterfall chart, there is nothing else happening, so why the Wait?
Is it more likely to be a code or server issue?
I found some useful info here How to reduce server "Wait" time?
Any advice is much appreciated.
You need a tool that can dig into the backend performance, something like New Relic might help - they do a free month trial.
There's obviously some variation in performance going on but whether it's related to load or other factors is really hard to discern without digging deeply.
You should try new relic anyway, it will still give you a good answer even on an ASP classic site. I have used it on windows servers before to figure out why an app was running slow.
I am pulling data from a web service in order to populate my UITableView rows. It loads perfectly fine, however it takes around 4 seconds in order to load the whole data. Is there a way in that I can increase the time to load? Probably by caching it? Or any tips and tricks on what people usually do to do this?
You can display old data and asynchronously fetch using threads the new data and then reload the UITableView
Caching depends on what you're loading. If you're loading, say, Twitter feeds, you should cache the user avatar pictures because you know you'll be fetching them over and over again. If you're writing something like a retail app, you might show items that are on sale. If the items change every Sunday, then cache them the first time you fetch them and don't fetch them again until Sunday. That sort of thing.
Beyond that, there's not much you can do to make the internet faster. If you have control over the web service, you can make the data sent back as concise and simple as possible. You'd be surprised how many milliseconds you can burn parsing complicated XML.
If it makes sense for your app, you can show old data. For a twitter client, it's better to just save the data you've already fetched, show it immediately, and load the new stuff in the background.
If you can't do any of that, then pretty much all you can do is put up a "Loading..." overlay of some sort so that the app doesn't just look frozen and live with the delay.
You can try to use Three20 TTTableViewController, nice tutorial can be found here:
Three20
Moreover, you can add "Load more results" button, look here
I'd like to integrate something like a welcome panel (welcome screen) into our iPhone application to inform our users about updates and new offers when they launch the application. I have the following thoughts and doubts:
No user input required
Shows generic HTML without any action from the user point of view, the thing closes after 2 or 3 secs and has a close button if you want to close it manually. This is for advertising and tips.
This should be very simple to implement
User input required
Shows generic HTML with an action required from the user point of view, for example a survey. The user should be able to skip it
same as above, but is it possible that the user submits something on a HTML page and that causes also something to happen within the iPhone app (maybe via Java Script)? For example the user submits a survey on the HTML page and then app closes the current screen and continues to the next screen (i.e. the real application)?
Is it also possible to receive parameters (e.g. an ID) via a HTML website? e.g. if the user receives an offer on the HTML welcome panel, then he clicks on it and it takes him directly to a screen in the iPhone app with content loaded from a server (via JSON) depening on the offer id retrieved through the HTML page.
We prefer implementing it via HTML, because it gives us more flexibility. But I'm also open to hear other suggestions.
Thanks
Rengers answer is the correct one to accomplish what you want. However, the real correct answer is "Don't do that in the first place."
From a design perspective, a "Welcome Panel" or any kind of startup/splash-screen is a bad idea and the Apple Documentation tells you explicitly not to use them. Even for games, they're a bad idea that should be avoided if possible.
It's not a "Welcome Panel" it's a "wade-through-all-our-marketing-crap-before-you-can-actually-use-our-app" panel.
Mobile apps aren't like apps for regular platforms. Non-mobile hardware is faster so the obtrusive startup screens load faster and can be dismissed faster. Non-mobile apps tend to accomplish many task and people use them sitting down for prolonged periods. Users will tolerate a few seconds wasted clicking through startup screens so they can get into an app they will use for many minutes or even hours.
By contrast, mobile apps are often used by people on the go and in a hurry. The apps are small and ideally perform a single task. As quickly as possible, people need to be able to get into the app, perform what ever task the app accomplishes and then get back out again. If you're only using an app each time for 30 seconds or so, having to spend 5 seconds each time wading through startup screens is massively annoying.
Mobil hardware is slower and operations can take longer. Depending on its complexity and resources an app can take as much as 10 seconds to launch. In your case you want to add to a startup screen that has to load, connect to a url, display and then have the user perform an operation. That will take another 5-10 seconds minimum. So you're looking at users having to spend 20 seconds or more just getting into your app.
That doesn't sound like much but try mocking up your app and then using it on the go i.e. while walking, waiting for an elevator, going up the stairs, waiting for a red light etc. Test it in social situations. In the middle of conversation say, "Let me check on that" then take out the iPhone launch your app and try to get some information from it. 20 seconds becomes a very long time in all these circumstances.
Even shorter launch times are very annoying if you have to take some action every single time you open the app just to get to the functional part of the app. It's arguably even worse to spring a startup screen on them intermittently so they never know when they open your app how long it will take to get in it. User surprise is not good design.
Instead of forcing users to do something, you should embed advertisements and update notices unobtrusively in the app itself so that people can see them while they are using the app. In the case of advertising, this has the added advantage of putting the adds in view the entire time the user is looking at the app.
I don't know how many times some idiot from marketing has come in and started a feature request with, "We need to force the user to..." The only response to those types of request is to set the marketing weeny on fire. Do that several times and they'll stop trying to systematically alienate your customers.
UIWebViewDelegate has a method that allows you to respond to interaction in a HTML page:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
Using this, you can catch any links clicked and respond to them in your application by presenting a different view.
Recieving parameters like an id can be done in a few different ways.
1) You can parse the HTML and determine it from the source.
2) You can have a javascript function in the HTML that returns the id. Call it by using
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
3) You can also use the delegate method I mentioned.
If you make a link like this: get offer you can catch it in the delegate and retrieve the id from the NSURLRequest.
I hope this will point you in the right direction.
If you do need some kind of startup screen a good option is to use the default.png. The app loads and displays that image before it does anything else.
It's usually used to display the illusion of the user interface before the UI loads completely. However, you could use it to display startup information. Since it displays almost instantly (within 1 sec) it does give your user something to look at while the app loads. In the case of a mock interface, it lets the user see the location of the interface elements and begin moving to activate them before the elements finish loading.
The catch is that the image disappears as soon as the first view loads so you have to load a view behind it that is a duplicate of the image (more ofter the image is screenshot of the view)
In your case you would need to dynamically generate the default.png when the web page updated. Upon launch it would display the information and buy the time the user read it, made a decision and touched the interface, the real web page would have replaced it.
Of course, this system won't work if you want new info at the start of each launch. Instead you'll have to generate the image during one run for use in the next.
In any case, if you launch into a web page the user did not select, I advise that you create a default.png that displays a message along the lines of "Checking for Updates and Info" (or whatever your doing) so the user won't think your app launched and hung.