john pfeiffer
  • Home
  • Categories
  • Tags
  • Archives

html website optimization

web-site-optimization

tools for testing:
http://www.websitepulse.com/help/tools.php

http://developer.yahoo.com/performance/rules.html

response times:
1. DNS lookup

2.  Reduce HTTP requests
    consolidate your CSS scripts?
    Using CSS Sprites to reduce HTTP Requests

3.  Reduce file sizes
    -seems a no brainer but large images, extra comments in HTML/js
    -even whitespace (but keep the code READABLE!)

imagemagick to convert gif to png, pngcrush  to optimize PNG's
obvious, resize image files, don't use <img width/height>

pngcrush -d outdir -brute *.png

 Load your CSS first and your JavaScript last
 avoid full page tables (the browser won't render until it reaches the end)

Use CSS to load images (most important ones) first!

<div class="background-image"></div>

background-image
{
    background: url(filename.gif);
    width: 200px;
    height: 100px
}

 Using Subdomains for parallel downloads
 -browsers might only download 2 items (e.g. pics) per domain at a time...

Allowing the browser to cache content can reduce future load times
(e.g. multiple pages from the same site)

If you use a far future Expires header you have to change the component's filename
whenever the component changes.
Yahoo! make this step part of the build process: a version number is embedded in the
component's filename, for example, yahoo_2.0.6.js

OR
Set the browser?s cache expiration. This can be easily done using PHP in order to send some headers. For example, let's take a js file called scripts.js. In order to use caching we will create a new file called scripts.js.php and add the following code at the very beginning of it which will set the cache to expire in 3 days:

<?php
    header("Content-type: text/javascript; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 * 24 * 3;
    $ExpStr = "Expires: " .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . " GMT";
    header($ExpStr);
?>


YSlow mozilla firefox plugin can id some common problems...

http://sixrevisions.com/web-development/five-ways-to-speed-up-page-response-times/

  • « index multisort
  • html note self submit php »

Published

Feb 6, 2010

Category

web

~282 words

Tags

  • html 23
  • optimization 4
  • web 56
  • website 5