Using Google Chromes new Speed Tracer extension to profile my app.
Appears my app is constantly reporting "Sluggish (events) 100%", which means the browser is blocking html rendering.
I don't understand enough how to interpreter the Speed Tracer tool to fix this issue.
Any help appreciated. My web app is: bit.ly/7J0U
Doesn't seem sluggish to me (Macbook 10.5.8/FF 3.5.5). My initial thought was to direct you to some event delegation information, but that doesn't seem applicable after visiting your app.
Try to get a barometer for Speed Tracer's reports by running the tool on different sites and see how they compare with your own. That may help you to get a better sense of how to interpret the reports. Also, don't forget that these things (YSlow included) are tools not rules.
Related
Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.
I'm refactoring the code of an existing website "home made". When I open some pages my CPU consumption jumping by 20%...
I'm used to Firefox development tools, but everything seems to be calm after the page is loaded. I guess it's a javascript running in circle but I don't know how to catch it.
Do you know a way to spot the right script? Is there something exisiting similar to resource consumption but at the website scale?
Test your website for performance test.
Some simple websites and browser plugins can show the exact javascript which is taking time (If only javascript is the real issue. If other things are also helping in cpu util then these plugins can point you to them.)
GTMetrix - website which can help you find bottlenecks in your website
pagespeed - chrome plugin which is really good plugin to find bottlenecks as well as improved javascripts. this plugin can pin point your culprit javascript and will provide you optimized/minified version of it. Of course if only java script is the actual bottleneck.
firebug - mozilla plugin in firefox which also can perform same job but wont give optimizations.
meanwhile you can monitor your system resource util. and make sure that nothing else is running on your client other than website to make sure that util is because of those 2-3 pages.
Based on suggestions provided by above tools/profilers, decide your optimization candidates.
Is there a way to slow down browser DOM rendering and JS execution for development so we can see which parts of the website are too JS intensive and might be slow on slower machines? Maybe an extension for Chrome/Firefox for Linux/OSX?
Some clarification:
It's not about connection or testing the speed of the browser! It's just for our developers to see which parts of the page are rendered slowly or are "glitchy". For example when you use ajax and you are loading something you show a loader, but just after the loader is shown the loaded part is shown too. We want to see that in slow motion. Like when you press SHIFT in OSX when doing Expose.
PS. I did find some articles on delaying Internet connection, but that's not enough in this case.
PPS. Loading everything in VMs didn't work for us.
PPPS. Using slow down code like proposed in Javascript code for making my browser slow down is not the best option in my opinion.
Converting what #z0r said in the comments to an answer:
In Chrome, open devtools and select the Performance tab
Make sure Screenshots is checked
Press the record button (or hit Ctrl + E)
Do your activity
Stop recording
Hover over the timeline to see the screenshots of the screen as things change.
Use the timeline or profiler on your browser inspector. Here you can see, what functions take down the speed.
The accepted answer is good; I use and recommend Chrome Dev Tools as well.
As an alternative to Chrome Dev Tools:
Several 'website performance analysis' services offer timeline views. Run some internet searches and you'll find various free and paid options.
Try webpagetest.org
It's open source, highly regarded and has been running for years. It may offer different information, or is accessible in a different way, than Chrome Dev Tools.
In the test results, click "Filmstrip View".
I want to make my web applications faster.
For now I profile my web applications on a few test machines, and test some parts on jsPerf. However this only gives me limited insight about how the applications run when used by my clients.
What I would want is to measure performance "in the wild", when the scripts are in production.
I understand it will occur an overhead. However by only profiling specific parts of the code for each user, then combining those reports, it should be possible to get a complete picture with next to no performance hit.
Are there already solutions like this? Does Google Analytics or Google Webmaster Tools provide anything like this? I can't find any such thing.
There is no proper JS profiling in Google Analytics. You can use user timings to test how long your scripts run or how it takes to load them. And if you use Google Tag Manager you can implement the Javascript error listener that tracks unhandled javascript exceptions (i.e. it gives the error message and the offending script and the line in which the error happened).
This provides at least some insight into how your javascript behaves in the wild, but (IMO) it's not actually "profiling".
I've lately been running into odd issues, which I'm starting to think are related to resource starvation in the browser.
In FF:
I'd been testing one of our web apps and suddenly things that should disappear after a couple seconds stopped disappearing. I tracked back to setTimeout just flat out refusing to work. After reloading the browser it was all clear, no issues.
In IE:
I regularly see issues where IE will refuse to do transparency all the sudden, simply reloading the page clears this up.
In both:
Though I can't say its related for sure, I see unexplainable behavior, things along the lines of variables not being available (undefined) when they should be.
Both browsers also show a steady increase in memory usage over time (memory leaks).
The javascript in the web app is heavy and it is a single load page (making those memory issues mentioned all the more painful). There are lots of in-efficiency, and various things that make one say "why would you do that?".
Has anyone encountered such things? Can you point out general resources that will help identify and resolve these issues?
You could try running your application against the Chrome Profiler http://code.google.com/chrome/devtools/docs/overview.html. You can profile the CPU and get snapshots of the browser heap, that should help locate any rogue stuff.
If your application is designed to work with the Internet Explorer: The Developer Toolbar also has a profiler.