Website goes blank for 4 - 5 seconds after initial 6 seconds

Web Performance Discuss Test Results
1

Hi All,

I ran test on my various pages and found a similar pattern.

  1. Page start loading goes upto 50 to 60% visual progress
  2. Page Blanks out for 4 - 6 seconds
  3. Then re-appears with complete content

[attachment=472]

Full Results here
http://www.webpagetest.org/video/compare.php?tests=150122_J0_AT1-r:1-c:0

and

http://www.webpagetest.org/result/150122_J0_AT1/

PS: This is a mobile website and am testing on Android device

Also let me know on what other good things can I do to

  1. Decrease the total time from 10 seconds
  2. First visual comes around 4 seconds - how to improve this
  3. I am using Jquery and it has too many js files that I need to add on all my pages. Even though I am using Compression (gzip) and Caching, it is still taking too much size and number of files - how can I reduce this to improve the overall performance

Any other major/minor flaws that can be pointed out?

I would really appreciate help.

Regards
Vinit

2

Hard to say for sure, there is a LOT of Google ad code running at that time and your jquery code also runs around that time.

My guess is whatever JS framework you are using to draw the UI is at fault.

Something in js is handling drawing/moving the UI and it looks like it may wait to display until all of the images have loaded.

3

To answer your “how to improve” questions…

1 - The page doesn’t look visually complicated and shouldn’t require JS for the drawing. You should use plain html and css for laying out the page and then use js to add functionality as needed.

2 - Consider inlining the above-the-fold thumbnails as data URIs and lazy-load the other images. It looks like the thumbnails are all small (~3KB) and that would get them delivered a lot faster. That comes at the cost of being cacheable though so you’ll have to weigh that a bit.

3 - Take a look at how the ad code is implemented. There seems to be a lot of it and if you speed up everything else it will still push out your actual load times.

4

Thanks Patrick - I have the issue and resolved it
Issue was that in order to improve the PLT, I had put async on all js files and it was causing the issue.

The moment, I had removed the async there is no more dip in the visibility or the blank screen