Web Site Optimization
Section 2: Image Optimization, Optimize Graphics - Tutorials, Resources, Tools, Books
Want to make your images load faster? Need to speed up your page load times, streamline and optimize your photographs, Web graphics, and images?
Many of us already consider optimizing images for Web use by reducing the file sizes as much as possible without noticeable visual degradation. Another aspect of optimizing images is their actual use, such as combining several icons into one image and using CSS for presentation or using one background image for several purposes, also using CSS positioning. Below are tutorials on various approaches to optimizing Web site images and their use, including tutorials specifically for optimizing images in Adobe Photoshop, Corel Paint Shop Pro, and compressing and optimizing Adobe Flash files.
Within the Graphics Optimization, Optimize Images section below, you'll find helpful resources to articles, tutorials, and tools to show you how to optimize your images to reduce their file sizes without degrading how they appear on your Web sites, along with smart ways to combine images using CSS (CSS image sprites), and compressing and optimizing multimedia files.Your pages can load faster, you'll save bandwidth, reduce file sizes, reduce server space, and much more by optimizing your Web site's performance.
Web Site Optimizing in General
- 14 Rules for Faster-Loading Web Sites
Tremendous insight and helpful tips throughout this tutorial series - HTTP requests, the Expires header, Gzip, use of and placement of stylesheets and scripts, DNS lookups, optimizing CSS, JavaScript, ETags, AJAX, iframes, and more. Chapter excerpt from the author's book. [Article/tutorial by Steve Souders, SteveSouders.com.] - 25 Ways to Speed Up your Website
Concise checklist with brief explanations for each. Covers a lot on optimizing images, optimizing code (HTML, CSS, using external CSS and JavaScript), removing unnecessary whitespace, DOCTYPE, reducing HTTP requests, minimizing use of https (secure server), GZIP compression, minimizing use and size of cookies, speeding up your site, improving server performance, such as upgrading memory, hardware and software, separating content and databases, and more. [Article/tutorial dated 12/04/2007, by Justin, Palmer Web Marketing.] - Cost-Effective Website Acceleration
3-part series that covers: Client-side code optimization, Optimal cache control, Server-side modifications. [Article/tutorial dated 03/10/2004, by Thomas Powell, Joe Lima, for SitePoint.com.] - Ten Ways to Speed up the Download Time of your Web Pages
Covers using CSS for layouts, CSS instead of images wherever possible, using contextual selectors, using CSS shorthand, minimizing whitespace, using relative URLs, removing unnecessary meta tags, using external CSS and external JavaScript, remembering the ending slash in your URLs where applicable, and more. [Article/tutorial dated 11/2004, by Trenton Moss, for WebCredible.] - Web Site Optimization: 13 Simple Steps
4-part series that covers: basic optimization rules, optimizing assets (images, scripts, and styles), optimizations specific to scripts, optimizations specific to styles. From their description: “This tutorial takes a practical, example-based approach to implementing those rules. It's targeted towards web developers with a small budget, who are most likely using shared hosting, and working under the various restrictions that come with such a setup. Shared hosts make it harder to play with Apache configuration — sometimes it's even impossible — so we'll take a look at what you can do, given certain common restrictions, and assuming your host runs PHP and Apache.” [Article/tutorial dated 10/24/2007, by Stoyan Stefanov, for SitePoint.com.]
Optimize CSS, CSS Optimization Techniques
See also Optimization Tools below for helpful tools that automate optimization. In addition, CSS shorthand is an important part of CSS optimization. See WebsiteTips.com's CSS Tutorials
CSS Shorthand section.
- Applied CSS Management and Optimization
Dynamic CSS, cache properly, hack management, removing line-breaks and whitespace, splitting up your style sheets, suturing your stylesheets, more. [Article/tutorial dated 02/17/2005, by Mike Papageorge, Fiftyfoureleven.com.] - CSS + PHP: Organized and Optimized?
[Article/tutorial dated 08/31/2004, by Mike Papageorge, Fiftyfoureleven.com.] - CSS Optimization, Compression: Crunch Your CSS with PHP
Compress your CSS with GZIP and remove extraneous whitespace dynamically - carriage returns, extra spaces, extra lines, and comments. In addition to automatically compressing your CSS files, now you can work in your CSS file formatted as you wish and let the server dynamically remove the excess to load much faster for your visitors. Uses PHP. [Article/tutorial dated 01/26/2008, by Shirley Kaiser, for Web Site Optimization Tutorials, Tips, Code Examples, WebsiteTips.com.] - The Definitive Post on Gzipping your CSS Fabulous explanation here, step-by-step tutorial with PHP code included. He describes two different approaches to accomplishing this. “CSS files for larger sites can become pretty large themselves. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size, a fairly significant 'weight loss'.” Editor note: this is the same author as the above 'PHP Manual Comments...' - this tutorial explains all the details and provides links to further resources, too. See my adaption, CSS Optimization, Compression: Crunch Your CSS with PHP.
[Article/tutorial dated 03/30/2007, by Mike Papageorge, Fiftyfoureleven.com.] - PHP Manual Comments re ob_start: CSS - Strip Whitespace with PHP
Commenter via php.net provides PHP function script to remove extraneous white space and carriage returns from CSS. Works beautifully. Editor note: I've implemented this script for websitetips.com and tweaked it a bit specifically for this site's CSS. Really helps. This allows the best of both worlds, too - you can leave your carriage returns and extra spaces to work on your CSS file, and the server will automatically remove them server-side to help save bandwidth and speed up the load time. [Article/tutorial dated 11/10/2006, by Mike Papageorge, fiftyfoureleven.com, via PHP Manual.]
Related within Web Site Resources:
Optimize HTML / XHTML
- HTML Optimization, Compression: Crunch Your HTML with PHP
Remove the extraneous whitespace within your HTML markup and content dynamically - carriage returns, extra spaces, extra lines. Like the CSS example above, now you can update your HTML file formatted as you wish and let the server dynamically remove the excess to load much faster for your visitors. Uses PHP. [Article/tutorial dated 01/26/2008, by Shirley Kaiser, for Web Site Optimization Tutorials, Tips, Code Examples, WebsiteTips.com.] - Crunch Up Your HTML into a Single Line
PHP script to remove extra whitespace and carriage returns from your webpages. Great script that you can then customize further for your site's particular needs. Editor note: I've implemented this script for websitetips.com and tweaked it a bit specifically for this site's needs. Works great and helps a lot with optimization and bandwidth savings. See my adaption, HTML Optimization, Compression: Crunch Your CSS with PHP. [Article/tutorial dated 06/07/2007, by londrum, via WebmasterWorld.] - HTML Optimization
Summary of the chapter on HTML optimization from the book, along with links to figures, code listings, further reading, article highlights, and other related resources. [Article/tutorial dated 10/29/2005, by Andy King, for WebSiteOptimization.com.] - Remove Whitespace
“Whitespace removal eliminates unnecessary spaces, tabs, and returns in your HTML, CSS, and JavaScript code for faster downloads.” [Article/tutorial dated 02/10/2004, by Andy King, WebSiteOptimization.com.]
Related within Web Site Resources:
Optimize JavaScript
- Cruncher Class
PHP script to optimize JavaScript, ActionScript, ECMAScript. Can be adapted for CSS, as well as other programming languages “Compact source code removing comments and spaces.” [PHP script, by Andrea Giammarchi, for PHP Classes Repository.] - Serving JavaScript Fast
Detailed, thorough, step-by-step tutorial on server-side optimizing for Web 2.0 applications, including their content and interaction - JavaScript, CSS, images, and more. Uses Apache, PHP, Smarty. How to make sure you “optimize the size and nature of content required to render the page, making sure” you deliver the optimum experience by making content as small and fast as possible while also avoiding “unnecessarily refetching unmodified resources.” Very well done tutorial. Be sure to check out the comments at the end of the tutorial, too, as there's plenty of Q&A, discussion, alternative ideas discussed, and more. [Article/tutorial dated 05/21/2006, by Cal Henderson, for Vitamin.]
Related within Web Site Resources:
Server-side Optimizing for Web Sites: Techniques / Tutorials, Documentation, and Research
Server-side caching, GZIP compression, reducing HTTP requests, official documentation, and more...
General Server-side Optimization Tutorials
- Tuning LAMP systems, Part 2: Optimizing Apache and PHP
First, the tutorial covers tuning Apache: Configuring the MPM (Multi-Processing Modules); Using options and overrides efficiently; Persistent connections; Compression. Then the tutorial covers tuning PHP: Opcode caching with Zend opcode and eAccelerator; php.ini configuration (“Four important settings control how much system resources PHP can consume...”). The article summary: “This article focused on tuning the Web server, both Apache and PHP. With Apache, the general idea is to eliminate extra checks the Web server must do, such as processing the .htaccess file. You must also tune the Multi-Processing Module you're using to balance the system resources used with the availability of idle workers for incoming requests. The best thing you can do for PHP is to install an opcode cache. Keeping your eye on a few resource settings also ensures that scripts don't hog resources and make the system slow for everyone else.” [Article/tutorial dated 04/30/2007, by Sean A. Walberg, Senior Network Engineer, IBM, for IBM developerWorks.] - Website Performance Tweaks, Part Two
Article/tutorial/discussion about the latest on tweaking Websites for optimum performance, with lots of helpful links and a numbered checklist with brief explanations and related links. See also the previous article Website Performance Tweaks. [Article/tutorial dated 06/24/2007, by Martin Kliehm, Learning the World.]
Server-side Caching Documentation, Tutorials, and Research
Official Documentation, Specifications for Server-side Caching
Official documentation from Apache, W3C on server-side caching and HTTP protocol. See examples of HTTP caching implementation via Research and Tutorials on Server-side Caching below.
- Caching Guide - Apache HTTP Server
Official Apache 2.2 documentation on caching implementation and suggested uses. “This document supplements the mod_cache, mod_disk_cache, mod_mem_cache, mod_file_cache and htcacheclean reference documentation. It describes how to use Apache's caching features to accelerate web and proxy serving, while avoiding common problems and misconfigurations.” [Part of Apache HTTP Server Version 2.2 Documentation.] - HTTP/1.1: Caching in HTTP
Official documentation on server-side caching for HTTP/1.1. Documentation Part of HTTP/1.1 (Hypertext Transfer Protocol) RFC 2616, by W3C. [Specification dated 07/1999, by W3C HTTP - Hypertext Transfer Protocol.] - HTTP/1.1: Header Field Definitions: 14.9 Cache-Control
Official documentation on server-side caching headers for HTTP/1.1. Documentation Part of HTTP/1.1 (Hypertext Transfer Protocol) RFC 2616, by W3C. Editor note: See examples of HTTP caching implementation via Research and Tutorials on Server-side Caching below. [Specification dated 07/1999, by W3C HTTP - Hypertext Transfer Protocol.]
Server-side Caching Tutorials and Research of Approaches / Techniques
- AOL Caching Info
Whether or not you need caching information specifically for AOL, this is a simple tutorial that explains things quite well. Covers Setting Caching Parameters with HTTP headers, Caching Examples using the Cache Formula. Explains all of it, unlike other caching tutorials out there. [Article/tutorial dated 08/24/2005, by AOL Webmaster Info.] - Cache it! Solve PHP Performance Problems
PHP solutions for caching. Goes into quite a bit of detail about caching with HTTP headers, solutions for IE, output buffering, template caching, PEAR Cache_Lite. Also includes sample PHP code, links to other resources. [Article/tutorial dated 11/07/2007, by Ben Balbo, for SitePoint.] - Cache-Control Headers using Apache and .htaccess - Easy Apache Speed Tips
Simple instructions and helpful explanations, along with screenshots to show how to add cache-control, cache-control headers (server-side) for Apache using httpd.conf or .htaccess. [Article/tutorial dated 09/10/2007, by askApache.] - Caching Tutorial for Web Authors and Webmasters
Fantastic tutorial that goes into quite a bit of detail about caches - Web caches (browser caches, proxy caches), the reality about caches, how Web caches work, how and how not to control caches (HTML meta tags vs HTTP headers, Pragma HTTP headers, Expires HTTP header, cache-control HTTP headers, validators and validation), tips for building a cache-aware site, writing cache-aware scripts, FAQ, implementation notes for Web servers and SSI, and references and further information. Recommended as a must-read tutorial.[Article/tutorial dated 03/17/2007, by Mark Nottingham, mnot.net.] - How To Optimize Your Site With HTTP Caching
Fabulous graphic illustrations here in this well-done tutorial on optimizing your site with HTTP caching. Topics explain what caching is and how it works, HTTP request and response. Also explained are various methods of HTTP caching - Last-Modified, Etag, Expires, Max-Age, Public and Private, enabling caching, and ways to check that your implementation is working as intended. [Article/tutorial dated 04/07/2007, by Kalid Azad, BetterExplained.com.] - Performance Research, Part 2: Browser Cache Usage - Exposed!
Part 2 in a series of experiments by Yahoo! to learn more about optimizing Web page performance. Explains why the browser cache matters. Also shows page load times for full cache vs. new visitor (no cache). Research also showed percentage of users with full caches, empty caches - much to their surprise, “40-60% of Yahoo!'s users have an empty cache experience and ~20% of all page views are done with an empty cache.” This research showed them the importance of considering the prevalence of visitors with empty caches with your own sites and optimization considerations. [Article/tutorial dated 01/04/2007, by Tenni Theurer, for Yahoo! User Interface Blog.]
Server-side Compression Tutorials / Techniques
GZIP compression, Apache file compression, etc.
- How To Optimize Your Site With GZIP Compression
Explains how browsers and servers 'talk' to each other, how compressing works and how it helps users and bandwidth, how to configure your server for GZIP compression with httpd.conf, .htaccess, or using PHP. Also shows how to verify that your compression is working using several free tools. [Article/tutorial dated 04/04/2007, by Kalid Azad, BetterExplained.com.] - Speed up a Web Site by Enabling Apache File Compression
Excellent, thorough tutorial that covers: How to enable file compression, Enable file compression using mod_gzip, Enable file compression using mod_deflate, What does it do?, How well does it work?, When doesn't it work?, What else could be used?, Conclusions, Further reading. [Article/tutorial dated 03/01/2007, by Dr. David R. Nadeau, Nadeau Software Consulting.]
Techniques, Research on Reducing Server-side HTTP Requests
See also above, Optimize Images with CSS Sprites, a technique that combines several images into one image and uses CSS for presentation.
- Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
Part 1 of a 4-part series on research findings by Yahoo! “to learn more about optimizing Web page performance.” The findings from part 1: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” [Article/tutorial dated 11/28/2006, by Tenni Theurer, for Yahoo! User Interface Blog.] - Reducing HTTP Requests
Explains HTTP requests, data packets, and packet size. Also discusses several ways to reduce HTTP requests, such as suturing external JavaScript files, suturing CSS files, suturing images, recycling background images, and more. [Article/tutorial dated 05/30/2006, by Mike Papageorge, Fiftyfoureleven.com.]
Web Sites, Web Site Sections Devoted to Web Site Optimization
- Exceptional Performance
Section at Yahoo! Developer Network that includes helpful tutorials, videos, research papers, and more on optimizing Web sites. Most by Steve Souders. Fabulous resource. From the site: “Yahoo!'s Exceptional Performance team evangelizes best practices for improving web performance. They conduct research, build tools, write articles and blogs, and speak at conferences. Their best practices center around the rules for high performance web sites.” [Web site section part of Yahoo! Developer Network.] - Web Site Optimization
About.com's section devoted to site optimization. Tutorials on many aspects of optimization - image optimization, optimizing CSS, optimizing HTML, reducing whitespace, removing comments, converting images to CSS where possible, using external JavaScript and CSS, much more. [Web site section part of About.com: Web Design/HTML, by Jennifer Kyrnin, Guide to About.com Web Design/HTML.] - Website Optimization
An entire site devoted to optimizing websites. Lots of helpful articles and tutorials on handling just about every aspect of website optimization. [Web site: Website Optimization, by Andy King.]
Web Site Optimization Tools
Combined Optimization Tools
Helpful tools that optimize two or more combined, such as CSS and HTML, or CSS, HTML, and JavaScript.
- PHP Speedy
A convenient, easy approach to optimizing your Web site for speed by installing a script on your server. In a nutshell, “PHP Speedy is a script that you can install on your web server to automatically speed up the download time of your web pages.” PHP Speedy will automatically compress your HTML, CSS, JavaScript - server-side by installing the script on your Web server. This script automatically does all of the following:- Make fewer HTTP requests
- Add a far-future expires header
- Gzip your page's components
- Minify your JavaScript, CSS and HTML
- PHP Speedy WordPress PLugin - Preview Release
[Server-side PHP Script dated 03/07/2008, by Leon Chevalier, AcidDrop.com.]
CSS Optimization Tools
The tools listed below are either standalone tools or plugins. Note that many CSS and HTML software programs include CSS optimization options within them, including Newsgator TopStyle CSS, HTML, XHTML Editor and others.
- CSS Formatter and Optimiser
Free online tool by the creator of csstidy and based on csstidy 1.3dev. English, Deutsch, French, Chinese. [Optimizer Tool, by Florian Schmitz, floele.flyspray.] - CSS Tweak
Upload or copy/paste your CSS with this free online CSS optimizer tool. “One major difference from other tools however, is that you can stop it from altering your syntactical layout. Instead it will go through and stick with the code layout structure you have defined, and clean up any areas that are incorrectly formatted. Some other tools tend to reformat your CSS, and move things around.” [CSS Tool by Andy Peatling, Blaze New Media.]
Related within Web Site Resources:
HTML Optimization Tools
The tools listed below are either standalone tools or plugins. Note that many HTML software programs include HTML optimization options within them, including Newsgator TopStyle CSS, HTML, XHTML Editor, Macromedia HomeSite, and others.
- HTML Tidy
Created originally by Dave Raggett and now continues with a team of developers. HTML Tidy has optimization options, in addition to cleaning your HTML. HTML Tidy is already included in many HTML editors, CSS editors. Free. [HTML tool via HTML Tidy Library Project.] - HTML-Optimizer, HTML-Optimizer Pro, Web Site Maestro
Optimize HTML with HTML-optimizer, and optimize scripting, images, and more with HTML-Optimizer Pro and Web Site Maestro. Available for Mac and Windows. [Web site optimization tools by Tonbrand Software.]
Related within Web Site Resources:
Web Site Images Optimization Tools
The tools listed below are either standalone tools or plugins. Note that many graphics software programs include image optimization within them, including Adobe Fireworks, Adobe Illustrator, Adobe Photoshop, Corel Paint Shop Pro, and others.
See also Section 2: Image Optimization.
- GIFBot
Online tool that compresses GIF, JPEG, and animated GIF images. Free trial, use by subscription. [Image Optimization tool by NetMechanic.] - ReaCompressor
“This utility provides you with an ability to choose from the most effective compression formats for your image: JPEG, GIF or PNG. By showing an image in your own settings and desired quality it helps you better optimize an image and make the right decision on its format, quality and size. Your original graphic file can be in any format.” Software for Windows. Pricing January 2008: Personal:$24.95, Business: $49.95, Site (Company): $99.95. [Image Optimization tool by ReaSoft Development.]
Related within Web Site Resources Web Site Optimization, Speed Optimization:
Related within Web Site Resources Graphics:
Recommended Books on Web Site Optimization
- High Performance Web Sites: Essential Knowledge for Front-End Engineers By Steve Souders. Published by O'Reilly Media, Inc. (September 11, 2007). From the book's description:
Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web. Even sites that had already been highly optimized, such as Yahoo! Search and the Yahoo! Front Page, were able to benefit from these surprisingly simple performance guidelines. The rules in High Performance Web Sites explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site — adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. High Performance Web Sites covers every aspect of that process.
Each performance rule is supported by specific examples, and code snippets are available on the book's companion web site.
Author's website: SteveSouders.com.
- Website Optimization: Speed, Search Engine & Conversion Rate Secrets By Andrew B. King. Published by O'Reilly (July 8, 2008). Andy King's book is an absolute must have book for anyone creating or maintaining Web sites. He provides valuable information, examples, and great insight on how to optimize Web sites - for speed, search engine visibility, improved conversion rates, helpful metrics and tools, and more. Even if you think you've done a lot of optimizing already, you'll always find more possibilities within Andy's fantastic book. Highly recommended. From the author:
Author's site: WebsiteOptimization.com.This new book, Website Optimization: Speed, Search Engine & Conversion Rate Secrets, offers a comprehensive set of techniques with which to improve your site's performance: boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.
Hey there! It is really a great and useful information. I was looking best assignment writer for a very long time. Thanks for sharing!
ReplyDelete