{"id":505,"date":"2009-03-18T12:54:20","date_gmt":"2009-03-18T02:54:20","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/"},"modified":"2009-03-20T17:56:38","modified_gmt":"2009-03-20T07:56:38","slug":"10-website-optimisation-tips-for-web-20-websites","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/","title":{"rendered":"10 Website Optimisation Tips for Web 2.0 Websites"},"content":{"rendered":"

After optimising a few web 2.0 websites for speed and download time, I would like to share with everyone some of the tips I have learned and implemented during the process. <\/p>\n

1. Use image sprites<\/strong>
\nIf you use a lot of background images in CSS, it's a good practice to put all the images you need in one big canvas. You can then set background-position in CSS to get the image you want from the big image. The advantage here is that instead of having to make numerous HTTP requests on a page, the browser only needs to make one request for the big image and thus speeding up load time. Some people usually create a sprite for images of the same purpose, for example, a sprite for navigation images, a sprite for logo images, a sprite for footer images, etc, but there is no reason why you can't create combine all images, be it navigation, icons or footer, in one single sprite. <\/p>\n

Examples of an image sprite: AOL<\/a>, Digg<\/a><\/p>\n

2. Combine Javascript files<\/strong>
\nIf you are building a web 2.0 website, it is probably very likely that you will have multiple javascript files. For example, you might have one for jQuery, a few for various jQuery plugins, one for your own custom functions, etc. Instead of calling them one by one in your html, you can put all scripts in a single Javascript file to reduce HTTP requests. <\/p>\n

Instead of this:<\/p>\n

<script type="text\/javascript" \r\nsrc="scripts\/jquery.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/jquery.newsticker.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/jquery.scroller.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/jquery.datepicker.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/jquery.dragdrop.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/custom.js"><\/script><\/pre>\n
Use this:<\/p>\n
<script type="text\/javascript" \r\nsrc="scripts\/jquery.js"><\/script>\r\n<script type="text\/javascript" \r\nsrc="scripts\/scripts.js"><\/script><\/pre>\n
3. Use Code Libraries when possible <\/strong>
\nIf you're using a common Javascript library, it is advisable to use Code Libraries like Google AJAX Libraries API<\/a> because it is likely that the browser might already have the javascript file in cache from some other websites that uses the same code library and hence speed up the loading time.  Another advantage is that you can have the latest stable version of the library without having to manually update your code.  <\/p>\n
Instead of this:<\/p>\n
<script type="text\/javascript" \r\nsrc="jquery-1.3.2.min.js"><\/script><\/pre>\n
Use this:<\/p>\n
<script type="text\/javascript" \r\nsrc="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js">\r\n<\/script><\/pre>\n
4. Optimise CSS<\/strong>
\nIt is important to write a clean and readable css file but when you're deploying your website to a production environment, the readability of CSS files doesn't matter so much compared to having a speedy website.  Therefore, it is advisable to optimise your CSS files before deploying them onto a production environment.  Some of the CSS optimiser I have used are Clean CSS<\/a> and CSSTidy<\/a>.  <\/p>\n
5. Minify or Pack Javascripts<\/strong>
\nWeb 2.0 websites rely heavily on AJAX and Javascript and you can reduce the size of these Javascript files further by minifying<\/a> or packing<\/a> them.   You can use this online tool<\/a> to compress your Javascript files using the above algorithms.  <\/p>\n
6. Write a clean and semantic markup<\/strong>
\nIf you think <table> are faster to code and prefer using <table> for layouts, chances are you haven't probably had a lot of practice with semantic markup in xHTML and CSS.   A clean and semantic markup not only renders on browsers faster, it also separates content from presentation (layout) and makes maintenance much easier.  <\/p>\n
7. Use a caching method<\/strong>
\nThere are a number of caching methods you can use to speed up a website load time.  However, if you are not able to speed up the web server or web applications at the server level, here is a simple caching method you can use with .htaccess file.  It simply sets the expiry header and cache control for browsers so the browser keeps certain components in its cache and retrieve them from the cache rather than making a new HTTP request each time.  <\/p>\n
#604800  = 1 week in seconds\r\n<FilesMatch "\\.(gif|jpg|jpeg|png)$">\r\nHeader set Cache-Control "max-age=604800"\r\n<\/FilesMatch>\r\n\r\n#86400 = 1 day in seconds\r\n<FilesMatch "\\.(js|css)$">\r\nHeader set Cache-Control "max-age=86400"\r\n<\/FilesMatch><\/pre>\n
8. Preload or postload certain components<\/strong>
\nSometimes, you might want to preload certain components before they are required.  For example, Google Search preloads some of the images it requires in the search result page on search homepage, thereby, reducing the time it takes to load search result page.   And other times, you do not need to load all content on a page at once.  For example, you may have a photo gallery with 50 images, but you do not need to load all 50 images on page load, rather, you can use lazyloading method or use AJAX to load images required on request.  <\/p>\n
9.  Keep components sizes small<\/strong>
\nIt is always recommended to have small components and objects in your page.  This includes flash objects, multimedia components, images, scripts, css, and the html file itself.   Simple measures like optimising images, removing extra line breaks, comments and whitespaces in scripts, css and html files, de-duplicating content and using shorthands appropriately can make a big difference in the size of a component.   The ideal size of a component is between 20K - 50K (the smaller, the better!).   <\/p>\n
10. Benchmark and Test<\/strong>
\nAlways benchmark, test and optimise more whenever possible.   I use Firebug Network Monitoring Tool<\/a> and YSlow<\/a> for this purpose.  <\/p>\n","protected":false},"excerpt":{"rendered":"
After optimising a few web 2.0 websites for speed and download time, I would like<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-505","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"yoast_head":"\n10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources\" \/>\n<meta property=\"og:description\" content=\"After optimising a few web 2.0 websites for speed and download time, I would like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice & Resources\" \/>\n<meta property=\"article:published_time\" content=\"2009-03-18T02:54:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2009-03-20T07:56:38+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"10 Website Optimisation Tips for Web 2.0 Websites\",\"datePublished\":\"2009-03-18T02:54:20+00:00\",\"dateModified\":\"2009-03-20T07:56:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\"},\"wordCount\":798,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\",\"name\":\"10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2009-03-18T02:54:20+00:00\",\"dateModified\":\"2009-03-20T07:56:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Website Optimisation Tips for Web 2.0 Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/","og_locale":"en_US","og_type":"article","og_title":"10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources","og_description":"After optimising a few web 2.0 websites for speed and download time, I would like","og_url":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/","og_site_name":"Tech Leadership Advice & Resources","article_published_time":"2009-03-18T02:54:20+00:00","article_modified_time":"2009-03-20T07:56:38+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"10 Website Optimisation Tips for Web 2.0 Websites","datePublished":"2009-03-18T02:54:20+00:00","dateModified":"2009-03-20T07:56:38+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/"},"wordCount":798,"commentCount":3,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/","url":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/","name":"10 Website Optimisation Tips for Web 2.0 Websites | Tech Leadership Advice & Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2009-03-18T02:54:20+00:00","dateModified":"2009-03-20T07:56:38+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2009\/03\/18\/10-website-optimisation-tips-for-web-20-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"10 Website Optimisation Tips for Web 2.0 Websites"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=505"}],"version-history":[{"count":0,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/505\/revisions"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}