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.
Related
We use PhantomJs 2.0 to take screenshots of web pages. We've found that one particular page takes several minutes to process. This page does not appear to have this issue (or at least not of any comparable magnitude) when loaded in Chrome.
I believe that this is because the javascript is hanging/running very slowly. During the hang, Phantom is using a lot of CPU (although only one core). It does not appear to be taking up an abnormal amount of memory. I am fairly confident that javascript is the culprit because I can see from logging that all requests complete quickly, but then after the page loads Phantom hangs for awhile and won't run anything (I think this is because Phantom is all single-threaded so if the page is still running javascript my Phantom script won't run anything).
I'd like to debug and try to understand what part of the JS is taking so long, but I can't figure out how to get at this in Phantom. For example, I can't seem to collect any output from console.profile/console.profileEnd. How can I profile the javascript running in Phantom to find the bottleneck?
I use Phantomas, via grunt-phantomas. It's a tool that integrates with PhantomJS to profile a wide variety of performance-related metrics. Definitely worth checking out. If it doesn't give you exactly what you need, you can look at the source and see how they integrate with PhantomJS and get data out.
Nowadays it appears that many webpages want to use my cpu/harddrive/bandwidth in order to show me their ads/pages/information in beautiful but expensive ways.
Often I like these new pages, but sometimes I'm a curmudgeon and am just annoyed that my fan starts spinning and the EMF loads rise when I open the pages.
Is there a browser/plugin that I can use to throttle, best case, and/or monitor, worst case? I am not very knowledgeable of the Reactive JS, etc techniques, so I am hoping there is an easy solution?
thank you!
Anne
ps Normally I use Firefox but of course I have Chrome on my machines (win8, win7, mac 10.8) as well.
You need a client side javascript manipulator.. they are known as User Scripts... For firefox, you want something like grease monkey.... its worth a google... This is not the simplest method, but most effective.
Otherwise you will just want a ad-remover addon for firefox.
Example For Chrome: https://chrome.google.com/webstore/detail/adblock/gighmmpiobklfepjocnamgkkbiglidom?hl=en
They simply search for common code that are used to display adverts (like adsense) and will remove the code from the webpage anytime you view/load a page.
The GreaseMonkey/UserScripts path would be more if you want to customize how your browser interacts with web sites.. For example, you could say for every image on a webpage to be hidden/removed and so on..
As for monitoring, throttling.. Well, you can monitor.. but to throttle.. well that would require a application/proxy that goes between your browser and net connection.
There was one i used years ago that would allow me to simulate a 56k modem speed while developing web pages.
Monitors: https://addons.mozilla.org/en-us/firefox/collections/smayer97/for-managing-bandwidth-usage/
Throttle/Limiter: http://www.netlimiter.com/
OP, in Firefox 68+ (and probably earlier as long as it's Quantum) you can open Tools, Web Developer, Network, or CTRL-SH-E and see how long each element on a page takes to load. It actually has a lot of info. From there you can tell which ad servers are overloaded and take a while to load. Ad servers often slow down a page load because they are busy, but so do larger animated images shown as ads, or ad videos.
I know this isn't exactly a throttle, but it will help you find out more details of what is going on in a specific web page. FWIW, I simply block all ads on most pages and that helps increase load time and reduce bandwidth usage from Firefox.
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.
is the speed tracer only allowed on the developer's build?
I'm using the "normal" build and i've installed speed tracer. It "seems" to be working but I want to be sure and don't want it to corrupt my files or cause my computer to crash or something
Although the speed tracer page at http://code.google.com/webtoolkit/speedtracer/ does not indicate that we need a developer's build, from past experience I do know it certainly used to need the developers build.
So basically is there an "official document" that says the speed tracer has upgraded from developers-build-only to everyone? Or do I risk crashing my browser by using that unsafe extension?
The Speed Tracer Extension Page doesn't say anything about needing a specific build. I think you'll be fine. Also, I had no idea this even existed, and this looks really useful, thanks!
I know it certainly used to need the developers build in the past but I don't know if it still does!
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.