Results 1 to 4 of 4
  1. #1

    Website loading time

    How decrease website downloading time?? I am looking for best solution.

  2. #2
    Administrator Dave's Avatar
    Join Date
    Sep 2004
    Location
    Te Awamutu, New Zealand
    Posts
    3,959
    Blog Entries
    79
    There's no single simple solution to this. You'll need to spend some time learning about all the different ways to do it, but in short:

    (1) Make sure all your images are created at the correct pixel size (don't make them larger than they need to be) and optimized for minimum file size.
    (2) Don't have unnecessary code in your HTML.
    (3) Minimize "heavy" elements such as Flash.

    That would be a good start.
    Dave Owen
    MediaCollege.com

  3. #3
    In addition to Mr. Owen's well-written suggestions I would like to open them a little bit thoroughly..

    • Minimize HTTP requests..
      80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
    • Add Cache-Control header
      Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this response won't be stale until April 15, 2010.
    • Compress Your Components
      The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It's true that the end-user's bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.
    • Put Stylesheets at the Top
      The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
    • Put Scripts at the Bottom
      The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
    • Avoid CSS Expressions!
      The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.
    • Make Javascript and CSS External
      Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document.
    • Choose <LINK> over @Import

    • Optimize CSS and Optimize CSS Sprites
      This is my master image that use to create the entire website.
    • Reduce DNS Lookups (put SLASHES at the end of every URL)
      The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people's names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server's IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can't download anything from this hostname until the DNS lookup is completed.
    • Minifiy Javascript and CSS
      Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS. There is also http://dean.edwards.name/packer/ . I prefer using YUI which requires Java IDE (Net Beans).
    • Avoid #!@ Redirects
      The main thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

      One of the most wasteful redirects happens frequently and web developers are generally not aware of it. It occurs when a trailing slash (/) is missing from a URL that should otherwise have one.
    • Remove duplicate Scripts
      Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.
    • Make AJAX Cacheable
      One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won't be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It's important to remember that "asynchronous" does not imply "instantaneous".
    • Use GET for AJAX Requests
      An interesting side affect is that POST without actually posting any data behaves like GET. Based on the HTTP specs, GET is meant for retrieving information, so it makes sense (semantically) to use GET when you're only requesting data, as opposed to sending data to be stored server-side.
    • Flush the Buffer Early
      A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.
      Example:

      HTML Code:
          ... <!-- css, js -->
          </head>
          <?php flush(); ?>
          <body>
          ... <!-- content -->
    • Post Load Components - THEN - Preload Components
      You can take a closer look at your page and ask yourself: "What's absolutely required in order to render the page initially?". If you're little fine with jQuery or Mootools you can make your own way pretty easily..

      By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you'll need in the future.
      • Unconditional preload - as soon as onload fires, you go ahead and fetch some extra components.
      • Conditional preload - based on a user action you make an educated guess where the user is headed next and preload accordingly.
      • Anticipated preload - preload in advance before launching a redesign * keeping in mind that your site visitors had old items in their caches.

    • REDUCE THE NUMBER OF DOM ELEMENTS
      And this is the craftmanship - isn't it I love this part a lot more than others!
    • Minimize the DOM Access!!
      Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:
      • Cache references to accessed elements
      • Update nodes "offline" and then add them to the tree
      • Avoid fixing layout with JavaScript

    • Minimize the Number of IFRAMES - like, Zero for example!
    • NO 404s!
      HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit
    • Reduce Cookie Sizes!
    • Know How to Develop Better Event Handlers
      If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you'll be able to catch the event and figure out which button it originated from.
    • Make Favicon Small and Cacheable
      It's small, preferably under 1K. Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.
    • Keep Components under 25K
      This restriction is related to the fact that iPhone won't cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient.


    I hope this information would be helpful..

    best regards;
    - kunter ilalan web designer
    follow him on twitter and on MediaCollege

  4. #4
    I can't believe I have managed to cut down additional 2650 characters from this message.. I've lost a similar post to the recent spam-sweep and I believe I should backup this msg by myself for the sake of other people - I already know about them, and practice all of them


    this is MediaCollege!

    you'll be surprised to know what things are being taught inside!

    best regards..
    Last edited by kunter; 27th Nov 2009 at 09:54.
    - kunter ilalan web designer
    follow him on twitter and on MediaCollege

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Subscribe to us on YouTube