Skip to main content

Tips to save client's bandwidth

Posted by ahashim on March 21, 2007 at 7:08 AM PDT

http://egjug.org/hashimblog/2007/03/20/tips-to-save-clients-bandwidth/

In this post, I will write about the client/server bandwidth saving. In some countries, the cost of the Internet is based on the bandwidth consumption, you pay for the number of MB's you have used as traffic, so, if there is a website which contains pages with large size, you will consume the client bandwidth! Also the request will take long time because of the large size of the page. People always talking about saving server bandwidth which is good, but it is important too to save the client's bandwidth.
How can I save the client's bandwidth?

  1. Don't use images instead of text. Write the text and use CSS and javascript to add styles and effects for the text. For example, if you want to make a link to your homepage, some people use graphics package to write the word 'Home' and add effects, background color, borders..etc. All this staff can be done by CSS and JavaScript with a great feature "you can change the text without need to use any graphics package". So, it is very important point to replace images with text as much as possible.
  2. Don't use background image if it is blank, else use CSS background color.
  3. Don't use a big image as background, try to make a small on and repeat is using CSS.
  4. Don't write HTML comments in your code, instead, write server side comments in JSP, PHP ...etc code.

    HTML comments <!-- comments -->
    JSP comments <%--comments --%>
    <?php
    //comments
    ?>
  5. Don't copy-past from any word processor. The word processor like Microsoft Word add extra not-standard code, check this bulk of code

    <p class="MsoNormal" dir="ltr" style="text-align: left; unicode-bidi: embed"><span style="font-size: 10pt; color: black">Test
    the Microsoft Words HTML code!</span><span dir="rtl" lang="AR-SA"><o:p></o:p></span>
    I want just to write a statement "Test the Microsoft Words HTML code!" without any styles but the word add intelligent code :)
  6. Don't make inline CSS, move it to a file. Don't repeat the styles and reuse those in the common CSS. For example, you will repeat the same style for every item in a list like that

    <ul>
    <li style="color:#fffaaa;font-size:20;">1</li>
    <li style="color:#fffaaa;font-size:20;">2</li>
    <li style="color:#fffaaa;font-size:20;">3</li>
    <li style="color:#fffaaa;font-size:20;">4</li>
    </ul>
    While you can make

    .listItemStyle
    {
    color:#fffaaa;
    font-size:20;
    }

    and the list will be

    <ul>
    <li class="listItemStyle">1</li>
    <li class="listItemStyle">2</li>
    <li class="listItemStyle">3</li>
    <li class="listItemStyle">4</li>
    </ul>

    This will keep your code clean and easy to use. The code will be reusable and easy to maintain.
  7. Don't make inline Javascript, move it to a file. This will promote reusability and maintainability.
  8. Use client side validatoin with JavaScript before submitting the data to the server. So, if there is an error in the data, you will not submit and back again.
  9. Use AJAX to send partial requests to the server. For example, if you have 2 dropdown, one for the country and another for the city and want to load the cities of the countries choose by the user, no need to submit the complete form, just send request with the country and use the returned data from the server to update the DOM of the page.
  10. Use JavaScript and CSS compressor to compress the javascript and css files, it will be sent to the client, so try to minimize the size as much as possible.
    The CSS compressor can reduce the size of the CSS files. You can use the DOJO compressor or any other javascript compressor.
  11. Use valid XHTML code to make sure that your code is correct.
  12. Use compression in the webserver/application server used in your application, this will compress the request/response and will save both client and servers's bandwidth. This may have a performance impact. An example for tomcat configuration:

    <Connector port="8080" maxHttpHeaderSize="8192"
    maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
    enableLookups="false" redirectPort="8443" acceptCount="100"
    connectionTimeout="20000" disableUploadTimeout="true"
    compression="no"
    />

    You will need to add to this four attributes:
    compression="force"
    compressionMinSize="2048"
    noCompressionUserAgents="gozilla, traviata"
    compressableMimeType="text/html,text/xml"
    Notice that there is a list of compressible MIME types. Basically:
    * compression="no" means nothing gets compressed.
    * compression="yes" means only the compressible MIME types get compressed.
    * compression="force" means everything gets compressed (assuming the client accepts gzip and the response is bigger than compressionMinSize)You can test your application compression http://www.port80software.com/products/httpzip/compresscheck
  13. Use the ZipOutputStream as a resonse output stream if you will return to the user a big plain text file. This will compress the file on the server and send it, the client's browser will extract it.

    String encoding = request.getHeader("Accept-Encoding");
    OutputStream out = null;
    if (encoding != null && encoding.indexOf("gzip") != -1) {
    response.setHeader("Content-Encoding", "gzip");
    out = new GZIPOutputStream(response.getOutputStream());
    }
    else if (encoding != null && encoding.indexOf("compress") != -1) {
    response.setHeader("Content-Encoding", "compress");
    out = new ZipOutputStream(response.getOutputStream());
    }
    else if (encoding != null && encoding.indexOf("deflate") != -1) {
    response.setHeader("Content-Encoding", "deflate");
    out = new DeflaterOutputStream(response.getOutputStream(), new Deflater(
    Deflater.BEST_COMPRESSION, false));
    }
    else {
    out = response.getOutputStream();
    }
    out.write(".....");
  14. Optimize your resources (images, flash).
  15. Another great tip from the comments below, use the Cache-control headers to cache the static resources on the client side for a specific duration. A perfect example is there
    OnJava.

This will result in save the client/server bandwidth and develop more fast web application.

References:

http://www.cssdrive.com/index.php/main/csscompressor/
http://dojotoolkit.org/docs/compressor_system.html
http://javascriptcompressor.com/
http://java.sun.com/j2se/1.4.2/docs/api/java/util/zip/ZipOutputStream.html
http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
http://www.codinghorror.com/blog/archives/000059.html
http://tomcat.apache.org/tomcat-5.5-doc/config/http.html
http://fmarcia.info/jsmin/test.html

Related Topics >>