Website loads slowly! Is it because of my CSS?

Question

I have no idea why but my website loads slow... I suspect there is an issue with my .css because when I removed background url from .css for the logo and used index.html you can see it loads quickly now (logo only)

here is my website url

http://michaelor.com/wedding/

here is my main.css file

@font-face {
    font-family: 'ArvoRegular';
    src: url('../fonts/Arvo-Regular-webfont.eot');
    src: url('../fonts/Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Regular-webfont.woff') format('woff'),
         url('../fonts/Arvo-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Regular-webfont.svg#ArvoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArvoItalic';
    src: url('../fonts/Arvo-Italic-webfont.eot');
    src: url('../fonts/Arvo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Italic-webfont.woff') format('woff'),
         url('../fonts/Arvo-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Italic-webfont.svg#ArvoItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArvoBold';
    src: url('../fonts/Arvo-Bold-webfont.eot');
    src: url('../fonts/Arvo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-Bold-webfont.woff') format('woff'),
         url('../fonts/Arvo-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-Bold-webfont.svg#ArvoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArvoBoldItalic';
    src: url('../fonts/Arvo-BoldItalic-webfont.eot');
    src: url('../fonts/Arvo-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arvo-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/Arvo-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/Arvo-BoldItalic-webfont.svg#ArvoBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

a {
text-decoration: none;
}

p {
font-size: 13px;
color: #765f3c;

line-height: 24px;
}

html {
text-shadow: 1px 1px 0px #eae6d7;
filter: dropshadow(color=#eae6d7, offx=1, offy=1); 
 font-family: 'ArvoRegular';
 font-weight: normal;
 font-style: normal;
 background-image: url(../images/background.jpg);
background-repeat: repeat;
}

.header {
background-image: url(../images/menu_bg.png);
background-repeat: repeat-x;
position: relative;
z-index: 999;
}

.header ul {
list-style: none;
}

.header ul li {
text-shadow: 1px 1px 0px #100e0d;
filter: dropshadow(color=#100e0d, offx=1, offy=1);
float: left;
font-size: 14px;
padding-right: 25px;
padding-left: 25px;
padding-top:18px;
padding-bottom: 22px;
/* Firefox */
    -moz-transition: all 0.3s ease-out;
    /* WebKit */
    -webkit-transition: all 0.3s ease-out;
    /* Opera */
    -o-transition: all 0.3s ease-out;
    /* Standard */
    transition: all 0.3s ease-out;
}

.header ul li:hover {
border-bottom: 5px solid #FFCCFF;
background-color: #262322;
}

.header ul li a {
color: #FFFFFF;
}

#navleft {
float: left;
width: 320px;
}

#navright {
float: right;
width: 259px;

}

.logo img {
/* background-image: url(../images/logo_bg.png); */
background-repeat: no-repeat;
/* padding-right: 50px; */
/* padding-left: 48px; */
/* padding-top: 10px; */
padding-bottom: 12px;
}

.container_h{
background-image: url(../images/center_bg.png);
background-repeat: repeat;
margin-top: -25px;
}

.content_h {
background-image: url(../images/shadow_sl.png);
height: 115px;
background-repeat: no-repeat;
}

.content_bottom {
background-image: url(../images/bottom_bg.png);
background-repeat: no-repeat;
height: 93px;
margin-bottom: 30px;
}

.container_h h2 {
color: #ac3131;
font-size: 18px;
font-weight: normal;
font-style: normal;
margin-bottom: 20px;
}

.box2 h1 {
text-align: center;
color: #fff;
margin-bottom: 20px;
font-size: 18px;

font-weight: normal;
font-style: normal;
}

.box {
float: left;
margin-left: 20px;
margin-right: 20px;
width: 280px;
}


.box img {
float: left;
margin-right: 20px;
margin-bottom: 30px;
border: 5px solid #ccba9e;
}

.box p {
margin-top: 10px;
}

.box a {
color: #5d412f;
}

.box2 {
text-shadow: 1px 1px 0px #6d1212;
filter: dropshadow(color=#6d1212, offx=1, offy=1); 
float: left;
margin-left: 30px;
margin-right: 30px;
width: 260px;
}

.box2 p {
color: #e5a9a9;
text-align: justify;
}

.box3 {
margin-left: 20px;
margin-right: 20px;
float: left;
width: 280px;
}

.box3 ul {
list-style: none;
float: left;
margin-top: 20px;
}

.box3 ul li {
float: left;
margin-right: 10px;
}

.box3 ul li:last-child {
float: left;
margin-right: 0px;
}

.box3 ul li img {
border: 5px solid #ccba9e;
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.box3 ul li img:hover {
margin-top: -10px;
}

.container {
background-image: url(../images/paper_bg.png);
background-repeat: repeat;
margin-top: 20px;
margin-bottom: 40px;
-webkit-box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 0.1); 
}

.blog_post {
margin-top: 30px;
margin-left: 40px;

}

.post_info {
clear: both;
margin-top: 10px;
background-image: url(../images/bpaper.png);
background-repeat: repeat;
height: 35px;
margin-bottom: 10px;
}

.post_thumb {
border: 5px solid #ccba9e;
margin-top: 10px;
margin-bottom: 10px;
/* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: .3s;
        -moz-transition-delay: .1s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: .3s;
        -webkit-transition-delay: .1s;
        /* Opera */
        -o-transition-property: opacity;
        -o-transition-duration: .3s;
        -o-transition-delay: .1s;
        /* Standard */
        transition-property: opacity;
        transition-duration: .3s;
        transition-delay: .1s;
}

.post_thumb:hover {
opacity: 0.8;

}

.post_info ul {
list-style: none;
margin-left: 20px;
color: #765f3c;
font-size: 13px;
}

.post_info li {
margin-top: 10px;
float:right;
margin-right: 20px;
}

.blog_post .title {
font-size: 18px;
color: #ac3131;
font-family: 'ArvoRegular';
font-weight: normal;
font-style: normal;
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.title:hover {
margin-left: 10px;
}


.blog_post p {
margin-bottom: 20px;
}

.post_info li:first-child {
float:left;
}

.button {
clear: both;
background-color: #ac3131;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
font-size: 13px;
color: #6c1a1a;
padding-left: 10px;
margin-top: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
border: 1px solid #ac3131;
background: #c74747; /* Old browsers */
background: -moz-linear-gradient(top,  #c74747 0%, #ad3232 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c74747), color-stop(100%,#ad3232)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* IE10+ */
background: linear-gradient(top,  #c74747 0%,#ad3232 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74747', endColorstr='#ad3232',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #d14e4e;
-webkit-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
-moz-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
box-shadow: inset 0px 1px 0px 0px #dc5e5e;
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.button:hover {
margin-top: -10px;
}

.pagenav {
margin-left: 40px;

}

.pagenav ul {
display: inline;
float: left;
font-size: 13px;
list-style: none;
margin-top: 50px;
color: #846f4d;
}

.pagenav li a {
color: #846f4d;
}

.pagenav ul .activepage {
background-color: #ac3131;
border: 1px solid #ac3131;
color: #6c1a1a;
padding: 5px 10px 5px 10px;
background: #c74747; /* Old browsers */
background: -moz-linear-gradient(top,  #c74747 0%, #ad3232 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c74747), color-stop(100%,#ad3232)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* IE10+ */
background: linear-gradient(top,  #c74747 0%,#ad3232 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74747', endColorstr='#ad3232',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #d14e4e;
-webkit-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
-moz-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
box-shadow: inset 0px 1px 0px 0px #dc5e5e;
}

.pagenav ul .activepage a {
color: #6c1a1a;
}

.pagenav li {
padding: 5px 10px 5px 10px;
background: #ecdccb;
color: #846f4d;
float: left;
border: 1px solid #e2cab5;
margin-right: 5px;
}

.sidebar {
background-image: url(../images/sidebar_bg.png);
background-repeat: repeat;
padding-right: 20px;

text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}

.s1 {
height: 980px;
}

.s2 {
height: 1400px;
}

.widget {
margin-top: 30px;
}

.blog_categories ul li {
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.blog_categories ul li:hover {
margin-left: 10px;
}

.latest_posts ul li {
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.button {
-webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.button:hover {
margin-left: 20px;
}

.latest_posts  ul li:hover {
margin-left: 10px;
}


.widget h2 {
text-shadow: 1px 1px 0px #b91e1e;
color: #4c0e0e;
background-image: url(../images/widget_title.png);
background-repeat: no-repeat;
padding-top:    10px;
padding-left: 20px;
font-family: 'ArvoRegular';
font-weight: normal;
font-size: 16px;
font-style: normal;
padding-bottom: 30px;
}

.widget ul {
margin-left: 20px;
font-size: 13px;
color: #938d83;
list-style: none;
line-height: 24px;
}

.widget a {
color: #938d83;
}


.widget_gallery img{
border: 5px solid #221e1c;
/* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: .2s;
        -moz-transition-delay: .1s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: .1s;
        -webkit-transition-delay: .1s;
        /* Opera */
        -o-transition-property: opacity;
        -o-transition-duration: .1s;
        -o-transition-delay: .1s;
        /* Standard */
        transition-property: opacity;
        transition-duration: .1s;
        transition-delay: .1s;
}

.widget_gallery img:hover {
opacity: 0.5;
}

.widget_gallery ul {
list-style: none;
}

.widget_gallery li {
float: left;
margin-right: 10px;
margin-top: 10px;
}



/* Comments */
    .comment {
        margin-top:40px;

    }

    .comment p {
    color: #ac3131;
        font-family: 'ArvoRegular';
    font-weight: normal;
    font-style: normal;
    }
    .comment h3 {
    margin-bottom: 20px;
    }
    input,textarea {
        color: #ac3131;
        padding:12px;
        border:1px solid #b9a17e;
        margin-bottom:20px;
        outline:0;
        width: 400px;
        background:#d7baa7;
        -webkit-box-shadow: inset 5px 5px 0px 0px #c6ab9a;
        -moz-box-shadow: inset 5px 5px 0px 0px #c6ab9a;
        box-shadow: inset 5px 5px 0px 0px #c6ab9a; 
        color: #765f3c;
        font-size:13px;
            font-family: 'ArvoRegular';
    font-weight: normal;
    font-style: normal;
    }

    textarea {

        width: 400px;
        height:150px;
        line-height:150%;
    }

    input:hover,textarea:hover,input:focus,textarea:focus {
        -webkit-box-shadow:  5px 5px 0px 0px #c6ab9a;
        -moz-box-shadow: 5px 5px 0px 0px #c6ab9a;
        box-shadow:  5px 5px 0px 0px #c6ab9a; 
    }

    .form label {
        margin-left:10px;
        color: #ac3131;
    }



    .submit input {
    background-color: #ac3131;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    max-width:150px;
    font-size: 13px;
    color: #6c1a1a;
    padding-left: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    border: 1px solid #ac3131;
    background: #c74747; /* Old browsers */
    background: -moz-linear-gradient(top,  #c74747 0%, #ad3232 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c74747), color-stop(100%,#ad3232)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* IE10+ */
    background: linear-gradient(top,  #c74747 0%,#ad3232 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74747', endColorstr='#ad3232',GradientType=0 ); /* IE6-9 */
    text-shadow: 1px 1px 0px #d14e4e;
    -webkit-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
    -moz-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
    box-shadow: inset 0px 1px 0px 0px #dc5e5e;
    }





    .commentsTitle {
    margin-bottom:25px;
    }
    .commentWrap {
        position:relative;
    }
    .commentAvatar {
        float:left;
        display:block;
        margin-right:25px;
    }
    .commentAvatar img {
        padding:4px;
        background:#ccba9e;
        -webkit-transition:background-color 0.3s ease;
        -moz-transition:background-color 0.3s ease;
        -o-transition:background-color 0.4s ease;
        -ms-transition:background-color 0.4s ease;
        transition:background-color 0.3s ease;
    }
    .commentAvatar:hover img {
        background:#b63939;
        -webkit-transition:background-color 0.3s ease;
        -moz-transition:background-color 0.3s ease;
        -o-transition:background-color 0.4s ease;
        -ms-transition:background-color 0.4s ease;
        transition:background-color 0.3s ease;
    }
    .commentContent {
        float:left;
        position:relative;
        width:440px;
        margin-bottom:25px;
        padding:15px;
        background-image: url(../images/bpaper.png);
        background-repeat: repeat;

        overflow:visible;
    }
    .commentArrow {
        display:block;
        width:16px;
        height:16px;
        left:-15px;
        position:absolute;
        top:16px;
        margin:0;
        padding:0;
        border:none;
        background:url(../images/commentArrow.png) 0 0 no-repeat;
    }
    .commentContent .underlinedTitle {
        display:block;
        color: #765f3c;
        padding-bottom:10px;
    }
    .commentContent .underlinedTitle > span {
        color: #765f3c;
    }

    .commentContent a {
    color: #ac3131;
    }

    .comments_blog h3{
    font-size: 18px;
    color: #ac3131;
    font-family: 'ArvoRegular';
    font-weight: normal;
    font-style: normal;
    }

    .comments_blog {
    margin-left: 35px;
    }

    .menu_nav {
    margin-top: 20px;
    margin-bottom: -20px;
font-size: 14px;
color: #6c1a1a;
height: 55px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
border: 1px solid #ac3131;
background-color: #c74747; /* Old browsers */
background: -moz-linear-gradient(top,  #c74747 0%, #ad3232 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c74747), color-stop(100%,#ad3232)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c74747 0%,#ad3232 100%); /* IE10+ */
background: linear-gradient(top,  #c74747 0%,#ad3232 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c74747', endColorstr='#ad3232',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #d14e4e;
-webkit-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
-moz-box-shadow: inset 0px 1px 0px 0px #dc5e5e;
box-shadow: inset 0px 1px 0px 0px #dc5e5e;

    }

    .menu_nav ul {
    list-style: none;



    height: 43px;

    float: left;

    }

    .two_menus {
    background-image: url(../images/menupage.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 43px;
    margin-top: 7px;
    }


    .menu_nav a {
    color: #6c1a1a;
    text-shadow: 1px 1px 0px #d14e4e;
    }



    .menu_nav li {
    float: left;
    padding-right: 25px;
    padding-left: 25px;
    padding-top: 18px;

    padding-bottom: 20px;
    margin-top: 0px;
    /* Firefox */
    -moz-transition: all 0.2s ease-out;
    /* WebKit */
    -webkit-transition: all 0.2s ease-out;
    /* Opera */
    -o-transition: all 0.2s ease-out;
    /* Standard */
    transition: all 0.2s ease-out;
    }

    .menu_nav li:hover {

    margin-top: -5px;
    }


    .portfolio  ul {
    list-style: none;

    }

    .portfolio h2 {
    color: #ac3131;
font-size: 18px;
margin-top: 10px;
font-weight: normal;
font-style: normal;
margin-bottom: 5px;
    }

    .portfolio  {
    list-style: none;
    }

    .portfolio  li {
    float: left;

    width: 240px;
    padding-left: 15px;
    margin-right: 20px;
    margin-left: 20px;
    padding-right: 24px;

    }

    .portfolio li img {
    margin-top: 30px;
    }

    .portfolio {
    min-height: 770px;
    }





    .portfolio li img {
    border: 5px solid #ccba9e;
    }




    .group {
    list-style: none;
    overflow: hidden;
    }

    .contact {

    }

    .portfolio ul {
    width: 960px;
    }

    .cleft {
    background-image: url(../images/paper_bg.png);
    background-repeat: repeat;
    }

    .contact h3 {
        color: #ac3131;
font-size: 18px;
margin-top: 10px;
font-weight: normal;
font-style: normal;
margin-bottom: 20px;
    }

        .sample h3 {
        color: #ac3131;
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: normal;
    font-style: normal;

    }

    .sample {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    }

    .contactform {
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    }


    .cright {
    background-image: url(../images/cright.png);
    background-repeat: repeat;
    padding-right: 20px;
    }

    .cleft_b {
    background-image: url(../images/cleftb.png);
    background-repeat: repeat;
    margin-left: 20px;
    margin-top: 20px;

    }

    .cleft_b h3 {
    padding: 20px;
    margin-bottom: -10px;
    }

    .cleft_b p {
    padding: 20px;
        margin-top: -30px;
    }

    #map-canvas {
    margin-left: 20px;
    margin-top: 5px;

    }

do you see any noticeable issues with it? Thanks a lot!!

Answer 1

There are a couple of reasons your site appears slowly.

The custom fonts seem to download only after the page is loaded. Any elements on your page using the fonts declared by your @font-face definitions do not show up until the font files are loaded. This is why your site appears to "not load" for a long time.

I am not familiar with how the browser prioritizes the download order for fonts declared in a CSS file - or if there is a way to force them to be downloaded first. However, using chromes developer tools, it looks like the font files are not downloaded until the DOMContent event is fired, and then they are downloaded in serial instead of parallel.

Also, as you noticed, removing the background speeds up the page. Your background file is over 1MB, which is quite substantial for a website. If the image is a smaller size, it will download and show faster.

If you were to just remove the custom fonts, I'm sure you would see a huge improvement.

Answer 2

You should give YSlow a try.

Answer 3

ySLow recommends:

• Make fewer HTTP requests
• Use a Content Delivery Network (CDN)
• Add Expires headers
• Compress components with gzip
• Put JavaScript at bottom
• Avoid CSS expressions
• Avoid URL redirects
• Configure entity tags (ETags)
• Avoid AlphaImageLoader filter

http://yslow.org