Facebook Twitter Gplus Pinterest LinkedIn Google Maps E-mail
magnify
magnify
Home Web Development Website speed Part One
formats

Website speed Part One

In these modern times, with people increasingly accessing the internet on the move via their smart phones or tablet devices, it is more important than ever to ensure your website is running as quickly as possible.

Not only will this improve the user experience and stop people from leaving your site in frustration, but it will also serve to boost your rankings in the search engines. Recent information suggests that google is now taking load times into consideration when determining which sites to serve in the search engine results.

Google search quality engineer
http://www.mattcutts.com/blog/site-speed/

Depending on your level of technical experience, there are a number of techniques you can employ in order to increases the performance of your site.

The first thing to consider is the actual size of the files that make up your website. When a user navigates to your website, they effectively download a HTML file (which describes the content of the page), a style sheet (which describes how the page is laid out and colours used) together with all the images required for the page. Any thing that you can do to reduce the size of these files will directly reduce the time required to download, and thus the time taken for the page to load.

Of these, the images files are likely to represent the largest portion of the total size of the site. Therefore anything we can do to reduce these the better. The following article shows you how to quickly and easily optimise files for use on the web:

http://blog.suremedia.co.uk/creating-web-safe-images-with-pixlr-com/

The next file to consider is the Cascading Style Sheet. You should ensure that this is written concisely, making sure not to replicate classes and also using CSS shorthand where possible. There are various services that will compress your style sheet for you.

Similarly, if you utilise any client side scripts on your site, you should ensure only relevant portions of the script are included. Often is the case that people include full javascript frameworks, when a “lite” version is available and would suffice.

Once you are happy that the size of your website is optimal, you can then start to look at how those files are served to the individual. When a page is loading, a request is sent to the server for every file (i.e. all those mentioned above). With every file that the server returns to the user some additional “header information” about the file also transmitted. As such, there is a great deal of overhead associated with each request.

In order to reduce load times, you should try to reduce the number of external files that are used within the page. For example, try not to use multiple style sheets or scripts – instead combine them into one.

This is most effective when dealing with image files, where in some cases a page might load 15-20 images for one page. In order to reduce the overhead associated with image files, you can combine all of the commonly used images into one large file, and then use your cascading style sheet to only show a portion of the larger image where needed. This method is known as using “CSS sprites” and is commonly used on some of the larger sites across the web.

A detailed guide on how to do this is available here:
Sprite guide

The techniques mentioned above outline the basic approaches you can adopt in order to speed up your website. There are a variety of other techniques, which often need to be set at server level (you may need to ask your hosting provider to do this for you). These will be covered in the next article, which will look at:

  • Enabling GZip compression
  • Minifying javascript / css
  • Browser caching
  • Deffered loading
  • Server settings
 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>