decrease time of jQuery slider

Question

I did not use any plugin to make a simple transition between Divs, because it was not to be anything too complicated and did not want to overload the page with several plugins, but in my script the slider takes too long to start initializing, is there a way to decrease this time? I am using a function setInterval but I could not make this slider run faster, follow the page link with the slider on the right side http://bit.ly/1gXSuO8

and down the JS:

$(document).ready(function(){
  $(function(){
      $('div.fios-cobre div.slide:gt(0)').hide();
      setInterval(function(){
        $('div.fios-cobre div.slide:first-child').fadeOut()
           .next('.slide').fadeIn()
           .end().appendTo('div.fios-cobre');},
       5000);
  });
});

the HTML:

<div class="fios-cobre">

      <div class="slide">
         <div id="first-content">
            <div class="texto">
               <ul class="texto-balao">
                  <li>
                     <h1 class="text-rotate" id="text-1">Extinflan</h1>
                  </li>
                  <li class="separador"></li>
                  <li>São recomendados para instalações internas de baixa tensão (residenciais, comerciais)</li>
                  <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
               </ul>
            </div>
            <div class="imagem">
               <img src="{{ asset('assets/img/box-extinflan.png') }}" alt="" id="img-1">
               <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
            </div>
         </div>
         <!-- /#first-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="second-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">Fios e cabos de Cobre nú</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para instalações de linhas aéreas para transmissão de energia elétrica.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-fio-cobre-nu.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#second-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="third-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASFLEX</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para instalações em equipamentos elétricos, móveis ou fixos.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brasflex.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#third-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="fourth-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASCORD</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para ligações de aparelhos de iluminação e de baixa potência.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brascord.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#fourth-content -->
      </div>
      <!-- /.slide -->

      <div class="slide">
         <div id="fifth-content">
            <div class="texto">
                  <ul class="texto-balao">
                     <li>
                        <h1 class="text-rotate" id="text-1">BRASCORD 90 FLEX</h1>
                     </li>
                     <li class="separador"></li>
                     <li>São recomendados para ligações dos eletrodos em equipamentos de solda elétrica.</li>
                     <li><a href="{{ route('produtos') }}"><img src="{{ asset('assets/img/saiba-mais.png') }}" alt=""></a></li>
                  </ul>
               </div>
               <div class="imagem">
                  <img src="{{ asset('assets/img/box-brasolda-90-flex.png') }}" alt="" id="img-1">
                  <img src="{{ asset('assets/img/cabo-hepr-flex-home-image.png') }}" alt="" id="img-2" style="display: none;">
               </div>
         </div>
         <!-- /#fifth-content -->
      </div>
      <!-- /.slide -->

   </div>
   <!-- /.fios-cobre -->

Answer 1

In your javascript, decrease function time setInterval

$(document).ready(function(){
$(function(){
  $('div.fios-cobre div.slide:gt(0)').hide();
  setInterval(function(){
    $('div.fios-cobre div.slide:first-child').fadeOut()
       .next('.slide').fadeIn()
       .end().appendTo('div.fios-cobre');},
   3000); // <-- Mude aqui. Agora está em 3 segundos.
});
});

Answer 2

In this case as delay to load, that is, only when the document is ready (ready) that the function is executed. You really need to know if it’s the function or if it’s the whole set, many functions before or many dynamic elements can cause that slowness.

I think of some scenarios:

1. Check whether your(s) component(s) searches for content in external links.
2. Try to put the slide component alone on a page and see if the problem persists, so you confirm whether it is the actual component or something else.
3. Use Document "Load" and not "Ready" - which is not recommended.
4. The most professional way would be to analyze using Chromedevtools (F12/cmd+shift+c on mac).

Using TIMELINE from Chromedevtools:

Recording the initial load of a page (page load):

1. Open your page on Chrome
2. Open the Devtools
3. In the Timeline tab use Cmd+E(Mac) or Ctrl+E (Win/Linux) to start recording.
4. Quickly press Cmd+R or Ctrl+R to refresh the page.
5. Stop the recording then.

You should get a result similar to this:

That way you can know what and when it was loaded on the page.

I already tell you that I did a superficial analysis and when it arrives in 8s inside your page has a PEAK loading script mainly with a file niceScroll.js. Take a look there.

Good luck!