In today's technology driven society people like to feel in control of their internet practice. Even just a few seconds delay in load time can create an unpleasant user experience. The slower a site is the less people feel in control and the less time a user is likely to spend there. Imagine the impact a faster site has on your operating costs.
According to a study done bywww.weboptimization.com, “$25 billion in potential sales was lost online due to web performance issues. Abandoned shopping carts hover around 50% for ecommerce sites, yet web sites keep getting larger with flashier interfaces.” So, a faster site equals happy users and happy users equal happy business owners. Googlealso considers website speed when determining search engine rankings. With just these two reasons alone it is a no brainer to optimize your website for faster load time. Follow these quick tips to speed up your website loading time and you’ll be heading in the right track to gaining happy customers.
Don’t go overboard on images - While images make your site look good, too many can really slow down page load time. If you have too many images, try to determine if you have any that aren’t really needed. You can also use CSS for some nice effects, too.
Reduce image file size - This doesn’t mean reducing the height and width of your images. It means reducing the amount memory an image uses to display to your end users. You can compress your images by using photo editing software or there are also many free online image optimizers, so you don’t have to install anything.
*Wondering which file type is right for you? Here is some general guidelines, if you aren’t looking for sharp resolution, use PNGs or GIFs over JPEGs, because PNGs and GIFs load quicker. JPGs are best for higher quality photos.
CSS Sprites - CSS sprites are a bunch of smaller images combined into one larger image. Designers use CSS techniques to display the correct image. The advantage of using a CSS sprite over 10 tiny compressed graphics is the number HTTP-Requests (requests for something from your server) made to display them. Each image is a separate HTTP-Request, the more there are, the less efficient your page is.
Use CSS instead of inline styles - Using CSS can improve your web sites load time if they are place in an external .css file. Your browser will cache the formatting for your page instead of reading each inline tag over and over. Using external CSS also helps reduce your html file size since it cuts down on long drawn our tags, replacing them with smaller class styles.
Clean Code - Often times if you use a WYSIWYG editor you will end up with useless, empty tags being added to your pages. Remove these extra tags to help speed up your page load time.
Put Stylesheets at the top and Scripts at the bottom - Researchers at Yahoo! discovered that moving your stylesheets to the HEAD of your document allows your pages to render progressively, thus making the page appear to be loading faster. When a browser comes across a tag for an external image, script or css file, it will start downloading the file simultaneously. Sometimes you have no choice but to put a script at a specific location in a page but if you put your CSS at the top of your page and scripts at the bottom when you can, they will load faster because the html content, structure css and images of your page will be loaded first. Now users won't have to wait for a script to finish downloading before they see something on your site.
Use external scripts - External JavaScript's and CSS files are cached by your browser. If they are inlined in your HTML they get downloaded every time the document is requested. This will reduce the number of HTTP requests needed but also increases the size of your document. However if the JavaScript and CSS are external files and cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests therefore speeding up your web page load time!
Don’t use tables - I'm not a fan of using table for layout. Content and presentation should be separate. When you use tables the browser has to read they whole html document and then work out the spacing/layout of the tables Try using CSS to create columns on your page instead. If you have to use tables try to add some content above the first table, that way your visitors can have something to read while the rest of your page loads.
Split up long pages - People get distracted when they see a long scroll bar and tons of content. By splitting up your long pages into multiple pages you will not only help the pages load faster but you will also help keep your audience's attention.
