Do you like to wait for pages to download? Neither do
your site users. Read on and find out how to speed up
that download time...
1. Lay out your pages with CSS, not tables
CSS downloads faster than tables because:
* Browsers read through tables twice before displaying
their contents, once to work out their structure and
once to determine their content
* Tables appear on the screen all in one go - no part
of the table will appear until the entire table is
downloaded and rendered
* Tables encourage the use of spacer images to aid
with positioning
* CSS generally requires less code than cumbersome
tables
* All code to do with the layout can be placed in an
external CSS document, which will be called up just
once and then cached (stored) on the user's computer;
table layout, stored in each HTML document, must be
loaded up each time a new page downloads
* With CSS you can control the order items download on
to the screen - make the content appear before
slow-loading images and your site users will
definitely appreciate it
2. Don't use images to display text
It's our old friend CSS to the rescue again. There's
no need to use images to display text as so much can
be accomplished through CSS. Have a look at this code:
a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}
3. Call up decorative images through CSS
It's possible to present images as part of the
background, called up through CSS. If you've got an
image that's 200px by 100px you can use the following
HTML code:
And this CSS:
.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}
This may at first seem a little pointless but this
technique could really improve the download time of
your pages. Browsers basically download background
images after everything else. By using this technique,
your text will load instantaneously and your site
users can freely roam about the page while your 50kb
fancy image downloads.
This technique disables the ALT attribute though so if
you really want to have one then replace the above
HTML code with this:
Spacer.gif is a 1px x 1px transparent image. Now you
have a 50 byte transparent image and the main content
loading first, and your great big decorative image,
complete with ALT text, loading second. Perfect.
Please note that this technique is only good for
decorative images and not informational ones. Any user
who has CSS disabled will not be able to see your
CSS-embedded images (or their alternative text).
4. Use contextual selectors
This is inefficient:
This is a sentence
This is another sentence
This is yet another sentence
This is one more sentence
.text
{
color: #03c;
font-size: 2em
}
Instead of assigning a value to each individual
paragraph, we can nest them within a
tag and assign a value to this tag:
This is a sentence
This is another sentence
This is yet another sentence
This is one more sentence
.text p
{
color: #03c;
font-size:2em
}
This second CSS example basically says that every
paragraph within class="text" should be assigned a
colour value of #03c and a font size of 2em.
At first glance this doesn't look too important, but
if you can apply this properly throughout your
document you can easily knock off 20% of the file
size.
You may have noticed the colour values are shorter
than normal. #03c is a shortened version of #0033cc -
you can assign this abbreviated value to any colour
value like this.
5. Use shorthand CSS properties
You can use the following shorthand properties for the
margin CSS command.
Use:
margin: 2px 1px 3px 4px (top, right, bottom, left)
...instead of
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Use:
margin: 5em 1em 3em (top, right and left, bottom)
...instead of
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em
Use:
margin: 5% 1% (top and bottom, right and left)
...instead of
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%
Use:
margin: 0 (top, bottom, right and left)
...instead of
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
These rules can be applied to margin, border and
padding.
6. Minimise white space, line returns and comment tags
Every single letter or space in your HTML code takes
up one byte. It doesn't sound like much but it all
adds up. We've found that by working through your page
source and eliminating unnecessary white space and
comments, you can shave off up to, or even over (if
your HTML is really inefficient) 10% of its file size.
7. Use relative call-ups
Try to avoid absolute call ups as they take up more
space. An example of an absolute call up is: . Much
better would be . But what if some files are in
different folders to other ones? Use these shorthand
properties:
* - Calls up http://www.URL.com
* - Calls up http://www.URL.com/filename.html
* - Calls up
http://www.URL.com/directory/filename.html
* - Calls up index.html within that directory
* - Calls up index.html one directory above
* - Calls up filename.html one directory above
* - Calls up index.html two directories above
8. Remove unnecessary META tags and META content
Most META tags are pretty much unnecessary and don't
achieve very much. If you're interested, you can see a
list of META tags5 that are available. The most
important tags for search engine optimisation are the
keywords and description tags, although due to mass
abuse they've lost a lot of importance in recent
times. When using these META tags try to keep the
content for each under 200 characters - anything more
increases the size of your pages. Lengthy META tags
are not good for search engines
anyway because they
dilute your keywords.
9. Put CSS and JavaScript into external documents
To place CSS in an external document use:
To place JavaScript in an external document use:
No comments:
Post a Comment