Site Optimization

1
Site Optimization
2
Images

• Remove all superfluous images from your pages.
• Getting rid of a 10-KB image off your site may
  not sound like that impressive an improvement.
  But if you're working with a 40-KB page, that 10
  KB represents a 25 reduction in download time
• Consider axing graphical submit buttons and
  replacing them with text submits

3
Images

• Replace animated GIFs with static images, which
  take a fraction of the time to download.
• A lot of fancy "header" graphics can be replaced
  by paying with font styles and sizes using style
  sheets.

4
Images

• Unless you're bent on evoking that retro-fly
  feel, you will use some images on your pages.
• Just follow a few simple guidelines as you
  generate your images, and your pages will
  download in record time.
• Decide whether a given image ought to be a GIF or
  a JPEG

5
GIFs vs. JPEGs

• Graphics in their natural state are too big to be
  quickly downloaded over the Web, so you have to
  compress them.
• The standard compression formats are GIF and JPEG
  (compression, by the way, doesn't shrink the
  dimensions of your graphics, it just reduces the
  size of the file).
• But which the better format to use? The answer to
  this question is It depends.

6
GIFs vs. JPEGs

• It depends on
• the type of image you're working with,
• how small you want your image file to be,
• the way you want your graphic to download.

7
GIFs vs. JPEGs

• One of your primary considerations is the type of
  image you're working with.
• Photographs and graphics with lots of color
  fields, and particularly colors that blend and
  fade into one another, are best served by JPEG.
• If, on the other hand, your image has flat color
  fields it will compress well in the GIF format.

8
GIFs vs. JPEGs

• Good JPEG Good GIF
• The reason for choosing JPEG for images with more
  complex colour patterns is that this format
  enables you to save images with millions of
  colours, whereas the GIF option restricts you to
  256 colours.

9
GIFs vs. JPEGs

• File Size
• JPEG permits a greater degree of compression than
  the GIF alternative, enabling quicker downloading
  times for larger graphics. And JPEGs appear to
  retain almost complete image quality for most
  photographs.
• Eg. the photo in the next slide has been
  compressed as a JPEG and as a GIF. Those dots you
  see in the GIF are called "dithering," and they
  come from that format's characteristic adjusting
  of pixels within a graphic to simulate the
  display of colors not in the GIF's color palette.

10
GIFs vs. JPEGs

• JPEG
• GIF

11
GIFs vs. JPEGs

• But don't write off the GIF just yet. For one
  thing, the JPEG format does not work well for
  graphics that contain large fields of color -
  these color fields can break up and fragment and
  look terrible.
• Another plus is that the background of a GIF can
  be made transparent, so you see the background
  color of the browser window you're in.
• Finally, GIFs can also be animated,
• Poor old JPEGs just have to stand still.

12
Optimizing Your Images

• Optimizing Essentially reducing the file size of
  a picture so it loads on a Web page as quickly as
  possible.
• All Web images are compressed in some fashion.
• Thanks to the fact that most browsers don't
  support PNG (portable network graphics), the
  still images you use on the Web are either going
  to be GIFs or JPEGs.

13
Optimizing Your Images

• Optimizing JPEGs is generally pretty simple. You
  don't need to mess with colour palettes or bit
  depth or any of that nonsense just choose a
  resolution on a scale from "minimum" or "lowest
  quality" (the smallest file size) to "maximum" or
  "best quality" (fastest file size).
• You'll be able to see the trade-offs between
  image quality and downloading time quite easily.

14
Optimizing Your Images

• Minimum JPEG quality
• Maximum JPEG quality

15
Optimizing Your Images

• GIFs are a little trickier, but they're also more
  flexible in some ways.
• The main factors that you can tweak in a GIF are
  
• colour depth,
• colour palettes,
• dithering,
• transparency.

16
Optimizing Your Images

• Color Depth
• The more colors your graphic uses, the more file
  space the color information will take up.
• This color information is denoted in either of
  two ways bit depth or simply the number of
  colors.
• GIFs can use as many as 256 colors, which is
  known as 8-bit color, or as little as two colors
  (black and white), known as 1-bit color.

17
Optimizing Your Images

• Color Depth
• You want the color depth as low as you can get it
  and still have your graphic look good. Here's the
  Hula Girl banner ad at different bit depths
• 2 colours/1-bit 8 colours/3-bit
  16 colours/4-bit
• 256 colours / 8-bit

18
Optimizing Your Images

• Color Palettes
• Your GIF file includes the values of all the
  colors that make up the image. When you create
  the image, you can choose which palette you want
  to use.
• Unfortunately, the Macintosh and Windows
  256-color system palettes are not exactly the
  same, so your picture will look different
  depending on the platform.
• That leaves the Web palette, which consists of
  the 216 colors that are common to both, so your
  image will display correctly on both platforms.

19
Optimizing Your Images

• Color Palettes
• GIF-related programs often give you some other
  palette choices.
• The only one which is useful is the "Adaptive"
  palette, which sizes up your image and constructs
  a palette related to the colours you've used.
• Worth checking out because it deals well with
  gradients.
• Try both the Web and Adaptive palettes and see
  for yourself which looks the best.

20
Optimizing Your Images

• Dithering
• When GIFs reduce an image's color depth, you'll
  often see gradients turn into bands of color.
• If you don't like these color bands, you can use
  "dithering" to insert little dots of color that
  smooth the transitions (thereby creating the
  illusion of blended colors).
• Dithering does, however, make your file size
  bigger.

21
Optimizing Your Images

• Dithering
• Dithered
• Not dithered

22
Optimizing Your Images

• Transparency
• You can pick a single color in your GIF and have
  that color become invisible when the image
  appears on a Web page so the page's background
  shows through.

23
Images

• GIFs are perfect for smaller graphics that should
  look crisp and clean, but don't need more than
  256 colors.
• Simple company logos, small buttons, and
  navigation bars are good examples of graphics
  that should be saved in GIF format.

24
Images

• Unlike JPEGs, GIFs are a "loss-less" compression
  format, so the details of your graphic won't get
  blurry. If you're scanning something like a
  finely detailed map, you'll want to choose the
  GIF format to display it.
• Just keep in mind that using GIFs for large
  pictures leads to huge file sizes and long
  download times.

25
Images

• JPEGs display thousands of colors and can often
  be compressed into much smaller files than GIFs.
•  
• Just keep in mind that when you compress a JPEG
  you'll dirty up some of a photograph's finer
  details.
•  
• Experiment with compression. Try saving files in
  both formats and compare their kilobyte size and
  image quality until you get a feel for what you
  can get away with.

26
Images

• While your image editor is open, make sure the
  image is the same size (at 72 dpi) as it will
  appear on the Web page.
• Use the WIDTH and HEIGHT attributes of the
  tag to restate the image's actual
  dimensions.
• Allows the browser to render the rest of the page
  while the image is still downloading - so people
  have something to read while they wait.
• Also ensures that people surfing with "images
  off" will still see the page in its proper
  layout.

27
Images

• If you're using tables on your page, image
  dimensions take on a special importance -
  dimension-less images sometimes force browsers to
  clear and re-render the page.
• This occurs when a browser starts building the
  table's structure according to the HTML-specified
  and dimensions and then discovers
  that an image is, in fact, too large to fit.
  Browsers will then re-render the table to
  accommodate the unwieldy image.
• This takes time, and the user sees pages
  continually disappear and reappear.

28
Images

• Never use the WIDTH and HEIGHT attributes to
  re-size or adjust the shape of graphics on your
  pages.
• Re-sizing via HTML is bad for two reasons
• If you increase an image's dimensions larger than
  the image's actual size (at 72 dpi), you'll end
  up with a jagged picture.
• Using HTML to make an image appear smaller than
  its true size doesn't always look as bad, but
  much more data gets downloaded than the browser
  actually needs for drawing the image, thus adding
  to the download time.

29
Images

• One case where it's acceptable to break this rule
  - if you are downloading the same gif file at two
  different sizes
• Only do this with images that lack any curves or
  diagonal lines (to avoid jaggedness).
• If you've got a logo or design that's all right
  angles you can use a super-small GIF (which
  downloads quick) and then re-size it to your
  heart's content in HTML.
• Remember to keep the dimensions proportional.

30
Images - Cache Is Your Friend

• Those images that repeat throughout your site -
  like common logos, headers, or navigation bars -
  don't always need to download again and again.
• By default, Netscape and IE set aside a memory
  cache to store recently used images in RAM and on
  the hard disk.
• If a browser recognizes the same filename, it'll
  pull the image straight from the cache instead of
  downloading it - provides a massive performance
  boost.

31
Images - Cache Is Your Friend

• Try to design pages with the browser cache in
  mind.
• E.g., if your site uses a number of different
  header graphics that vary only slightly (like a
  standard logo with various department names
  underneath it), try breaking up the image so that
  the unchanged portion (the standard logo) is
  stored in the cache and always loads immediately.
  
• Though you'll still need to load a new graphic on
  each page (in this case, a department name), the
  image is smaller and therefore downloads faster.

32
3 Kinds of Speed

• When it comes to the Web, there are three kinds
  of speed
• Download time
• Render time
• Visual accessibility
•  
• A user makes the split-second decision between
  clicking through or heading back, based upon a
  combination of these three types of speed.
• A good designer needs to find a way to balance
  the three elements to create the ideal download.

33
3 Kinds of Speed

• The time between the user clicking to request a
  page until it is actually usable should be
  blink-of-an-eye short.
• Note that this timeline ends the first second a
  visitor is able to access a page, not when the
  page finishes rendering.
• In terms of user experience, rendering time is
  often academic

34
3 Kinds of Speed

• There is an important distinction between actual
  speed and perceived speed.
• Knowing when a page has rendered enough to be
  useful (as opposed to a concrete ceiling of 10 KB
  or a "no more than three graphics per page" rule)
  gives a designer the layout latitude necessary to
  create a successful page.

35
Perceived Page Size

• To decrease the perceived size of my pages. keep
  the use of graphics and image sizes to a minimum.
  
• However, rather than simply reduce the number of
  colors in an image, also pay close attention to
  the arrangement of color.
• A GIF is just a list of colors. If a GIF is 10
  pixels high, then the list of colors has 10
  lines, or rows. If the first row is 100 white
  pixels wide, the GIF format saves space by
  writing "white" once then adding an annotation to
  repeat that color 99 more times.

36
Perceived Page Size

• This method must be repeated for every row, so it
  doesn't really matter if line 2 is pink, line 3
  is blue, etc.
• It is, however, a big deal if colors change
  within a row. If the first row alternates between
  black and white - the GIF format can't save space
  with an annotation, it has to remember white,
  black, white, black, white, etc.

37
Perceived Page Size

• When you need to change colors along the
  horizontal axis, at least block out as many like
  colors as possible.
• 20 white pixels, followed by 20 pink pixels,
  followed by 20 blue, 20 red, 20 green will index
  nicely as FFFFFF x 20, FF00FF x 20, 0000FF x
  20, FF0000 x 20, 00FF00 x 20, and thus compress
  smaller.

38
All Text, No Image

• Use text instead of graphics whenever possible.
• Designers pride themselves on bringing life to
  the rendered word by using the type face that
  best suits the meaning of a text. And chances are
  that Cinderella-slipper typeface does not exist
  on the user's machine. And thus GIF text is born.
  
• If you're dropping words into an image merely to
  preserve the integrity of the typeface or control
  type size and spacing, you're doing nothing to
  further the message of the page. So don't do it.

39
All Text, No Image

• To really reduce downloads, leave the rendering
  to the user's operating system.
• Today, browsers render by using specifications in
  the HTML document that rely directly on the
  operating system.
•  
• Using the client's computer to generate fancy
  fonts or shapes is the most efficient use of
  bandwidth and processing power - embedding that
  information in a GIF by way of a bitmap is simply
  a waste of resources.

40
All Text, No Image

• Define your rectangles in HTML (either with a
  table or a div/layer), use ASCII for your text,
  leave the font to the operating system, and give
  everything color with a Hex value (such as
  FF0000 for red).
•  
• At the moment, we can't make circles, and we
  pretty much have only Helvetica/Arial, Times, and
  Courier available to us as typefaces. But getting
  used to these limitations is the key to designing
  fast pages.
• For every complex polygon, pretty font, and
  photograph, you pay the price of a GIF or JPEG in
  download time.

41
All Text, No Image

• Play around with your images. Experiment with
  different ways to convey the message of your
  page.
• Try to strike a balance between the three types
  of speed.

42
Optimising Tables

• s and s might be the ideal way to lay
  out a page, but you'll lose the people running
  2.x and 3.x versions of browsers.
• If you want a true cross-browser, cross-platform
  design solution, you still have to lay things out
  on the table.
• Unfortunately, tables also increase the time it
  takes to display a Web page, and sometimes by a
  substantial amount.

43
Optimising Tables

• Because browsers need to fully understand a
  table's structure before it can draw the table's
  contents, nothing can be rendered until most, if
  not all, of the table's content is downloaded.
• As tables get bigger, the amount of info that
  needs processing increases exponentially.
• On older computers, all this processing-intensive
  work doesn't come easy, and serious time can pass
  before a table renders.

44
Optimising Tables

• Chop Up Your Tables
• Lots of little tables render faster than one big,
  many-rowed table. At least they seem to - which
  is what really matters (remember perceived speed
  over actual speed).
• If you've got a 9-row table that fills up a few
  screens full of information, break it into 3
  smaller tables of three rows each.
• This strategy is particularly beneficial if your
  Web pages are scrolling - your users can enjoy
  the contents of your first table as tables
  continue to load down in the nether regions of
  your page.

45
Optimising Tables

• Use the Width Attribute
• To make sure your HTML is as browser-friendly as
  possible, make sure you're using the Width
  attribute of the and tags properly.
• This allows you to define the width of the entire
  table, as well as the width of the individual
  cells that make up the table. If things don't add
  up, you'll confuse the browser and slow it down.
• If you size a cell at 100 pixels wide, and then
  stick a 110-pixel image into it, the table will
  temporarily appear, then disappear as it
  re-renders itself to make room for the image -
  annoying and slow.

46
Optimising Tables

• Table Your Forms
• Different browsers and operating systems deal
  with form elements differently.
• A pulldown menu on a Mac is considerably wider
  than the same form in Windows.
• Netscape 4 treats a write-in box like text, so
  increase the default font size in your browser
  preferences and all the text boxes get bigger
  too.
• Write-in boxes in Netscape 4 are a good 20 wider
  than in other browsers, and can be formatted by
  font tags.
• So, all in all, your forms will look mighty
  strange to some users unless you reign them in
  somehow.

47
Optimising Tables

• Table Your Forms (cont.)
• Enter tables
• Suppose a user increases the default font size in
  his or her preferences. As the table stretches to
  accommodate the bigger text, the axis (or layout)
  remains intact.

48
Optimising Tables

• Don't Trust WYSIWYG Editors
• While HTML editors make it easier to create
  tables, they can produce amazingly inefficient
  code.
• The layout and preview windows of WYSIWYG editors
  often make it tough to spot unnecessarily nested
  tables, improperly sized table columns, or
  strange, roundabout HTML code.
• If you want your tables to be as slim and as
  efficient as possible, but you still want to use
  your WYSIWYG editor, then budget some time at the
  end to clean up your code.

49
Optimising Tables

• Never Nest Tables
• Because the browser must work from the inside out
  - assessing how large the inner table will be
  before the structure of the outer table is
  calculated - nested tables make for a nasty
  performance hit.
• So avoid using nested tables whenever possible,
  even if it means making minor alterations to page
  layout.
• If you must use nested tables, at least keep the
  nested table as simple as possible, and never,
  ever nest three levels deep - i.e., nesting a
  table within a table that's nested within a
  table.

50
Optimising Tables

• Never Nest Tables Unless ...
• Well, a simple table nested in a simple table
  nested in a simple table (by "simple" we're
  talking only one or two rows and cells)
  translates into only a few lines of code, which
  can be much easier for a browser to stomach than
  one super-complicated table.

51
Optimising Tables

• This checkerboard composition involves no nested
  tables, however its complexity means slow
  rendering.
•  

52
Optimising Tables

• By using a nested table, the simple part of the
  composition is kept separate from the complex
  checkerboard. The end result is the same, but the
  complex checkerboard table doesn't interfere
  nearly as much with rendering of the "this is
  easy" copy.
•  

53
Optimising Tables

• The key to tables is to find the most efficient
  way to arrange them. Sometimes nested tables are
  actually the answer, but mostly they're not.

54
Better Structure, Faster Page

• Here is an example of a typical Web page the
  branding across the top, navigation down the left
  side, and content in the remaining part of the
  page.
• It is common for such pages to be
• constructed using a large table that
• defines the entire grid. With the
• branding, navigation, and content
• tables nested within the overall
• framework table, this can be a very
• difficult page for the browser to render.

55
Better Structure, Faster Page

• Here is the same page structure, only, this time,
  the branding, navigation, and content are all
  defined with independent tables. 
• By making each table independent
• and concise, the browser can render
• each element as soon as it finishes
• reading it.
• The first elements of the page appear faster, and
  the user can take advantage of the features at
  the top of the page immediately.

56
Better Structure, Faster Page

• In the second example, the branding table loads
  first on the page, followed by the navigation
  table, the content loads next, positioned to the
  right. The overall page loads quickly, and the
  user has something to see and use almost
  immediately.
• So, as with images, to get the best results with
  your tables, you need to play around with a
  variety of solutions until you get a layout that
  both you and your users can live with.

57
Better Structure, Faster Page

•  
• It may seem like a lot of effort just to shave a
  few seconds off a page's load time, but as the
  competition for users becomes more and more
  fierce, those seconds can be all that stand
  between your visitors and the Back button.

58
Further Optimization Strategies

• So now that you've streamlined your images and
  tables as much as possible, here are some final
  things to consider as you make one last pass over
  your pages.

59
Further Optimization Strategies

• Lose the Link Farms
• A lot of publishers (ZDNet and CNET for instance)
  choke their pages with links, providing a link
  from every page to every other page on the site
  and often to other Web sites they publish.
• Cross-linking like this is usually done for
  marketing reasons to raise readers' awareness of
  other content or sites published by the same
  company. But you don't have to be a human-factors
  expert to realize that the more links sit on a
  page, the less likely any single one will be
  read.

60
Further Optimization Strategies

• Lose the Link Farms (cont.)
• After 10 links or so, readers tend to tune out
  entirely and just read the article in the middle
  of the page. These unread, untouched "link farms"
  can take up as much as 50 percent of a page's
  HTML. And, unlike logos or icons that stay in
  cache, they're downloaded all over again with
  every page.
• The long URLs behind many of those links add up. 

61
Further Optimization Strategies

• Junk the JavaScript
• JavaScript is an interpreted language rather than
  a compiled one, which means it needs to be parsed
  after it's loaded.
• Perform hands-on tests on the JavaScript in your
  page to see how it affects loading and
  initialization time.
• Trash the Tickers, Counters, and Other Moving
  Parts
• To be blunt, not that many people care about how
  many visitors you have (if it's some impressive
  number, hard-code it into your page and update it
  whenever there's been an impressive leap).
• And initializing Java and loading an applet just
  to make some text scroll across the page just
  isnt worth the wait.

62
Further Optimization Strategies

• Put Your Pages to the Test
• To push your speed improvements through to your
  readers, you need to set performance standards
  and make sure that you meet them.
• Don't just ask yourself "How fast is this page
  now?" and try to improve that. Ask yourself "How
  fast does this page need to be?" Either eliminate
  the wait or make your pages worth it.
• The best way to set reasonable guidelines is by
  checking out the competition.
• Find the sites that provide the sort of content,
  service, value, etc. that you're shooting for,
  and then study their performance.
• Do a little role-playing surf around as one of
  your targeted users might and see where you end
  up.  

63
Further Optimization Strategies

• Put Your Pages to the Test
• When you've picked out your benchmark pages,
  decide what to use as the finish line of your
  time trials. It may be once the entire page is
  loaded, but you might also want to focus on how
  long it takes for one particular item to load
  (e.g., the top headline on a news site).
• How to Time Sites   
• Create a list of pages to compare.
• Then sit down at your test computer, clear the
  browser cache (unless the test calls for having
  certain images in cache), and load the first
  page.
• Record the time lapse.
• Clear the cache, reset your stopwatch, and load
  the second page. Clear the cache and load the
  third, etc.

64
Further Optimization Strategies

• Put Your Pages to the Test
• How to Time Sites  (cont.) 
• After loading each page once, start over with the
  first one and go through the list again. After
  enough trials (5-7), throw out the high and low
  times for each page to account for network
  hiccups or human error.
• The three to five remaining times are usually
  very close together. Compare the average for each
  site.
• Why don't I time the first page five times, then
  the second five times, then the third? Because on
  the Internet, server peaks and network traffic
  jams come and go from second to second and minute
  to minute.

65
Further Optimization Strategies

• Put Your Pages to the Test
• Even then, any site can have a bad day (when its
  performance is unusually poor). So you need to
  perform comparative timings repeatedly, at
  different times of the day, different times of
  the week, and different weeks during your
  project.
• This also keeps you in-the-know about the
  competition's changes and improvements. 

66
Further Optimization Strategies

• Put Your Pages to the Test
• Some developers use automated timing programs to
  measure or estimate page download time. But these
  programs only measure file size, or at best they
  time HTML transfers from the server. This
  completely ignores browser-specific and
  OS-specific performance issues, which are a big
  part of the wait perceived by the people looking
  at your site.
• Use a real, live person to time what is actually
  seen on the screen, because that's what you're
  really trying to improve.

67
Further Optimization Strategies

• Test Early and Often
• Test as soon as the first prototype of a site's
  pages is ready. There's never a better time to
  catch a problem in the making than right away.
• You also want to detect superior performance at
  the soonest possible moment so it can be
  leveraged or traded off as the project
  progresses.

68
Further Optimization Strategies

• Speed Up Your Server
• Of course, it's not just fast HTML that makes a
  site race. It's also fast servers and a fast
  network connection.
• If you're hosting your own site, make sure your
  server software is tuned for speed.
• Avoid HTTP redirects from one URL to another.
  Redirects can double the time between when the
  user clicks on a link and when the requested page
  actually comes over the wire.

69
Further Optimization Strategies

• Speed is Good 
• In order to bring that goodness to your audience,
  you need to set meaningful goals, and measure
  your performance against them constantly.
• Evangelize speed. Set up standards for page
  sizes, ad units, and download times.