Current time: 12-16-2017, 03:28 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Start Render Time
06-13-2010, 07:37 AM (This post was last modified: 06-13-2010 07:38 AM by jarrod1937.)
Post: #1
Start Render Time
I've been doing a complete site redesign for an ecommerce site with the main goal being speed. Now, considering a lot of the load time for such a site is spent loading images and where 90% of it is offscreen rendering, i feel the start render time is the most important figure next to completion time.
However, i am at a loss as to why my start render time is so high. I just tested and i found the current live site has a start render time that is on average 300 ms faster than the new site design! But i am not sure why this is, considering the new site is structured a lot better than the old site, yet the start render is triggered later...
http://www.webpagetest.org/result/100612...1/details/

There is a test of the new site running. As you can see, the contents of the html and the css is downloaded long before the start render is triggered. But why is that so? Shouldn't the browser only need the html source and css to start rendering? The only other items that follow are product images, which should have no basis on the start render time.
So anyone have any ideas?
Thanks
Find all posts by this user
Quote this message in a reply
06-13-2010, 07:55 AM
Post: #2
RE: Start Render Time
I'd take a look at your javascript. Do you have any inline? It looks like the CPU spikes ~1.1 seconds and stays really busy for quite a while. If I had to guess I'd say that was what was causing the render start to be delayed.

Dynatrace Ajax Edition is a really good profiler for javascript in IE.

I don't have time to look right now but I'll look a bit closer later this evening.

-Pat
Visit this user's website Find all posts by this user
Quote this message in a reply
06-13-2010, 08:05 AM (This post was last modified: 06-13-2010 08:29 AM by jarrod1937.)
Post: #3
RE: Start Render Time
Thanks, a closer look would be appreciated. But no, i have no inline javascript in the html source other than a quick check to see if jquery has been loaded or not, but that should only be executing if the browser is IE 6. So i am not sure where that spike is coming from.

Edit: Keep in mind when checking it out further that the page link for the test will only lead you to the old site. This test was done as a scripted test that pointed it to our test server. If you want the exact test server ip i can pm it to you.

Edit2: For a test i completely removed the entire IE conditional chunk of code, it had no affect on the start render time, so thats not the cause.
Find all posts by this user
Quote this message in a reply
06-15-2010, 05:07 AM
Post: #4
RE: Start Render Time
Keep in mind the fact that the start render time is affected by server side latency. I'm not sure if you are serving static HTML, but in the off chance that you are rewriting your URLs and there is some server on the back end doing the crunching that could affect the start render time. Especially if you are on a dev box and the server is less powerful. You have a relatively long Time To First Byte if this is just static HTML, so either it's your server or the network I would guess.
Visit this user's website Find all posts by this user
Quote this message in a reply
06-15-2010, 05:55 AM (This post was last modified: 06-15-2010 06:00 AM by jarrod1937.)
Post: #5
RE: Start Render Time
(06-15-2010 05:07 AM)jklein Wrote:  Keep in mind the fact that the start render time is affected by server side latency. I'm not sure if you are serving static HTML, but in the off chance that you are rewriting your URLs and there is some server on the back end doing the crunching that could affect the start render time. Especially if you are on a dev box and the server is less powerful. You have a relatively long Time To First Byte if this is just static HTML, so either it's your server or the network I would guess.
How can the server side latency affect the start render time after the html and css has been completely downloaded? I understand server side latency may contribute to things such as time to first byte, but how would the url rewriting affect the start render time at the point when it has already downloaded the html and css? I ask because the url rewrite by definition is processed before the html can be downloaded and thus is part of the time to first byte time. However, if you look at the test output you can see the html and css are completely downloaded about 500 ms before the start render time kicks in, and all http requests after those two elements and before the start render time are product images, which should have no affect themselves on the start render time.
So, to be clear, i am wondering why there is a 500 ms delay between the html and css downloading, and completion, and the actual start of the rendering.
As a side note, i am using a duplicate account on one of our live servers. We have two servers for load balancing (using the least connection method for balancing) and failover, so the performance shown by the test will show the real world performance pretty accurately.
Find all posts by this user
Quote this message in a reply
06-15-2010, 07:17 AM
Post: #6
RE: Start Render Time
I could be wrong, but my understanding is that the start render time is a fixed point in time that is measuring from the initial request - this means that if your server latency goes up by 1 second your start render time will go up by one second.

In other words, the request is made at T = 0, maybe the server finishes crunching at T = 0.6, the JS/CSS downloads finish at T = 1.5, and thus the start render time is listed at T = 1.5, or 1.5 seconds. I would imagine that the start render time you are seeing (1.485s) includes the TTFB.

Your question is valid though, if you are seeing a 500ms delay between the end of the HTML download and the start of the render that wasn't there before then that is a problem. Unfortunately without access to the site or to a waterfall chart from the original site it is difficult to do further troubleshooting. Usually this kind of delay shows up because of JavaScript, but you say you don't have any inline JS and the only external request is much farther down the page. I think the bottom line is that we need access to the code in order to troubleshoot further.
Visit this user's website Find all posts by this user
Quote this message in a reply
06-15-2010, 07:37 AM (This post was last modified: 06-15-2010 07:48 AM by jarrod1937.)
Post: #7
RE: Start Render Time
(06-15-2010 07:17 AM)jklein Wrote:  I could be wrong, but my understanding is that the start render time is a fixed point in time that is measuring from the initial request - this means that if your server latency goes up by 1 second your start render time will go up by one second.

In other words, the request is made at T = 0, maybe the server finishes crunching at T = 0.6, the JS/CSS downloads finish at T = 1.5, and thus the start render time is listed at T = 1.5, or 1.5 seconds. I would imagine that the start render time you are seeing (1.485s) includes the TTFB.

Your question is valid though, if you are seeing a 500ms delay between the end of the HTML download and the start of the render that wasn't there before then that is a problem. Unfortunately without access to the site or to a waterfall chart from the original site it is difficult to do further troubleshooting. Usually this kind of delay shows up because of JavaScript, but you say you don't have any inline JS and the only external request is much farther down the page. I think the bottom line is that we need access to the code in order to troubleshoot further.
Yeah, we may have to wait for pmeenan's word on this one, but when i read the "content download" figures and their associated times, i interpret that as this file took this much time to download. So, if you read the waterfall that way it means that both the html and css have been requested (which includes the time to first byte) and downloaded fully by around 900 ms. Aka:
HTML: dns lookup is 54 ms, the initial connection is 89 ms, the time to first byte (mostly server processing) is 466 ms, and the content download for it is 144 ms
CSS: the intial connection is 137 ms, the time to first byte is 211 ms and the time to download it is 2ms.
Which means that at 900 ms to 1453 ms i don't know what its doing, as at that point in time server latency should have no affect for the basic rendering of the html structure and its css styles. But who knows.

Quote:Usually this kind of delay shows up because of JavaScript, but you say you don't have any inline JS and the only external request is much farther down the page.
Yes quite true. And just to make sure i did a test without any external javascript and it still had pretty much the same start render time
Find all posts by this user
Quote this message in a reply
06-15-2010, 07:40 AM
Post: #8
RE: Start Render Time
Yes, if you don't get any html back from the server, nothing to render :-)

In this case I got a look at the test site and it looks like it is a nested table structure to do the site layout (and a non-fixed table layout) so the CPU spiking and likely the start render delays are because of the browser calculating and re-calculating the layout. Moving to more of a div-based layout (except for where it is really a table) will help significantly and if at all possible, moving to a fixed table layout with deminsions all specified will also help.

Run a video test and you'll see the table layout changing as the page loads too so a fixed layout will yield a much better user experience.
Visit this user's website Find all posts by this user
Quote this message in a reply
06-15-2010, 07:43 AM
Post: #9
RE: Start Render Time
The start render time is actually the time the browser draws the first bit of content to the screen (it's not calculated, it is done by hooking the drawing API's and waiting for the browser to draw something that isn't a white background).

By definition the browser can't render anything until it has received something from the server so TTFB on the base page is critical to start render but not the only contributor. It needs to completely parse the head and then calculate the layout before anything can show up on the screen.
Visit this user's website Find all posts by this user
Quote this message in a reply
06-15-2010, 07:52 AM
Post: #10
RE: Start Render Time
Oh ok, that makes sense then. I will experiment with a div based layout and see how that affects the render time. The table based layout is whats leftover from the old site structure, sense it fit well enough into the new one i didn't see a need to change it, but an improvement to the render time is a definitely a good reason. Thanks again for the help!
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)