home web design graphic work Web Advisor Quote contact

• Leveraging browser caching:
  Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
  In an .htaccess file type the following
  # Asset Expiration
  ExpiresActive On
  ‹FilesMatch "\.(ico|gif|jpeg|png|js|css)$"›
  ExpiresDefault "access plus 1 year"
  ‹/FilesMatch"›
• Optimizing images:
  Properly formatting and compressing images can save many bytes of data.
  Images saved from programs like Fireworks can contain kilobytes of extra comments, and use too many colors, even though a reduction in the color palette may not perceptibly reduce image quality. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum
  Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format.
  Advanced optimization involves further (lossless) compression of JPEG and PNG files. You should see a benefit for any image file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain).
  Choose an appropriate image file format. Type of an image can have a drastic impact on the file size:
  
  1. PNGs are almost always superior to GIFs and are usually the best choice. IE 4.0b1+, Mac IE 5.0+, Opera 3.51+ and Netscape 4.04+ as well as all versions of Safari and Firefox fully support PNG, including transparency. IE versions 4 to 6 don't support alpha channel transparency (partial transparency) but they support 256-color-or-less PNGs with 1-bit transparency (the same that is supported for GIFs). IE 7 and 8 support alpha transparent PNGs except when an alpha opacity filter is applied to the element.
  2. Use GIFs for very small or simple graphics (e.g. less than 10x10 pixels, or a color palette of less than 3 colors) and for images which contain animation. If you think an image might compress better as a GIF, try it as a PNG and a GIF and pick the smaller.
  3. Use JPGs for all photographic-style images.
  4. Do not use BMPs or TIFFs.
• Specifying image dimensions:
  Specifying a width and height for all images in the HTML ‹img› tag, or in CSS allows faster rendering by eliminating the need for unnecessary reflows and repaints.
• Minifying CSS and JavaScript:
  Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time. Minifying CSS has the same benefits as those for minifying JS: reducing network latency, enhancing compression, and faster browser loading and execution.
• Removing unused CSS:
  Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner. If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.
• Combining external JavaScript:
  Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources. If your site contains many JavaScript files, combining them can dramatically reduce latency. Serve as few JavaScript files from the document ‹head› as possible, and keep the size of those files to a minimum. Serve JavaScript of a rarely visited component in its own file. Serve the file only when that component is requested by a user. For small bits of JavaScript code that shouldn't be cached, consider in lining that JavaScript in the HTML page itself.