Несмотря на всё большее распространение широкополосного доступа к Интернету,
проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим
пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style
Sheets) может помочь в этом деле, сэкономив нам время и трафик.

1. Избегайте использования таблиц для разметки страницы

• Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить
  структуру таблицы, и второй — для определения их содержимого.
  
• Таблицы отображаются сразу полностью, а не по мере загрузки.
  
• Таблицы заставляют использовать прозрачные картинки для определения ширины
  колонок и т.п.
  
• CSS требует гораздо меньше кода, чем перегруженные таблицы.
  
• Весь CSS-код может быть вынесен во внешний файл, который будет грузиться
  всего один раз и храниться в кэше браузера.
  
• При помощи CSS можно контролировать очерёдность загрузки элементов
  страницы.

2. Не используйте картинки для отображения текста

a:link.example, a:visited.example, a:active.example { color:#fff; background:#f90; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f outset } a:hover.example { color:#fff; background:#fa1; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f inset

Этот CSS определяет простую кнопку,
которая меняет свой вид при наведении курсора. Таким образом можно создавать и
более сложные объекты.

3. Загрузка картинок через CSS

<div class="pretty-image"></div>

И соответствующий CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

Сначала это может показаться
бессмысленным, но на самом деле такой способ может намного ускорить загрузку
страницы. В этом случае браузер начнёт загружать картинку только после того, как
будет выведен весь текст, а не одновременно. Таким образом пользователи могут
работать со страницей, в кто время как изображение ещё будет
подгружаться.



Эта техника лучше всего подходит для загрузки чисто
декоративных, фоновых элементов страницы. Если изображение является частью
содержимого, всё равно придётся использовать тег IMG.

4. Использование контекстных стилей

<p class="text">This is a sentence</p> <p class="text">This is another sentence</p> <p class="text">This is yet another sentence</p> <p class="text">This is one more sentence</p> .text { color: #03c; font-size:2em }

Вместо того, чтобы присваивать класс
каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же
классом:

<div class="text"> <p>This is a sentence</p> <p>This is another sentence</p> <p>This is yet another sentence</p> <p>This is one more sentence</p> </div> .text p { color: #03c; font-size:2em }

Этот код указывает браузеру, что
каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер
шрифта в 2em.



Вы могли заметить, что цвет здесь указан всего тремя
символами, а не шестью. В данном случае #03c является сокращённым написанием
значения цвета #0033cc.

5. Использование сокращений

font: 1em/1.5em bold italic serif

...вместо

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif

Границы



Лучше:

border: 1px black solid

...вместо

border-width: 1px; border-color: black; border-style: solid

Фон



Пишите:

background: #fff url(image.gif) no-repeat top left

...вместо

background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

Отступы и границы

margin: 2px 1px 3px 4px; (верх, вправо, низ, влево)

...вместо

margin-top: 2px margin-right: 1px; margin-bottom: 3px; margin-right: 4px;

Аналогично:

margin: 5em 1em 3em; (верх, влево и вправо, низ)

...вместо

margin-top: 5em; margin-bottom: 1em; margin-right: 1em; margin-right: 4em

И:

margin: 5% 1%; (верх и низ, влево и вправо)

...вместо

margin-top: 5%; margin-bottom: 5%; margin-right: 1%; margin-right: 1%;

Эти правила применяются к атрибутам
margin, border и padding.

6. Минимизирование пробелов, переводов строк и комментариев

7. Используйте относительные ссылки

• <a href="/"> - Вызов
  корневой страницы сайта http://www.URL.com
  
• <a href="/filename.html"> - Вызов страницы в корневом каталоге
  http://www.URL.com/filename.html
  
• <a href="/directory/filename.html"> - Файл в подкаталоге "корня"
  http://www.URL.com/directory/filename.html
  
• <a href="./"> -
  Обращение к текущему каталогу и index.html
  
• <a href="../"> -
  Каталог-родитель текущего и index.html
  
• <a href="../filename.html"> - То же самое, с указанием файла
  
• <a href="../../"> -
  index.html в двух каталогах выше текущего

8. Не увлекайтесь применением тегов META

9. Выносите CSS и JavaScript в отдельные файлы

<link type="text/css" rel="stylesheet" href="filename.css" />

И соответственно JavaScript:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Любой внешний файл грузится всего
один раз и затем сохраняется в локальном кэше. Ограничений на количество
«подключаемых» внешних файлов не существует.

10. Ставьте / (слэш) в конце ссылок на каталоги

<a href="hттp://www.URL.com/directoryname">

Необходимо писать так:

<a href="hттp://www.URL.com/directoryname/">

Объясняется это очень просто. В
первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш"
сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в
дополнительной проверке не возникает.

Источник: http://www.internet-technologies.ru/articles/article_62.html