Website fast in Firefox, Mediocre in Internet Explorer and slow in Google Chrome

Question

As the title suggests, my website works how I want it to work in Firefox: when I use arrow down, it doesn't flicker. But this functionality isn't such in IE and Chrome. Is there a resolution to this? The website is as follows: Contrabang. Thank you advance for your help.

HTML is as follows:

            <section class="main">

             <div class="icons">
              <a class="twitter" target="_blank" href="http://www.twitter.com/kadeemlaurie"></a>
              <a class="facebook" target="_blank" href="http://www.facebook.com/pages/Contrabang/127379984089682"></a>
              <a class="googleplus" target="_blank" href="http://googleplus.com/pages"></a>
             </div>

            <div id="wrap">
              <div id="featured">
                <div class="wrap">
                  <div class="textwidget">
                    <div class="cup">
                      <img src="../Contrabang/img/red-cup.png" height="200" alt="red-cup">
                    </div>
                  </div>
                </div>
              </div>

              <div id="theFixed"><h1>CONTRABANG</a></h1></div>

            <div class="bg1">

              <hgroup class="billboard second">
                <h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
             We are an events management agency based in London. We create memorable experiences. Check out our upcoming event.</h2>

            </hgroup>

            <br>
            <br>
            <br>

            <div class="pad">
             <a href="events"> <img src="../Contrabang/img/Contrabang.jpg"  width="300" height="400" alt="contrabang"></a>
            </div>
                <h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
             Buy Tickets: 07949747971</h2>
            </div>


            </div>

            </section>

& the main CSS

                  .main{text-align:center;}

                  #featured {
                    background: #E94F78 url(http://www.contrabang.com/Contrabang/img/bubbles.png) no-repeat top;

                    background-size: 385px 465px;
                    color: #fff;
                    height: 535px;
                    overflow: hidden;
                    position: relative;
                    z-index: -2;
                  }


                  #featured .wrap {
                    overflow: hidden;
                    clear: both;
                    padding: 70px 0 30px;
                    position: fixed;
                    z-index: -1;
                    width: 100%;
                  }


                  #featured .wrap .widget {
                    width: 80%;
                    max-width: 1040px;
                    margin: 0 auto;
                  }

                  .textwidget{
                    padding: 0;
                  }


                  #wrap {
                    margin: 0 auto;
                    padding: 0;
                  }

                  .cup{

                    margin-top:210px;
                  }


                  body, h1, h2, h3, p {
                    margin: 0; 
                    padding: 0;
                  }

                  a { 
                    text-decoration: none;

                  }

                  a img { border: 0; }


                  #theFixed{
                    position:fixed;
                    background-image:url(http://www.contrabang.com/Contrabang/img/leopard-print.jpg);
                    width:100%;
                    text-align:center;
                    overflow: hidden;
                    background-position: center;

                  }


                  h1{
                    font: 800 1.313em "proxima-nova", sans-serif;
                    font-size:3.125em;
                    text-align:center;
                    padding:10px 10px;
                    margin:20px 20px;
                    background-color:#E94F78;
                    padding-left: 0.15em;
                    text-decoration:none;
                    display:inline-block;
                    letter-spacing: 6px;
                    padding-left: 0.15em;
                    color:yellow;

                  }

                  h1 a{
                    text-decoration: none;
                    letter-spacing: 8px;
                    padding-left: 0.15em;
                    color:yellow;

                  }

                  .bg1{
                  background-image:url(http://www.contrabang.com/Contrabang/img/grey-background.jpg);
                    width: 100%;
                    height:900px;

                    background-color: #e94f78;}

                  h2{

                  font-family: georgia;
                  font-size:3em;
                    color:black;
                  }


                  .billboard {
                    overflow: hidden;
                    width: 960px;
                    margin-left: auto;
                    margin-right: auto;
                      text-align: center;
                  }

                  .pad{
                    padding:20px;
                  }


                  .billboard a {
                    color: #000000;   
                  }


                  .billboard {
                    padding-top:230px;
                  }

Answer 1

That Rita Ora image is almost 4mb in size. I'd hazard a guess that that's your culprit right there.

I'd suggest doing some reading up on optimising images for use on the web.

That image should be about 30/40k at most.