Okay, I'm trying to detect a reason for a slow loading of a website page using network tab in chrome devtools. In my past experience there always were some large files or slow links to 3rd party sources, but now I'm in total confusion because for a large amount of time there is no downloads at all:
screenshot of network tab
What is also strange is than for a last second there is a file with a size less than 1 kilobyte and it's loading for half of a second, although it's not a main issue here.
Try using the Performance panel instead. My guess is that your page is running a lot of JavaScript during the "large chunk of no activity".
Open the Performance panel and click Reload.
If you see a wall of yellow activity in the CPU chart, it means that your CPU was completely busy running JavaScript.
(source: google.com)
The Audits panel is the best tool in DevTools for learning how to improve your page load speed. It runs a bunch of tests on whatever page you've got open and gives you tips on how to speed up the page. Check out Optimize Website Speed.
Related
NB: since the answer to this could involve JavaScript or PHP programming, or general networking, or IT systems, I put it here, but if some mod thinks it's better suited for SuperUser or ServerFault, I won't object to it being moved.
I have a landing page to which I'm driving traffic through PPC. I've set up AWS CloudWatch to get RUM data, and the page is performing terribly — an average load time of 9.9s and max of 21.5!
I've done all of the "standard" optimization I can think of or research. The site is built with WordPress, running on Apache on an EC2 server. I've
Upgraded the EC2 instance to ensure I have enough memory
Written a custom plugin to filter out any other plugins that aren't explicitly used on the landing page in question
Customised my theme code so that it sets proper srcset and creates the correct image sizes on upload
Minified all the JS and CSS that I include through plugins or themes I've written
Put the site itself as a distribution to CloudFront
Installed the WP Super Cache plugin, and created a separate CDN distribution on CloudFront for it
Set appropriate cache control headers on CloudFront and told it to gzip everything
Put a facade in place of any videos
The site is blazing fast for me — "load" is less than 1 second. But my RUM says that's not the case for my users. So, I dug a little deeper. 70.2% of my visitors use Chrome, and 27.7% use other, of which almost 1/3rd are Android Browser — which as I understand it is just some sort of "Chrome Lite" — so nearly 80% of my visitors are using some Chrome variant.
Sure enough — if I load the page on Safari (to ensure nothing has expired on CloudFront), clear my browser cache, and reload the page, the first request shows a waiting time of 21.2ms, TTFB of 22.6ms, and download time of 4.8ms. The whole page shows that it's finished loading in 973ms.
Firefox is slightly slower, with the first request taking 100ms total, and the whole load about 1.75s — not blazing fast, but still within the understood "2 second" limit for good user experience.
On the other hand, for Chrome that same first request takes almost 570ms waiting and 208ms download. So, just the first request (which is 36k in size) takes almost as long to load in Chrome as the whole site takes in Safari. And that repeats for every single request, where both the waiting time and the download time are an order of magnitude slower on Chrome than on Safari (on the same device on the same network):
Whereas on Safari:
I would think "waiting" and "download" times would be primarily network driven, but I can repeat this all day long and the results are the same.
I might just assume that Chrome is not optimized for the Mac on which I'm running it, but, as I said, this all started with RUM data, so it's clearly not that. As much as I might like to, I obviously can't force all of my visitors to swap their Android devices for iPhones. Equally obviously, I can't have an average load time of 10 seconds.
So, why is my site so slow on Chrome? What else can I do to optimize this?
The landing page in question is here: https://www.chrisrichardson.info/lp/prague-b/
Note, a lot of the optimization I've done is for that page in particular, so other pages on the site might perform even worse, but I don't care about that, at least at the moment.
Hahahaha.
OK, just leaving this here for posterity's sake. The 10x latency was because Chrome had preserved in devtools from a previous session throttling to 3G. So, if you stumble upon this problem, check your throttling.
That still doesn't address my RUM issue, however, but I'll open that up as a different question.
I'm trying to find the source of some "idle" time within a certain page I'm accessing on our system. The problem is weird though to me, as I cant tell the reason for the delay. I'm running this in a single instance of chrome, no other tabs or anything.
The initial load time looks like this:
So it takes a while. But if I refresh this page within 7-8 seconds it will come back really quickly.
I initially though it was a system process on our end and ran Yii's profiler which came back with:
So, it seemed to be a non "system" issue, so went to Chrome's dev tools and the profile comes back with this:
I've read the other question What causes Chrome Timeline Frame to have so much empty white space also.
I'm trying to understanding if it's possible to identify the problem at all and why the page is rendered quickly if the page is refreshed after a few seconds of loading and why it takes so long if the refesh is called after 7-8 seconds of the initial load?
nb Some of the times might not match up as I've run the various profilers a few times. So they might apply to different page refreshes. But you can see the general trend :)
I am trying to make the page speed as fast as possible. The problem is that I have one file in particular that takes a long time to download (even if the size is 0 -> loaded from cache)
Here is how it looks without cache (first load):
And with cache:
I agree that the time has dropped by almost 50%, but why do I have a Content Download time from my local cache higher than the one from the server?
NOTE:
I am not sure if the times are explained the same in Safari, but it doesn't seem to take that long to get the file there.
Image from Safari Network tab:
After running tests on several projects and without any code or further breakdown of the content downloaded processes, here is the conclusion I've reached.
System threads set a priority level for each process they are assigned. When a file is stored in the cache then the download performance is, for the most part, dependent on the performance of the machine. If threads are bogged down then it can result in a slower content download than a download from a server. However, a download from a server is typically slower because of all of the processes involved in contacting, requesting, receiving and handling the download.
The advantage of cache is easily seen when handling slow connections and/or large files. For example, if there's 10+ seconds of waiting due to a slow connection then it's not ideal to load the full page more than once. It would take an incredibly slow system to justify sending that page twice.
Since browser cache removes the send/receive process, it is faster but it doesn't remove load times entirely. In this case, it happens to yield a higher load time in one category.
Side note: It seems odd to classify a file as content downloaded when reading it from the cache but it seems to be consistent amongst all of the projects I tested.
I am trying to find the bottle neck in this site here. Granted, there is not much on the page now, but I will be uploading nearly 300 images to this site in the coming week which I expect to take a toll on speed and performance. Therefore, I want to cut down on everything other than image loading as much as possible.
I've attached an image which shows what I'm seeing in SpeedTracer, but the data makes no sense to me. The page loaded in around 4 seconds, yet each of these blue bars is claiming to have taken ~ 3.5 seconds to load. How can this be?
Could someone try to provide me with some explanation as to what I'm looking at here?
Thanks,
Evan
What you're looking at is a waterfall of the page and it's resources loading...
Each row represents an individual resource, and show's when it started loading and how long it took.
Browsers can download resources in parallel - Chrome can download up to six resources from the same hostname e.g. www.nanisolutions.com, at the same time. It can also download up to six resources from every other hostname at the same time (up to maximum of 40 connections)
Quite why you screen grab shows the request for the root HTML document starting after some of the items I'm not sure but I'm wondering if you are on the same network as the webserver?
I'd be tempted to run the same test using webpagetest.org
I have a background thread(web worker) fetching heavy images from server and writing them to the file system synchronously.
At the same time, user needs to scroll through images which have been written already into the file system. So each time a scroll event is fired, a file is read from the file system asynchronously and displayed in the canvas. This process generates simultaneous reads and writes if a user scrolls through multiple images at once and hence causes the browser to hang and eventually crash. How can I be able to accomplish this without getting the browser to hang?
Please note: this is a wild guess on what is happening, one can never be 100% sure without knowing what actually your code does.
Chances are, your approach requires a lot of JS heap memory (e.g. you never cache images already read but re-read them discarding previous data.) Hangs may result from multiple full GC's in V8, and the eventual crash results from V8 running out of memory.
I suggest that you use Chrome Developer Tools' (Ctrl+Shift+I) Profiles panel and take a few heap snapshots before the tab crashes. Then you can compare them (the right SELECT in the bottom status bar, choose "Objects allocated between Snapshots 1 and 2") to see the if this hypothesis is right or not.