Start Render - will my change show here?

Web Performance Discuss Test Results
1

Hi guys,

I have a client site in production that has a ton of JS in its 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?

2

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.

3

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’.

4

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.php?tests=140210_KC_MY1%2C140210_3F_MZ2&thumbSize=200&ival=100&end=visual

or as a video: http://www.webpagetest.org/video/view.php?id=140210_4fbc03c113b63e6776175a34f560ae38f819093b

If you mean from real users through analytics then you’ll need to instrument the site like this: Performance Matters: Measuring performance of the user experience

5

Synthetic. I’m using the videos as well, but management likes their numbers. 8^)
[hr]

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

6

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.