Avani(My sis) :: So Dha Whts new ?, Whts your new project ?
Dhavalyours :: Castrol Cricket visit the website and tell me how it is ?
(After 2 mins. )
Avani(My sis) :: Its still loading Dhaval. dont worry i will check it out later.
Dhavalyours :: Di it should load by this time.
Avani(My sis) :: I have 'dial up connection' remember and if u think u are smart .... make your website Google Fast, Why does not your site load in less than 5 secs ???
That's when the entire idea of 5 Second websites idea kicked in. I dived into my teams production cycle. It looked something like below graph.Lemme say you one thing, i work in a digital agency, We code mostly in RAD (Rapid Application Development.) model. So your company working process model may differ, but below is how we used to work.
In this entire process of changes->development->changes, the factor of High Performance Websites is almost been lost or ignored. Due to unanticipated changes in the work flow, Code becomes more and more buggier and complex. But hey our topic is not web development its fast websites.
As Per the Yahoo 19 High performance website rules , i would state only major and that helped me a lot to actually make a 5 second website as in state it is today.(Do not know when creative changes the entire design :) ) http://www.xoassembly.com/ For actually putting into practice the High Performance Rules, traditional way of product making should change.
|Work Flow Of developing high performance websites.|
Hey Hey now do not freak out. Its not as complicated as it looks. :)
Now before developing all the content appearing in the page has to be analyzed thoroughly by web dev and web designer. Its not an independent task , Its a collaborative task. Different content needs to be taken care of in a different way so that it is been optimized for web.
For starters ::
1) Configure your Server ( little pain but trust me it helps a lot.) Following settings i recommend.
i) Enable Gzip compresion
ii) Caching headers for text, image, js, css,flash.
2) Use YSlow : YSlow is a plugin that comes with FireFox. It needs Firebug to be installed. YSlow grades your website depending on several yahoo High Performance rules parameters. If you get rating of above 90 in YSlow you are doing really really good. I know it is not possible to be above merit list in all pages but try hard not to get below 85. YSlow gives you tips and grade to what part of the page you need to improve to make your page load faster.
3) Use PageSpeed : Like YSlow , PageSpeed is also a plugin that is extension to Firebug It is a Google Plugin which analyzes the page according to Google Performance rules PageSpeed helps you to
ii) Compress your images.
4) Use domain alias to your rescue. It is always better to set a cookie to 1 particular domain than to set a cookie globally unless u need it. I would say you can set a cookie at www.xyz.com than at .xyz.com
If you set your cookie at www.xyz.com and you request content from www.xyz.com
if you request content like www.xyz.com/1.jpg cookie is been sent along with your request header.
but if you request content from static1.xyz.com/1.jpg it is a cookie-less domain and no cookie info will be sent. It helps a lot when your requesting content size increases
5)Use Domain alias for simultaneous loading. Eg. if you have 2 resources
until a.css is finished loading, loading of b.css would not start but if you use and alias like i) www.xyz.com/a.css
loading of a.css and b.css would start simultaneously.
Well i gotta stop somewhere. There are many more techniques to make your site load faster. If you are really serious on making a 5 second website. I would strongly recommend following reading
1) 14 rules for Faster Page Loading
2) High Performance Website Rules with Examples.
3) Caching Tutorial For Webservers
4) Yahoo High Performance Rules.
5) Web Performance Best Practices (Google)