I'm looking at a waterfall in Chromes Developer tools of several CSS and Javascript files.
When refreshing the page, several of the files load from the browser cache, as expected. These are taking 1ms to load most of the time. However some files, and it seems to be the same offenders each refresh, are taking quite a bit longer. Something between 400ms and 800ms.
The waterfall timeline in Chromes network tab shows that this time is spent in the TTFB (time to first byte) in some cases. This doesn't make any sense to me, if it's getting it from the browser cache and not from the server, why there is a TTFB?
Can anyone share some light on what's happening here?
Related
After clearing the cache, the site takes long time to load. I am not sure why the css and js libs are taking long to load.
I can use CDNs but it is way to long. The html loads fine. The site is pre-compiled and only cache is getting cleared and load time increases considerably.
I have seen jquery, mordernizr and/or bootstrap take a long time to load.
Browsers: Firefox 60.0.1, Chrome, IE 11
I see the time spent is mostly waiting and if proxy connections (max) is the issue then all other calls combined must exceed the waiting time.
Thanks for your help.
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
My website (www.transferxl.com) relies on Javascript for compressing data. Compressing a 25MB large chunk takes about 1-2 seconds with most browsers (Chrome, Safari, Firefox, ...). IE11 takes over 40 seconds for exactly the same operation.
I thought IE11 was just painfully slow, so I decided to enable the profiler and see what is happening. To my surprise the same chunk was compressed in 2-4 seconds. Although still slower than Chrome, it was way faster then before.
Steps to reproduce:
Go to www.transferxl.com.
Open the developer console (F12).
Add a (compressible) file that is larger than 25MB.
Transfer the file and watch the console
You'll see a message how long it takes to compress the chunk of data.
Refresh the window (while still on www.transferxl.com).
Start the profiler.
Add a the same file again.
Transfer the file and watch the console
You'll see that the same block is now compressed much faster. You can also try it in reverse order. Results are stable. With the profiler on IE seems to compress 10-20 times faster then without the profiler.
Does anyone know what could be the problem? The profiler output doesn't show anything alarming. Has anyone else seen this issue?
I have tried doing exactly what you asked, and the uploads took less than 2 seconds on both Google Chrome (39.0.2171.65 m) and Internet Explorer (11.0.9600.17420). It appears as if Microsoft may have released this fix in one of their more recent updates. As far as I have seen, nothing of this sort was mentioned in the changelogs. Yes, I ran IE with the profiler disabled. I presume that the issue may have been caused by IE assigning process priority to scripts running with the profiler attached, since the profile also needs to function and render its output (supposedly) without affecting the functioning of the page itself. The compensation does not noticeably affect the computer's processor consumption in any way, but somehow just utilizes existing memory that has been allocated by IE prior to opening the profiler.
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.
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.