WebPageTest

comforteagle · (This post was last modified: 02-09-2014 01:02 AM by comforteagle.)

Hi guys,

I have a client site in production that has a ton of JS in its <head> tags. I'm moving the JS to the bottom of the html (not post loaded).

When this change takes effect should it show a decreased Start Render time?

I visually see the change, but want a way to show the people around me the change with numbers before and after.

Thoughts?

***pmeenan*** · 02-09-2014, 05:04 AM

Is it external or inline js? In general it should get a LOT faster but that's assuming the UI didn't depend on the js. The easiest way to show it is to run a test with video capture enabled of before and after and then create a side-by-side video of it (go to the test history, check the compare boxes for the tests you want to compare and hit the button).

Before doing the work an easy way to see what the payoff will look like would be to block the js files in question which will prevent them from loading and should give you a good idea.

comforteagle · 02-09-2014, 11:04 AM

(02-09-2014 05:04 AM)pmeenan Wrote: Is it external or inline js? In general it should get a LOT faster but that's assuming the UI didn't depend on the js. The easiest way to show it is to run a test with video capture enabled of before and after and then create a side-by-side video of it (go to the test history, check the compare boxes for the tests you want to compare and hit the button).

Before doing the work an easy way to see what the payoff will look like would be to block the js files in question which will prevent them from loading and should give you a good idea.

I've blocked the JS. It is definitely faster. I'm looking for a way to show a number from external sources at production.... that's why I ask about 'Start Render'.

***pmeenan*** · 02-11-2014, 01:52 AM

Are you looking for synthetic results like on WebPagetest that you can show on production or do you mean with real-user analytics?

For a demo this is the kind of presentation I was talking about: http://www.webpagetest.org/video/compare...end=visual

or as a video: http://www.webpagetest.org/video/view.ph...38f819093b

If you mean from real users through analytics then you'll need to instrument the site like this: http://blog.patrickmeenan.com/2013/07/me...ience.html

comforteagle · (This post was last modified: 02-11-2014 05:24 AM by comforteagle.)

(02-11-2014 01:52 AM)pmeenan Wrote: Are you looking for synthetic results like on WebPagetest that you can show on production or do you mean with real-user analytics?

For a demo this is the kind of presentation I was talking about: http://www.webpagetest.org/video/compare...end=visual

or as a video: http://www.webpagetest.org/video/view.ph...38f819093b

If you mean from real users through analytics then you'll need to instrument the site like this: http://blog.patrickmeenan.com/2013/07/me...ience.html

Synthetic. I'm using the videos as well, but management likes their numbers. 8^)

(02-11-2014 01:52 AM)pmeenan Wrote: For a demo this is the kind of presentation I was talking about: http://www.webpagetest.org/video/compare...end=visual

or as a video: http://www.webpagetest.org/video/view.ph...38f819093b

Ohhh how did you do that video comparison? That's interesting too.

***pmeenan*** · 02-11-2014, 07:48 AM

To do a comparison you just need the test ID's for the individual runs you want to compare. The filmstrip view has a "advanced customization options" link above the waterfall that explains the URL structure (basically just a comma-separated list of tests).

The UI-way to do the comparison is to go into the test history and check the comparison box on the different tests you want to compare.

From the filmstrip comparison page there's a "create video" button that creates the brady-bunch videos.