I'm trying to decrease page loading time of a project I'm working on. At first the team I'm working with tried to optimize Apache/Symfony2/Postge but finaly in Networking panel of Chrome's Dev Tools I've found a large "gap" after loading all css and js files. The "gap" disappears when script files are removed. If I leave only jquery.min.js (no other libraries or scripts loaded) page still loads for aprox. 1.5s.
Developer tools doesn't say what happens during this period. I think this might be when browser parses and interprets CSS and JS but I need decreasing of DOMContentLoaded time. Any suggestions?
This is my first post and I need 10 reputation to post images, so I've uploaded screenshot of what I'm talking about here:
http://tinypic.com/m/imqw0n/1
P.S.: Screenshot is taken on "average" PC. The same test on my personal laptop (AsusG750JZ, 8-core CPU, 16Gb RAM, nVIDA 880m) shows very different results - load time is about 1.5s instead of 5.2s. Unfortunately I can't make everyone use the web app on hi-end ;)
P.S.2: Async loading of JS is not an option. I've tried RequireJS but I didn't like the results. It was clumsy because of all scripts dependencies.
In DevTools, go to the 'Timeline' tab. https://developer.chrome.com/devtools/docs/timeline
Related
I am building a chrome extension with angularJS. The idea of the extension is to replace the default google page when a user opens a new tab with a simple app.
Therefore, it needs to be fast. I am trying to optimize my page load time. I have minified my javascript and I load all the pictures in async mode.
When I use the chrome dev tools to see what's delaying my page, I find a gap in the waterfall chart. I believe it is due to my js code which is being executed by chrome.
How can I make sure the DOM get printed on the screen while the js is being executed?
Is there any good tool/resources to see how I can optimize my js with regards to my page load time?
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...
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.
I have a few js and css files that loads on the head. After the last js file there is a gap (on Firefox) of 1311ms until the browser starts to load the images.
Firebug doesn't show any status on this blank space.
What does it mean? Why are my images loading so late?
All images on cache, the gap is still there...
Full no-cache load:
You have a 300kb JavaScript file. That's a lot of JS to parse and possibly execute. Try the profiling tool in Firebug or Chrome to see what JavaScript is being run on page load.
there some maybe reason.
Those static file in many HOST, these are not in the same HOST.
Your browser is resolve these file slowly.
A javascript file in these file spending much time.
you can use some web preformance tool, like Yslow, chrome console .. to analysis this problem.
If we're talking img tags, then the delay might be the time it takes the browser to render the page. I'd have to look for a reference, but I recall that the browser doesn't start to fetch images until it has rendered the page. You could test this out by adding some profiling that shows when the page has completed rendering, and compare that to the time the first image starts loading. I have profiling inserted in my pages that inserts timestamps as the very first statement/element (inside the head), and the very last (in the body). Comparing the two gives you the approximate render time.
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?