Question: I'm really confused about this. I have a reasonably dynamic page on a test site which uses Bootstrap's carousel (but I'm hoping it's my code, not theirs, that's wrong).

Test page can be found here: <http://bit.ly/ZjLl19>

What you'll notice is as follows...

* The page starts to load
* The staff portraits begin to appear
* Then... **nothing happens for about 5-10 seconds**
* After 5-10 seconds, a carousel appears with staff biographies and larger portraits

Why is there this delay? I've looked in Webkit debugger and I can just see idle time in the timeline whilst `DOMContentLoaded` runs, before anything else happens. Any ideas?

Thanks!

Answer: 
***Points to note:***

1) You paused your carousel on init. This may explain the initial pause. The carousel auto continues to the next slide, showing the subsequent slides after the default delay, [which apparently is 5000ms](http://twitter.github.com/bootstrap/javascript.html#carousel).

```
$('.carousel.paused-by-default').carousel('pause');

```

2) The paused carousel, after the initial pause, displays itself using this code:

```
info = setTimeout(function(){reveal_content();}, 500);

```

3) **[UPDATE - IGNORE FIRST TWO OBSERVATIONS]** 

THE CAROUSEL SEEMS TO BE STARTING FROM SLIDE **-1**. As there is no slide **-1**, the height of the carousel stays at `0px`. The height of the carousel ONLY updates to `560px` AFTER the first slide has completed it's animation. This is why there is no animation for the first slide, and it just seems to *pop* out of nowhere, after the default slide delay of 5000, PLUS additional animation speed of about one second (as mentioned in point #1). To fix this, use both solutions below.

====================================

***Ways that might help you fix the problem:***

1) Add this just before the closing bracket of `$(document).ready()` function, to display the first slide immediately:

```
$('.carousel').carousel(0);

```

2) If previous point did not completely solve the problem, set height of `#mtt-carousel` and `.carousel-inner` to 560px, add this before the previous JS statement in #1.

```
$('#mtt-carousel, .carousel-inner').css('height', '560px');

```

or CSS:

```
#mtt-carousel, .carousel-inner { height: 560px !important; }

```
I would suggest you to do the following :

1. Reduce the size of your images .
2. Combine your css files into one .
3. Combine js files .
4. Gzip css and js files . Compression will drastically improve load time .
5. Minify css and js , removing unwanted space in these files will reduce the size of them.
6. You can take advantage of browser caching by specifying expiry date and age of resources.