Май 31, 2004

Сокращение времени загрузки страниц с помощью CSS

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

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

Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

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

Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

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

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

Некоторые фоновые изображения лучше загружать через CSS. Например, чтобы показать картинку размером 200х100, можно использовать следующий код:

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

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

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

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

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

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

Данный код неэффективен:

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

Этот код указывает браузеру, что каждый параграф внутри элемента с классом 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. Минимизирование пробелов, переводов строк и комментариев

Каждый символ — буква или пробел — занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.

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

Абсолютные ссылки занимают намного больше места, чем относительные. А кроме того, создаёт дополнительную нагрузку на браузер, что более важно. Пример абсолютной ссылки: <a href="http://www.URL.com/filename.htm">. Гораздо правильней будет написать <a href="filename.htm">. Но что если нужный файл находится в другом каталоге? Вот несколько примеров, которые помогут вам разобраться в этом вопросе:

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

Большинство тегов META соврешенно ненужные. Если интересно, можно взглянуть на все существующие варианты. Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам.

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

Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:

<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/">

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

Автор: Trenton Moss
Перевод: Сергей Яценко

12:31 « предыдущая | следующая » Статьи

Комментарии

1. 01.10.04 19:58 От: Pixel

Хорошая статья. Она в очередной раз мне напомнила насколько сильная штука CSS. Всегда по возможности стараюсь максимально его использовать, но из-за различий совместимости браузеров приходиться все таки ограничивать себя.

2. 02.11.04 17:08 От: Хмелев А.Г.

И вот софт в тему тем, кто только начинает использовать СSS. http://css.wallst.ru

3. 02.11.04 22:07 От: xerurg

Да ну че ж только "тем кто начинает". Я этот редактор использую уже два года и он меня вполне устраивает. Русский и бесплатный, так еще и идея интересная в основу положена. Короче, TopStyle нервно курит....

4. 04.11.04 14:15 От: Anatolevich

"Таблицы заставляют использовать прозграчные картинки для определения ширины колонок и т.п"
---------------------------
то каким же образом?

5. 07.11.04 10:42 От: Сергей Яценко

Т.н. "распорки", прозрачные gif-ы размером 1х1. Без них не обойтись при дизайне с таблицами.

6. 12.11.04 11:17 От: KIVagant

[Т.н. "распорки", прозрачные gif-ы размером 1х1. Без них не обойтись при дизайне с таблицами.]

Хм. Достаточно поставить &nbsр и задать ширину и высоту ячейки.

7. 12.11.04 12:07 От: Сергей Яценко

KIVagant, этот способ не очень надёжен.

8. 13.11.04 17:42 От: Anatolevich

Хех:) Может быть это кому-то покажеся странным, но прозрачный гиф 1х1 я использовал один раз в жизни:), просто задача была весьма специфическая. И необходимости в нем я до сих пор не вижу:)В общем-дело вкуса:)

9. 17.11.04 12:08 От: Dmitry

2Pixel "... но из-за различий совместимости браузеров приходиться все таки ограничивать себя."

С помощью CSS как раз-таки и надо решать проблемы с совместимостью.

10. 19.11.04 10:08 От: eXed

Box model tweaking

http://www.npj.ru/kukutz/64846_reshenie_problemy_box-model/

http://www.quirksmode.org/css/box.html

11. 29.11.04 10:36 От: Caso

Я давно уже пользуюсь в качестве распорок таблицу вида

При этом если вы нажмёте Ctrl+A (выделить всё) никаких лишних выделений не вылазиет.

12. 10.12.04 14:50 От: Artur Shakirov

однопиксельные гифы давно неактуальны!

table {
empty-cells: show;
}

13. 15.01.05 01:19 От: unnamed_hero

Однопиксельный гиф растягивается на всю ширину ячейки, чтобы через document.Images[] выяснить его, гифа, размеры, а соответственно и размеры ячейки. Правда, в тригосподобогомать-Нетскейпе это не работает (до 6-го, по крайней мере).

Да и к вопросам совместимости: например, "сжатые" конструкторы (типа background вместо background-color + background-color + etc) не понимают "ранние" версии той же Оперы (номер назвать сейчас не готов, но лично сталкивался).

Как, кстати, одна из 6-х Опер не понимает и JS во внешних файлах - не видит, и все тут.

Не время, не время еще плевать на таблицы - полное, окончательное торжество CSS еще, к сожалению, не наступило...

14. 19.02.05 22:21 От: Kildor

А вот меня как раз программа CSS-Magic полностью отвратила от каких бы то ни было редакторов, а особенно — визивигов…
После того, как она все незнакомые ей стили перевела в верхний регистр, а я долго пытался понять, почему же у меня не подключается ничего через url('');

Только FAR+colorer, и ничего больше.

15. 28.03.10 12:36 От: Александр

У меня раньше грузился очень долго сайт о фотошопе т.к. там много картинок и всякий рамок , мне подсказали вынести все картинки в css и закешировать их т.е. теперь они один раз грузяться посетителю и кешируются в его браузере. Нагрузка снизилась существенно. Пример http://tvoi-umor.ru

16. 16.12.10 14:54 От: Lbit

Гораздо больше сокращает время загрузки страниц компактный графический дизайн, минимум Flash и Java script.

Ваш комментарий

Обсудить на форуме?

Подумайте, прежде чем высказать своё мнение. Постарайтесь сделать свой комментарий полезным для других. Не используйте ненормативную лексику. Пользователи, пишущие "от нечего делать" бессмысленные наборы символов, будут блокироваться навсегда.