High-speed internet connections have made people used to instant information. When a user queries a search engine they expect that knowledge to be instantly teleported to them or they will move on to one of the next hundreds of links. For this reason it is critical that you make sure your website loads fast so that your content is delivered before a attention is lost. Utilizing some of the following tips will help speed up your website, thus ensuring returning readers and satisfying customers.

Avoid large graphics – Websites work both visually and verbally. Its great to use a captivating image to attract attention but do not go overboard. Minimize the use of image files if possible while trying to maintain the original design with code. Using CSS and custom classes can create attractive visual cues without image files. If images are an important theme to your site use a gallery or look up how to use a script to preload images that are found on other pages within your site.

Optimize graphics – Use an image editor to trim images down to the dimensions you need. Also reduce resolution to shrink the file size when working with photos. It will also help if you use the html tags for height and width. Defining these dimensions will help the browser now exactly where an image will be placed so it can focus on rendering.

This is also a good time to remind you to focus on what file types to use.  GIF, JPEG, and PNG are universally accepted file formats, but each is good for different reasons. Use GIF’s for low color, low resolution images, like backgrounds and logos. GIF’s also support transparency. JPEG in general is used for photos with lots of color. PNG is a newer format that was designed with the web in mind. PNG’s file sizes tend to be larger, but it can incorporate full color photos with transparencies and uses a lossless compression.

Avoid flash and animated GIFs – Flash and GIFs are typically used to add animated sprites to navigation or design banner adds to attract attention. GIFs add to your load time since every frame of animation has to load on the page before it starts moving. Flash is similar allows but allows for much richer animations.  Designers also may tend to design navigations schema using Flash, but this is unnecessary. CSS allows for many types of interactive navigation schemes to be made using list and hover over commands with much less tax on the browser or your server. Also as HTML5 and CSS3 become reality, much of the interactivity and styles that Flash and GIFs have provided over the years will become native to internets most popular language.

Images are not your only Nemesis. Look at your Code too.

Optimize HTML files – Clean code helps reduce load time. When working with HTML/WYSIWYG editors erroneous code can leak in to your pages. Broken tags introduce confusion to the browsers rendering engine. Also some editors use their own tags that are not common in current valid DOCTYPEs. Make sure to stick to one DOCTYPE and declare it so that the browser knows what to work with. Remember that even your comments are read by the browser, so remove them after development is done to speed up you load times.

Make CSS work for you – CSS changed the scope of web development by separating the content from design. CSS allows all of the styling of your page to be served from another file that is loaded when needed.  By referencing CSS when your HTML code needs it allows for your code to be short. CSS also allows for many styles to be placed across multiple pages without weight being added to each one. Even though CSS helps pages load fast it is important to remember that shorthand code has an effect here also.

Guest Post by – Lawrence Hall, Community manager at Go-gulf, a web design company in Bahrain that provides high quality website development and logo designing services in various areas of Middle-East.