Ten ways to speed up the download time of your web pages
Then check out this free article that will give you 10 hints about how to get your web pages into your viewers eyes even faster.
5. Use shorthand CSS properties
Font
Use:
font: 1em/1.5em bold italic serif
...instead of:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif
Border
Use:
border: 1px black solid
...instead of
border-width: 1px;
border-color: black;
border-style: solid
Background
Use:
background: #fff url(image.gif) no-repeat top left
...instead of:
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Margin, padding, border
Use:
margin: 2px 1px 3px 4px
(top, right, bottom, left)
...instead of:
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px
Use:
margin: 5em 1em 3em
(top, left and right, bottom)
...instead of:
margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em
Use:
margin: 5% 1%
(top and bottom, left and right)
...instead of:
margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%
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: <a href="http://www.URL.com/filename.htm">.
Much better would be <a href="filename.htm">. But what if some files are in different folders to other ones? Use these shorthand properties:
- <a href="/"> - Calls up http://www.URL.com
- <a href="/filename.html"> - Calls up http://www.URL.com/filename.html
- <a href="/directory/filename.html"> - Calls up http://www.URL.com/directory/filename.html
- <a href="./"> - Calls up index.html within that directory
- <a href="../"> - Calls up index.html one directory above
- <a href="../filename.html"> - Calls up filename.html one directory above
- <a href="../../"> - 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 tags 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:
<link type="text/css" rel="stylesheet" href="filename.css" />
To place JavaScript in an external document use:
<script language="JavaScript" src="filename.js" type="text/javascript"></script>
Any external file is called up just once and then cached (stored) on the user's computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.
And don't forget, there's no limit to the number of these external documents that you can use! For example, instead of making one huge CSS document, have one main one and some others that are specific to certain areas of your site.