how important is fast site loading? do you give importance to it? As of me, that is my first priority than anything else. i use plain text and low graphics on my php pages, so that the site pages loads very fast, much like i have used in my site here. Is my site fast loading? Thanks
yes your site loads very quick actually, but users also like to see some images, not very many there,try putting up some more cause they really catch the eye
While png and gif are sometimes better, NEVER take a photograph and save it as png for your website. Take a photo and save it as .jpg and .png. Which one is 15 times bigger in filesize? But yes, many times you see someone using a jpg for something like a gradient or a 4-colour logo... wrong tool for the wrong job. As for fast loading, you can do many tricks for a still-fast-loading site and also some images. For instance, let's say you have a menu with images for the tabs. You can have a neat-o normal and hover effect (or normal hover and click) using just ONE image and sliding it around with CSS. Another trick I learned from deathshadow is with pngs and gif, because of the way they encode, certain dimensions save and display faster-- I think it was factors of 8 all round for gifs, and factors of 6 and 8 for pngs... (damn, now I gotta find where I stuck that info). For gradients, the trick is to have it only a few pixels wide or tall (depending on which way it's going) and repeat x or y... the browser needs to do a bit of work rendering, but loading the image in the first place is fast cause it's a gif or png and small.
Is curious ... Europe, like it more to see the sites with images than in the USA ... Some reason in particular? Or perhaps it is that I am doing confusion ... :S
Everybody likes fast loading time. You need to experiment and put yourself on the visitors side, to find out where is the best ballance between images and text. I personally prefer extreamly clean and fast loading websites from the kind of only LOGO+TEXT, the rest of the formatting and coloring should be with CSS. I have also writed an article with tips on how to decrease your page loading time.
Speed is naturally important however it has to be somewhat taken in context of the site.... if you have a photographer's portfolio site you are going to need to have decent sized/ quality images as this is the very purpose of the site. For a forum however many images add no benefit and so really shouldnt be there other than small icons. For a lot of ecommerce sites etc there does have to be a balance between speed and eye catching as whilst a slow website will mean you lose customers so will a site that is as dull as dish water even if it loads in under 2 seconds.
http://uk.youtube.com/watch?v=BTHvs3V8DBA This is a MUST see for anyone with a very high traffic site. p.s this is a Google tech Talk. Not something i am advertsing
I'm not sure about all of Europe, but much of it is densley populated so here in Netherlands many people have high speed internet so even slow loaders load okay. In the US, there is a huge part in the middle where the telecom companies have said, it will cost too much to string cable out here. Dial-up use is like 50%+ in those areas, and those with ADSL get it via satelite, not cables, for that reason. That's my guess.
if a simple site loads faster in an average connection, imagine how fast it can load if you have high speed internet connection. i love sites which are kept plain and simple.
It's very important. Anywhere you can cut the file size, even just by 1kb it's worth it. Hell, some people are still on 56k (15% of the people who visit my site are...)
I like fast loading sites, and try to keep mine image-light. I had the misfortune of dropping back down to dial up recently - that was a nice harsh reminder of what the internet is like for some people. I'm not kidding - some sites took whole minutes to display. Argh!
. Most sites I visit, with exception to the really really bad ones (usually table-layout ones I've noticed), load between 1-3 seconds. Any faster than that I will never notice because of the default TCP/IP calls I always need to make between my provider and the site's server. On dial-up, you notice the differences a lot more. Sites that seem to load with the same speed for me will show greater differences on 56K.
Fast loading sites are very important, the internet is a place full of impatient people, if a website takes too long to load (like, 15 seconds or more say) people will just go somewhere else. I have it as a habit that when designing in photoshop before coding, i design so that it can look visually appealing, while using as much CSS and HTML styling as possible.
The speed of the site depends on many factors. Not only the content of it, but the server where it hosted, the connection to the Internet ... Among other factors. And it will never be possible to please all visitors ...
While I consider it very important, I am not willing to sacrifice appearance to do so which is why I've put a LOT of effort into image optimizations on everything I do. One of the biggest blunders you see in this department is people using tens even hundreds of tiny images. Every separate file you request from a server requires 'handshaking' between your PC and the server - this 'handshake' means you computer requests the file, and the server sends back one of those wonderful 3 digit codes - 200, 404, 500, etc. If and only if a 200 code is recieved do you send back an 'I'm ready for the file' - meaning before one byte of actual data in the file is sent, you've already gone back and forth to the server a minimum of twice, an when the file is being sent you get and extra one. This back and forth takes the equivalent of a 'ping time' each direction, which can be 30ms on a good day, 200ms is about 'normal' a and up to half a second on dialup... suddenly your typical 30 image graphical website is taking up 18 seconds on broadband and up to a minute and a half overhead on dialup without even calculating in data transfer! Using CSS a lot of images can be combined into single files, just showing the part you want by sliding the background around. Reduce the number of files, reduce the 'wasted' overhead. It is for this reason that javascripted mouseovers REALLY need to be a thing of the past. Code reduction is equally important - Olddocks, don't take this the wrong way, but for someone touting small site sizes your code is pretty damned heavy. You've got 2k of actual text content with 13k of markup... MOST of that markup being 'things of the past' like nested tables, multiple redundant properties, invalid markup, etc, etc. I see a layout that at maximum should require four tables, and done 'properly' by modern techniques would use three, but in front of me is a page that uses a whopping SEVEN tables... Semantic markup is nowhere to be found with the complete lack of header tags, 'header' classes on TD's instead of using TH, inlining of presentational images, inlining of presentational attributes - and that's before we even get into the REAL problems of a lack of doctype (have fun hacking IE being in quirks mode), mixing of X and HTML (you have self closing inputs and non self-closing images?), use of deprecated attributes (again with someone abusing target)... even just the stupid stuff like titles on anchors that are identical to the text inside them (COMPLETE waste of code) or that don't even make sense (title 'new' on a anchor with the words 'login') - though I still maintain that if you need to use title on an anchor, you have the wrong text INSIDE it. Should be possible to trim about 3-4k of code off the html... Let's see... badda boom, badda bing, search/replace, plug it into one of my standard templates... Yeah, this (+ or - one or two tags) is about all the markup that page would really need. You could trim even more by losing the classes in the tables if gecko based browsers didn't still have thier head permanantly wedged up thier ass about colgroups. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--<link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" />--> <title> Webmasterpals.com </title> </head><body> <h1> <strong>Webmasterpals</strong>.com <span>A social Network for Webmasters <span></span> </h1> <form action="results.php" method="get" id="myform"> <div> <input id="q" type="text" /> <input class="submit" type="submit" value="Search" /> </div> </form> <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="login.php">Login</a></li> <li><a href="register.php">Register</a></li> <li><a href="articles.php">Articles</a></li> <li><a href="blogs.php">Blogs</a></li> <li><a href="classifieds.php">Classifieds</a></li> <li><a href="forum.php">Forum</a></li> <li><a href="bookmarks.php">Bookmarks</a></li> <li><a href="contact.php">Contact</a></li> </ul> <div id="contentWrapper"><div id="content"> <h2>Welcome to <b>Webmasterpals.com</b></h2> <p> An exclusive social network for Webmaster community. You can post blogs, post buy/sell classified ads, tag your favorite bookmarks or take part in discussion forum to discuss your problems all in one in this site. </p><p> You can also type <strong>www.wmpals.com</strong> to reach this site as a shortened URL. </p> <img src="images/wmpals-url.gif" width="286" height="31" alt="www.wmpals.com" class="blockImage" /> <p> Join today! <a href="register.php">Register</a> your account <a href="register.php"> <img src="images/join-today.gif" width="143" height="40" alt="Join Today"/> </a> </p> <table class="contentList"> <tr> <th>Buy/Sell Classifieds</th> <th>Offer</th> </tr><tr > <td class="topic"> <a href="viewclassified.php?c=9">logo designer wanted</a> </td> <td class="offer">Hire</td> </tr><tr > <td class="topic"> <a href="viewclassified.php?c=8">PHP programmer wanted!</a> </td> <td class="offer">Hire</td> </tr><tr > <td class="topic"> <a href="viewclassified.php?c=5">Cheap Domain HotMerchantAccounts.com for Sale</a> </td> <td class="offer">Sell</td> </tr><tr> <td class="topic"> <a href="viewclassified.php?c=4">Professional Graphics designer for Hire</a> </td> <td class="offer">Hire</td> </tr><tr> <td class="topic"> <a href="viewclassified.php?c=3">Wanted: Professional Web Designer w/ 3years Experience</a> </td> <td class="offer">Hire</td> </tr><tr> <td class="topic"> <a href="viewclassified.php?c=2">Selling a PHP Bookmark Website with $100/mon Revenue</a> </td> <td class="offer">Buy</td> </tr> </table> <table class="contentList"> <tr> <th class="topic">Latest Forum Topics</th> <th class="replies">Replies</th> <th class="views">Views</th> </tr><tr > <td class="topic"> <a href="viewtopic.php?t=21"> HOWTO: Setup DNS Nameservers in CPanel</a> </td> <td class="replies">0</td> <td class="views">5</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=11"> giving 777 permissions to upload folder?</a> </td> <td class="replies">1</td> <td class="views">14</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=20"> best html editors for php?</a> </td> <td class="replies">2</td> <td class="views">13</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=17"> IMPORTANT: Read This Before Posting</a> </td> <td class="replies">0</td> <td class="views">18</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=19"> Optimize for Google?</a> </td> <td class="replies">1</td> <td class="views">14</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=18"> phpfavorites.com for sale</a> </td> <td class="replies">2</td> <td class="views">23</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=12"> What is known as mysql injection?</a> </td> <td class="replies">3</td> <td class="views">81</td> </tr><tr> <td class="topic"> <a href="viewtopic.php?t=4"> How to promote a social netowrking site?</a> </td> <td class="replies">1</td> <td class="views">38</td> </tr> </table> <table class="contentList" > <tr> <th colspan="2">Top Bookmarks</td> </tr><tr> <td class="hits"><span>4</span> Hits</td> <td class="content"> <h3><a href="jump.php?id=8">PHP Favorites!</a></h3> A Place for your Favorite PHP Bookmarks <ul> <li>Posted by: <a href="profile.php?id=admin">admin</a></li> <li>Tags: <a href="tags.php?tag=php+bookmarks">php bookmarks</a></li> <li>phpfavorites.com</li> <li><a href="jump.php?id=8">visit</a></li> </ul> </td> </tr><tr> <td class="hits"><span>6</span> Hits</td> <td class="content"> <h3><a href="jump.php?id=7">phpFoX » Social Network Script</a></h3> A Popular commercially available social network script. <ul> <li>Posted by: <a href="profile.php?id=admin">admin</a></li> <li>Tags: <a href="tags.php?tag=php+social+network">php social network</a></li> <li>www.phpfox.com</li> <li class="last"><a href="jump.php?id=7">visit</a></li> </ul> </td> </tr><tr> <td class="hits"><span>6</span> Hits</td> <td class="content"> <h3><a href="jump.php?id=5">PR Urgent News</a></h3> Free press rleease and news distribution <ul> <li>Posted by: <a href="profile.php?id=pbu">pbu</a></li> <li>Tags: <a href="tags.php?tag=free+press+release">free press release</a></li> <li>prurgent.com</li> <li class="last"><a href="jump.php?id=5">visit</a></li> </ul> </td> </tr><tr> <td class="hits"><span>6</span> Hits</td> <td class="content"> <h3><a href="jump.php?id=3">PHP Scripts Collection</a></h3> Nice Collection of Best & Top Rated FREE PHP Scripts<br> <ul> <li>Posted by: <a href="profile.php?id=pbu">pbu</a></li> <li>Tags: <a href="tags.php?tag=best+php+scripts">best php scripts</a></li> <li>www.best-php-scripts.com</li> <li class="last"><a href="jump.php?id=3">visit</a></li> </ul> </td> </tr> </table> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <form method="post" action="login.php" class="loginBox"> <div class="standardBox"> <h2>Login Members</h2> <label for="email"> Your Email <input type="text" id="email" /> </label> <label for="pwd"> Password: <input type="password" id="pwd" /> </label> <input type="submit" class="Submit" value="Login" /> <a href="register.php">Register</a> | <a href="forgot.php">Forgot</a> </div> </form> <div class="standardBox"> <h2>New Users</h2> <ul class="userList"> <li> <a href="profile.php?id=darkstar_tfd"> <img src="images/noprofile.gif" width="35" height="35" alt="darkstar_tfd" /> darkstar_tfd </a> </li><li> <a href="profile.php?id=rajatagarwal"> <img src="images/noprofile.gif" width="35" height="35" alt="rajatargarwal" /> rajatagarwal </a> </li><li> <img src="images/noprofile.gif" width="35" height="35" alt="espmartin" /> <a href="profile.php?id=espmartin">espmartin</a> </li><li> <a href="profile.php?id=Quintox"> <img src="ufiles/photos/profile-6534-15.jpg" width="40" height="33.5" alt="quintox" /> Quintox </a> </li><li> <a href="profile.php?id=balak"> <img src="images/noprofile.gif" width="35" height="35" alt="balak" /> balak </a> </li><li> <a href="profile.php?id=gillyo9"> <img src="images/noprofile.gif" width="35" height="35" alt="gillyo9" /> gillyo9 </a> </li><li> <a href="profile.php?id=olddocks"> <img src="ufiles/photos/profile-2420-2.gif" width="18" height="11" alt="olddocks" /> olddocks </a> </li><li> <a href="profile.php?id=kenny"> <img src="images/noprofile.gif" width="35" height="35" alt="kenny" /> kenny </a> </li><li> <a href="profile.php?id=pbu"> <img src="ufiles/photos/profile-5857-6.jpg" width="38" height="29" alt="pbu" /> pbu </a> </li><li> <a href="profile.php?id=admin"> <img src="ufiles/photos/profile-1210-5.jpg" width="40" height="40" alt="admin" /> admin </a> </li> </ul> </div> <div class="standardBox"> <h2>Latest Blog Posts</h2> <ul> <li><a href="blog18.htm">Gmail in HTML mode</a></li> <li><a href="blog17.htm">Turning your Windows PC to Linux Server</a></li> <li><a href="blog16.htm">Fix Open DNS Server in your Linux Server</a></li> <li><a href="blog15.htm">Creating SPF Record for Domain Nameservers</a></li> <li><a href="blog14.htm">Nameserver IPs in CPanel not updating!</a></li> </ul> </div> <!-- #sideBar --></div> <div id="footer"> © 2007 <a href="/">Webmasterpals.com</a> - All Rights Reserved </div> </body></html> Code (markup): *** NOTE *** Code untested/unvalidated. This is just a rough. Likewise your 8k of css could definately go through some property condensing. You've got 8k of FaC (fonts and colors)when you should probably have 3k of FaC and 2-3k of layout. For example your .doubleline class: border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; Code (markup): Complete waste. Can be declared in two lines as border-top:1px solid #333; border-bottom:1px solid #333; Though we could save a few more bytes as: border:solid #333; border-width:1px 0; Just saying.