Hi everyone! I would like to know, if any one can help me maximize my page-loading speed. I would like to use css sprite. My website is www.oknapol.com.br and I already put all images from main page to one jpg. Problem is with my Style.css I dont know which coments use to be all images loading the same time. Below I added my style.css *{margin:0;padding:0} body{padding-bottom:60px;font:12px/20px Arial, Helvetica, sans-serif;color:#D6D6D6;background:#191A1B url(images/bg.gif) repeat-x top} h1{padding-left:40px;font:normal 28px/46px "Trebuchet MS", Arial, Helvetica, sans-serif;letter-spacing:-1px;color:#FFF} h1 a{text-decoration:none;color:#FFF} h2{font:normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#86B226} p{text-align:justify;padding:10px 0} a{text-decoration:none;color:#F8821B} a:hover{text-decoration:underline} #main{width:900px;margin:0 auto} #header{height:46px;background:#515E6E url(images/lina1.png) no-repeat} #menu{height:46px;text-align:right;background:#637383 url(images/linia2.png) no-repeat} #menu ul{list-style:none;padding:0 60px 0 0} #menu ul li{display:inline;padding:0} #menu ul li a{font-size:14px;line-height:46px;text-transform:uppercase;color:#FFF;padding:0 0 0 50px} #middle{height:1%;background:#1C1E20 url(images/glowna.jpg) no-repeat;padding:328px 40px 89px} #sidebar{float:left;width:320px;background:#3D4752 url(images/bg2.gif) repeat-x top} #sidebar2{padding:10px 15px 0} #sidebar ul{list-style:none;padding:20px 5px 40px 10px} #sidebar ul li{background:url(images/arrow.gif) no-repeat;padding:0 0 0 18px} #sidebar ul li a{line-height:22px;padding:0} #right{float:right;width:480px;background:#3D4752 url(images/bg2.gif) repeat-x top} #right2{background-image:none;background-repeat:no-repeat;background-position:top;padding:10px 15px 0} .box{padding:10px 0 30px} #right ul{padding:10px 0 10px 35px} #right ul li{text-align:justify;padding:0} .clearing{clear:both;height:1px;overflow:hidden} #footer{clear:both;height:104px;background:url(images/footer.gif) repeat-x top} #footer p{line-height:40px;text-align:center} h1 a:hover,#menu ul li a:hover{text-decoration:none;color:#FAE7D5} Thank you for any help!
There is no "comment" to load all pictures at once. I think you should read about CSS sprites here first : http://css-tricks.com/css-sprites/ There are several tools (online) to combine graphics to sprites, e.g. http://css-sprit.es/ http://csssprites.com/ and other generators. You need to understand how sprites are made, what they are and how to work with sprites (background-position).
Thank you for quick response. I am going to have look those links. Hope is not so difficult Thanks!!!
You can also take a look at http://spriteme.org/ which is really a nice tool Oh and by the way: making a website loading faster is not only using CSS sprites... check here to read more: http://www.cookielessdomain.com/blog/2010/09/how-to-boost-the-loading-speed-of-your-website/ and here: http://www.cookielessdomain.com/blog/2010/10/front-end-performance-optimizing/
Thanks Great tools!!! I see I still have many mistakes. I dont know what I am doing wrong. I used this tool css-sprit.es I added images,copy image to my ftp and i copy description css code to style.css and html code to index.html What is happening is that doesnt show any of those image. I am not sure if have to delete something from css file or from html. Have look please oknapol.com.br Please if you have some idea what i am doing wrong I be very appreciate. Thanks
now what show me is that loading all picture plus this picture which generator made include rest of the pictures. i checked my website in .webpagetest.org/ At the moment this is my style.css *{margin:0;padding:0;} body{padding-bottom:60px;font:12px/20px Arial, Helvetica, sans-serif;color:#D6D6D6;background:#191A1B url(images/bg.gif) repeat-x top;} h1{padding-left:40px;font:normal 28px/46px "Trebuchet MS", Arial, Helvetica, sans-serif;letter-spacing:-1px;color:White;} h1 a{text-decoration:none;color:White;} h1 a:hover{text-decoration:none;color:#FAE7D5;} h2{font:normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#86B226;} p{padding:10px 0;text-align:justify;} a{text-decoration:none;color:#F8821B;} a:hover{text-decoration:underline;} #main{margin:0 auto;width:900px;} #header{height:46px;background:#515E6E url(images/lina1.png) no-repeat;} #menu{height:46px;text-align:right;background:#637383 url(images/linia2.png) no-repeat;} #menu ul{list-style:none;padding:0 60px 0 0;} #menu ul li{display:inline;padding:0;} #menu ul li a{padding:0 0 0 50px;font-size:14px;line-height:46px;text-transform:uppercase;color:White;} #menu ul li a:hover{text-decoration:none;color:#FAE7D5;} #middle{height:1%;padding:328px 40px 89px 40px;background:#1C1E20 url(images/glowna.jpg) no-repeat;} #sidebar{float:left;width:320px;background:#3D4752 url(images/bg2.gif) repeat-x top;} #sidebar2{padding:10px 15px 0 15px;} #sidebar ul{list-style:none;padding:20px 5px 40px 10px;} #sidebar ul li{padding:0 0 0 18px;background:url(images/arrow.gif) no-repeat;} #sidebar ul li a{padding:0;line-height:22px;} #right{float:right;width:480px;background:#3D4752 url(images/bg2.gif) repeat-x top;} #right2{padding:10px 15px 0 15px;background-image:none;background-repeat:no-repeat;background-position:top;} .box{padding:10px 0 30px 0;} #right ul{padding:10px 0 10px 35px;} #right ul li{padding:0;text-align:justify;} .clearing{clear:both;height:1px;overflow:hidden;} #footer{clear:both;height:104px;background:url(images/footer.gif) repeat-x top;} #footer p{line-height:40px;text-align:center;} .sprites {background-image:url(images/indeks.png);background-color:transparent;background-repeat: no-repeat;} #bg_gif {height:92px;width:1px;background-position:-0px -0px;} #bg2_gif {height:284px;width:1px;background-position:-1px -0px;} #footer_gif {height:104px;width:1px;background-position:-2px -0px;} #glowna_jpg {height:46px;width:900px;background-position:-3px -0px;} #lina1_png {height: 46px; width: 900px;background-position:-903px -0px;} #linia2_png {height: 341px;width:900px;background-position:-1803px -0px;} in red color is the details from css-sprit.es generator CSM please have look maybe you can help me what I am doing wrong. Thank you!!
Okay dude, as far as I can see CSS sprites do not help you much. Your problem is your background image in the body. That one is not needed tbh. The layout of your site should be structured differently. Can you zip all your graphics (not css sprite) and give me the download link? And the CSS/HTML, too. Thanks
can you please send me email, i will send you back with all those staff back to you. My email. I really appreciated. Thanks again
By the way, I found the template you are using. Tomorrow, if I find some spare time, I will modify it a little bit - it's code/structure is a little bit strange