I'm using Lighthouse to measure the performance of a web page. The problem is that the results I get are not consistent between the runs.
In ~80% of cases the Lighthouse comes to the conclusion that the page has finished to load seconds before it has (and I can see the whole page rendered). The results are about 90! The resulting screenshots indeed show the loading animation I have on the page
In ~20% of cases Lighthouse is patient enough and waits for the page to load fully. The results of course are around 40. But I can see in the screenshots that the loading animation is replaced with the real content of the page.
I want to understand how to consistently reproduce the proper (2nd case) behaviour of the Lighthouse - can't understand what does it use as a trigger to stop the measurement.
Any ideas?
Related
I've been doing some refactoring on a slow running web application, and managed to reduce the number of requests and the size of the downloads to help improve the situation. Now the loading time is consistently shorter. However, consistently before there was hardly any time elapsed before the last 2 requests. Now consistently there is a gap.
Q1: What do these 'gaps' indicate in Chrome Network view?
Q2: Looking at the screenshots, the DOMContentLoaded time vs. the overall Finish time, are there any conclusions I can draw that could help me optimise further?
Record the page load in the Performance panel. See Get Started With Analyzing Runtime Performance to get the gist of how to use the panel. Understanding the network bottleneck can also help get you oriented.
However, you'll want to press the Reload page button (like Sam does in the "understanding the network bottleneck" video) instead of the Record button to record the page load performance, as the "get started with analyzing runtime performance" instructs you to do.
Once you've got a recording, the Main section shows you all of the main thread activity that occurs while the page is loading. The Network section shows you all of the Network requests. You'll probably be able to visually verify that there's a bunch of JavaScript work going on during the gap that you're seeing in your screenshots.
If it's still not clear to you, post a screenshot of your Performance panel recording and I'll help you decode the results.
We are using xamarin forms with prism. We have simple pages with small amount of data to be displayed on each page and include simple calculations. We are using prism navigation service to navigate between pages. We are experiencing some latency from clicking a button to navigating to next page. Data is fetched inside OnNavigatedTo since navigation parameter changes the data. Can someone shed some light of why is there a latency, it is close 1+ second and sometimes 2 seconds.
Also, it seems like each page is getting rendered twice... Once before OnNaviagatedTo and then data changes. OnProperty or OnCollection changed is fired from within OnNavigatedTo and it seems to cause the rendering again.
Version 6.3.0 introduced the concept of OnNavigatingTo, while OnNavigatedTo has been around for a while. There is a distinct difference between the two. Understanding the order in which things occur should help you create a nicer user experience.
New Page is created
OnNavigatedFrom is called
OnNavigatingTo is called
New Page is pushed onto the Navigation Stack and becomes visible
OnNavigatedTo is called
Applications that have to reach out and fetch data can often experience latency issues because it takes time to reach out to the remote service and get the data we want and then parse that data into a usable object. This particular problem was one in which many developers wanted to cut down the demand on the UI with having to refresh as the bindings were being updated which led to the introduction of OnNavigatingTo.
While neither one will reduce network latency it gives you an ability to make the calling page enter an IsBusy state that may display some sort of loading icon which would then be updated to false when NavigateAsync completes and your new page is displayed already loaded.
One of our web pages has a rendering performance issue, when the page is open, the spinner is freeze or loading very laggy, and after 6-12 seconds the page completes loading. So i'm using the Network's waterfall in chrome dev tool to diagnose the issue. But I got a few scenarios which i don't understand what happened.
In the following screenshots, all the resources for the corresponding page are loaded in a very short time, but the spinner is freeze for 6 seconds or 9 seconds, i'm not sure what is happening after the resources are loaded and before the page completes loading, maybe the spinner is in a wrong thread or gets blocked somehow? What is the means that i should use to find out the cause?
Scenario 1
Scenario 2
UPDATE
Network Screenshot
Timeline Screenshot
UPDATE
After checking the Event Log, i think the issue happens at Angular digest cycle, that endpoint response time should still be 780ms.
Thanks for the detailed info. It'd be more helpful if you can link to the page, but I understand that's often not possible. I'll just provide some general data for people in the same boat. I don't know if I'll be able to completely answer this specific question, though.
In the Scenario 1 and Scenario 2 screenshots you can see that your resources are loading in 1 or 2 seconds. That's your cue that the issue isn't related to the Network.
So while this is a page load issue, it has nothing to do with the network.
In Timeline Screenshot you can see that your CPU usage is completely maxed out from about 1900ms to beyond 16000ms. So your page is forcing the browser to do a tremendous amount of work. This is probably in the JavaScript.
To diagnose this, I'd investigate the flame chart (under Main) which you can see in Timeline Screenshot. The longer the bar, the longer that function is taking to complete. Or, if you see a small function getting called thousands of times, that could be the cause. If you can optimize those calls, then you can get your page visually loaded faster. You can click Self Time header in the UPDATE screenshot to rank the function calls according to which took the most time.
Again, I don't know how helpful this answer is for this particular question, but I thought I'd try to rephrase the problem in a different, more general way.
Can anybody help me understand what the following is telling me in Chrome Dev Tools on the Network tab Timeline? Specifically, what does the gap mean?
During this terribly slow page load the resources display some info on how they are loading up until ~7 seconds or so. This is followed by a large gap. And then near ~13 seconds there is info on the resources loading again.
I've truncated the full list of resources, but the only resource bar that spans the gap, is the first resource for the primary page. It it identifies what is happening in the gap as “Content Download” (the blue bar):
The total resources on the page appear to be around 2.5MB in size. In this example, the DOMContentLoaded and Load events are taking place at the same time near the ~13 second mark.
Chrome starts loading external resources like images or scripts before the page HTML download has finished.
For example, here I've got an image at the top of the page, and then further down in the middle of the HTML a script tag.
This also means that the Load event follows quickly after DOMContentLoaded, because Chrome has already fetched the additional resources.
In your case, there's some JavaScript code that waits for either one of those events and then triggers additional requests.
The reason for the initial 13s load time is that after the waiting time of ~4s it takes another 9s to actually download the whole document.
This could be because the browser's internet connection is poor, or because the server takes a long time to generate the response, or because the server doesn't have enough bandwidth.
I got this website: All things I like and up until recently it was working perfectly. But suddenly it needs 20 seconds to load - I haven't touched the code in that time.
What could be the cause of this? 20 seconds is really long time.
I am using FBML implementation and not IFrame.
Have you checked it on firebug
Well i checked and your total load time was 28.9 seconds. And most noticeable amount of time was spend on waiting for resources (for Fans and likes boxes) from static.ak.fbcdn.net and then getting them.
So there seem to be no problem from your site its the Facebook Server thats taking time in fetching the data and sending it back to your page.
You can still optimize your own resources like backgrounds ets.. i notice a big 100x200 image for header
Super slow with facebook is annoying!
I stumbled across this page looking for a solution - the only one i cant think of (and hence, the one i'm going to enact) is to pre-size the div that the fb stuff will appear in. Page will still load slow, but won't readjust itself after 10 seconds!