Tuesday, August 10, 2010

What is magic behind 5 second websites ?

                                         
                                      As  I would practically say This post is not about how to make your websites load faster, People have done commendable job at it here here and here. This post is about the development process which makes it really easier for you to actually make 5 second websites. I believe the roots of faster web loading come right from starting 

                                        Have you ever wondered Why did your website took ages to load ?? Do your users sip a cup of coffee while your website takes its comfortable time in loading.  As a web developer I started my career almost 2 years ago. That was after i miraculously happened to clear my Engineering. After being part of many successful projects like Great Driving Challenge, Legrand Arteor, Linc My Diary, Castrol Cricket   I certainly thought i knew almost everything about web development. and 'BAM' there i was wrong. I had a conversation with my sister and it went like this

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.
      ii) Compress your javascript/ css.


PageSpeed actually compresses your JavaScript / CSS on Spot and gives you compressed file download ( one more reason why I LOVE Google)


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  
eg.
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 
    i) www.xyz.com/a.css
    ii)www.xyz.com/b.css
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
        ii) static1.xyz.com/b.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)





10 comments:

  1. PageSpeed tu bol raha hai firebug ka plugin hai..toh is it client side software?

    If it is client side how can it affect ur website speed?!

    ReplyDelete
  2. @Yatin You got it all wrong. Page Speed and Yslow are not performance enhancement tools, They are performance measure tools. All performance enhancement has to be taken care of server side only.

    Yslow,Pagespeed Give ranking to every website based on various factors such as number of images loaded, simultaneous download of js files, using cdn, your server configuration.


    They help us analyze our webpage and also give u s tips on how to improve it.

    ReplyDelete
  3. Ohhh, It is mentioned that it compresses the css/javascript so I thought it must be some kind of performance booster...So how does the compression help?

    ReplyDelete
  4. See yatin concept is really simple more the whitespaces more is your LOC more is your file size. Now you would normally agree that downloading 5 kb would take less time than downloading 15 kb Now if you eliminate your whitespace reduce LOC file size decreases But we also have tools that compress and also encrypt your js files. Compress to reduce file size and encrypt so that nobody would copy your js see facebook js or Google js in firebug for example


    Now PageSpeed analyzes page content and on the fly on the client side generates compressed version of js / images for you.

    ReplyDelete
  5. naam datte bayo...

    So PageSpeed provides security by not revealing the website js and css....it has nothing to do with improving speed of the web site??!!!

    naam datte bayo...

    ReplyDelete
  6. Interesting. So do you really code HTML? Cos that is a lot of pain when it comes to designing some "cool" websites. From what I know you always give a site the 5 second load time by not putting everything on the home page. You only put the required information! If you have too many images and too much data, it not only clutters the space, but also increases the load time.
    When users use browsers like Firefox or IE, most of the data is cached, and the non changing data does not require a fresh load.. So which means, the site load time drastically comes down the second time and further..
    Would love to talk to you some tech, hopefully we will meet soon :)

    Kunal
    Find the best deals on the best stuff in your city @ Mydala

    ReplyDelete
  7. Hi Kunal, Welcome here, No i don't code html in fact i m a web application developer, the back-end guy who has to do the dirty work of site integration :)No i don't get the privilege of web design i get the design from creative team and have to work on it and YES we can have faster web pages and heavy UI. Take Yahoo home page for reference. I love yahoo they experiment a lot with their home page and still manage to be in 5 second website list. Yes Loading does also varies depending on various browsers. But until and unless you write code in your server to cache the page any browser doesn't cache it completely.

    And Yeah any time we can have long tech talks you already know me on Facebook. Just Drop in a Topic and we will have a healthy conversation.

    ReplyDelete
  8. i use gmetrix for my blog...
    All analysis at once!
    do check it out !
    happy blogging!

    ReplyDelete
  9. I recommend http://siteloadtest.com
    The title says it all "Raw Optimization Report Without Any BS".

    ReplyDelete
  10. Surely gonna implement this on my blog! Pretty useful! Thanks a lot, mate! :)

    Please promote my post on IndiVine. It can be found here- http://goo.gl/02h5y

    ReplyDelete

Plant an Idea