I am currently investigating why my site takes so long to load.
The Firebug net panel tells me this:
7.74s (onload: 16.02s)
What might be causing this huge gap?
What exactly is the browser doing after all resources are loaded until it fires the onload event?
Thanks.
It would be difficult to say the cause without a site URL. But you can do the following things at your end.
You can install the following Firefox addons
YSlow
Page Speed addon (check it with Google it is a product from Google itself)
This addons will give you fairly good idea about what causes your issue.
Also have a look the Best Practices for Speeding Up Your Web Site article from Yahoo! that specifies several points to improve the performance of the website.
Hope this helps.
JP
It's download time vs processing time onload. See also Timing with the Firebug Net Panel: What is the onload time?
Processing time of your onload scripts is very high, so use a profiler:
Use the Firefox Profiler tool to find bottlenecks in your JavaScript code. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples.
You can launch the Profiler by selecting "Profiler" from the "Web Developer" menu. You'll find the "Web Developer" menu under the "Tools" menu on Linux and OS X, and directly under the "Firefox" menu on Windows.
If you use the Net panel in Firebug you will get an itemised list of requests and times - you can determine the problem from there.
Ahem...
Related
How do I measure if my jQuery (or JS) heavy webpage is dragging/ affecting the CPU performance of client computers (and touch devices)?
I'm not asking about load times/etc as they are dependant on the number of JS files. I'm asking about client side resource consumption and associated stability issues if any.
To be specific: I'v embedded a jQuery rotate function to perpetually animate an image, and a couple of other jquery based animated objects in the wordpress template.
You can use webkit profiler (profile, audit tab) that comes with web browsers like Google Chrome. Also extensions like page speed and speed tracer are really awesome. You can get an idea on the whole browser process like how much time it spends in UI thread, executing javascript etc.
This is a good question.
You could try Eric's tool that reports the frame rate of the browser.
http://churchm.ag/monitor-javascript-performance/
I'm not sure if this is something that you want to test during development, or monitor has feedback from real clients. It could be possible to run the above Javascript has a background thing and then send AJAX messages back to the server to report the performance for a visitor.
Another script I found attempts to measure CPU performance, but I don't know how good it is.
http://blog.pothoven.net/2007/12/performance-based-web-app-functionality.html
I wouldn't suggest using it on a production server, but Firebug has Javascript performance analysis tools. http://getfirebug.com/javascript
You can use the Google Chrome Web Inspector, specifically the "Profiles" panel. Here's some more information on it...
http://jtaby.com/2012/04/23/modern-web-development-part-1.html#The%20Profiles%20Panel%20
Some code in my page is making my browser slow after 20-30 min. I need to know which one. What tools can i use to debug this out.
Following js files are being loaded
Jquery
Jquery ui
History
Mustache
Yes i had settimeout and thought that to be the culprit but alas after removing it too, it's still a bit slow.
You should use Google's Speed Tracer. It's a Chrome extension.
Speed Tracer is a tool to help you identify and fix performance
problems in your web applications. It visualizes metrics that are
taken from low level instrumentation points inside of the browser and
analyzes them as your application runs. Speed Tracer is available as a
Chrome extension and works on all platforms where extensions are
currently supported (Windows and Linux).
Alternatively, you have Yahoo!'s YUI 2: Profiler.
The YUI Profiler is a simple, non-visual code profiler for JavaScript.
Unlike most code profilers, this one allows you to specify exactly
what parts of your application to profile. You can also
programmatically retrieve profiling information as the application is
running, allowing you to create performance tests YUI Test or other
unit testing frameworks.
An addendum to #Julio Santos ' answer
You can use Dynatrace Ajax which has a good free version of their product
Does anyone know of a visual representation of how a browser loads content? A couple of videos that might explain different scenarios, like how how JS files are loaded. Does the html load first and then the JS or do they load together.
In general, I follow standards where my JS is added to the bottom of the page, but I have never had a very good grasp of how a browser loads content and I would love to see a visual representation like a slow motion video example of sorts.
Thanks!
I think the YSlow presentation is what you want. I saw a different version in person, so you might dig around a bit to see if you can find one with really great visuals. Also, try the YSlow plugin or one of the other analyzers, like Safari's Web Inspector.
You can use the Network tab in Firebug or Chrome's Dev Tools, these will show you a waterfall of things loading.
Also, you can test loading the page over a really slow connection with something like Charles and throttling the connection speed.
http://shanamccormick.com
The page loads all the images and then says "(1 item remaining) Waiting on http:// shanamccormick com..." How can i see what it is waiting to load here?? and why does it take sooo long?
The index.html file uses a couple small internal JS and one external JS located within my website (jquery.min) The size of the external JS file is 54kb.
IE8 has a Javascript profiler, like Firebug for Firefox.
But I think you need Fiddler to profile the performance of the HTTP request/response.
If you want the Javascript developer tools (including profiler) I recommend moving to IE8, but if you can't,
IE7 has downloadable dev tools, like IE8's built-in capability.
I have a few solutions that might help. I learned of these from another question I asked earlier:
Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox". Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
WebWait is a website timer. Use WebWait to benchmark your website or test the speed of your web connection. Timing is accurate because WebWait pulls down the entire website into your browser, so it takes into account Ajax/Javascript processing and image loading which other tools ignore.
Also, the IE JavaScript Real Performance Tester can test your scripts.
Hope these help!
The page doesn't exist anymore? or is it: shanamccormick.com ? misstype?
Anyway I've found that googles IE8.js (for IE7 and less) (https://code.google.com/p/ie7-js/) takes up to 1 minute to load (on a computer from that time) every page load... could that have been the problem?
I use Firebug and the Mozilla JS console heavily, but every now and then I run into an IE-only JavaScript bug, which is really hard to locate (ex: error on line 724, when the source HTML only has 200 lines).
I would love to have a lightweight JS tool (a la firebug) for Internet Explorer, something I can install in seconds on a client's PC if I run into an error and then uninstall. Some Microsoft tools take some serious download and configuration time.
Any ideas?
You might find Firebug Lite useful for that.
Its bookmarklet should be especially useful when debugging on a user's machine.
Since Internet Explorer 8, IE has been shipping with a pretty impressive set of tools for JavaScript debugging, profiling, and more. Like most other browsers, the developer tools are accessible by pressing F12 on your keyboard.
Script Tab
The Script tab is likely what you'll be interested in, though the Console, Profiler, and Network tabs get plenty of use as well while debugging applications.
From the Script tab you can:
Format JavaScript to make it more readable
Move from source to source of various resources on the page
Insert breakpoints
Move in and over lines of code while stepping through its execution
Watch variables
Inspect the call stack to see how code was executed
Toggle breakpoints
and more...
Console Tab
The console tab is great for when you need to execute some arbitrary code against the application. I use this to check the return of certain methods, or even to quickly test solutions for answers on Stack Overflow.
Profiler Tab
The profile is awesome if you're looking for long-running processes, or trying to optimize your code to run smoother or make fewer calls to resource-intensive methods. Open up any page and click "Start profiling" from the Profiler tab to start recording.
While the profiler is working, you can move about the page, performing common actions. When you feel you've recorded enough, hit "Stop profiling." You will then be shown a summary of all functions ran, or a call tree. You can quickly sort this data by various columns:
Network Tab
The network tab will record traffic on your site/application. It's very handy for finding files that aren't being downloaded, hanging, or for tracking data that is being requested asynchronously.
Within this tab you can also move between a Summary view and a Detailed view. Within the Detailed view you can inspect headers sent with requests, and responses. You can view cookie information, check the timing of events, and more.
I'm not really doing the IE Developer Tools justice - there is a lot of uncovered ground. I would encourage you to check them out though, and make them a part of your development.
I would recommend Companion JS.
This is the free version of Debug Bar but I find it easier to use and have the features I need. Great to test little JavaScript snippets in IE the same way I do with Firebug in Firefox.
EDIT 5 years later: I now uses Internet Explorer integrated developer tools.
IE 8 is supposed to have better tools, but the IE Developer Toolbar is pretty good.
I use both Microsoft Script Debugger and FireBug Lite, depending on what I am debugging. Both are great tools- try them both out and stich with what you're comfortable with.
In IE8 just press F12!
Go to Tools->Internet Options…->Advanced->Enable Script Debugging (Internet Explorer)
then attach Visual Studio Debugger when an error occurs.
If you're using IE 8, install the developer toolbar because it has a built in debugger.