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.
Related
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
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 working on a site that is displaying relatively long (~5sec) render times on the home page. It is a WordPress install, with quite a bit going on, but it seems excessively long to load. I have noticed through the web inspector several big gaps in the load timeline where nothing seems to be going on. Does anyone have any idea what might be going on? I have confirmed there are no errors in the code that are being signaled load. The site can be found at http://ewokdown.com. For comparison, you can see that http://ewokdown.com/reviews loads quite snappily by comparison.
Thanks!
Elliott
Checked out your website, and the delay was not caused by anything on the client-side. Rather the delay occurred while waiting for the server to respond to my browser's request. Once the resources were loaded, rendering took a standard (relatively short) amount of time.
What does this mean? It means there's likely nothing specifically wrong with the way your site renders, it whatever server-side code you have for your site that ends up hanging.
Word to the wise: I wouldn't sweat the initial page load times all that much. User's expect there to be some delay, and once the resources are cached browsers typically do a good job of reducing future load times.
Having read up recently on yahoo's web optimisation tips and using YSlow I've implemented a few of their ideas on one of my sites http://www.gwynfryncottages.com you can see the file here http://www.gwynfryncottages.com/js/gw-custom.js.
While this technique seems to work perfectly on most occasions, and really does speed up the site, but I do notice a significantly higher number of errors where the javascripts don't load or don't load completely while I'm working on the site so three questions:-
is combining scripts this way a good idea at all in terms of reliability?
is there any way to measure the number of errors i.e. the number of times the script failed to load?
is there any way to 'pre-load' the javascript or ensure that the number of loading errors is reduced?
Of course it's good. You will not only decrease HTTP requests but you will cut down delays in downloading other resources.
Try using minify: http://code.google.com/p/minify/, I've been using it and I've no complaints.
I can assure you that combining files WON'T cause any errors as a combined script is the same as 10 non-combined scripts, they all load in the same way (In an ordered way, left to right, top to bottom). Double check the way you're combining them.
Script execution stops at serious errors. If you have multiple scripts, the others will still run; if you packed everything into one big file, a lot more code won't get executed. So combining scripts is bad for reliability, but can be good for other purposes (mainly load time).
All browsers have some sort of javascript console which will show you the number of errors. Most have some sort of developer tool too (Firebug in Firefox, Dragonfly in Opera etc).
I'm not sure what you mean by preloading. Since a javascript file can affect the rest of the page in various ways, browsers will fully load and execute a script tag before continuing to parse the page (which is why scripts can slow page loading down so much).
I can't see the load function in your code which is being called on your body tag! I'd try and steer clear of adding JS to your HTML file, it can be added dynamically and will prob cause you less hassle along the way aas well as being easier to maintain.
I'd say that the things you need to look out for are making sure that you're not trying to call something before it's defined (maybe your seperate JS files were defined in a different order to how they appear in the single JS file).
Firebug for firefox is a good development tool, if you've not found it already. Webkit, Opera and IE also have various other dev tools.
Combining JavaScript files is always the best way to go, unless it's not logically sane to do so (downloading jQuery from Google Code instead of hosting it yourself is a good example).
I always combine as many files as I can (JavaScript, CSS, images (CSS Sprites), etc.), also in development, and I never experience any problems. It's way faster regarding less http connections, which should not in any case be underestimated.
Regarding that you want to count the errors, I don't exactly see what you mean. But, debugging tools like the built in one in Google Chrome or Firebug for Firefox are good tools for debugging your JavaScript code, and shows lists of the errors occurring.
And to that thing of preloading: Yes, it can be done, though it'll become nasty and illogical. However, I can't think of any case whatsoever where it would be a good solution to have the trouble to preload the JavaScript, compared to just make it work right out of the box, no error checking needed.
About the error you are experiencing, the only one that my Chrome points out is this:
Uncaught ReferenceError: load is not defined
... which seems to be the onload method "load()" set on line 55 of your HTML document when the body tag is started.
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?