1. Избегайте использования таблиц для разметки страницы
Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:
* Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить структуру таблицы, и второй — для орпреления их содержимого. * Таблицы отображаются сразу полностью, а не по мере загрузки. * Таблицы заставляют использовать прозграчные картинки для определения ширины колонок и т.п. * CSS требует гораздо меньше кода, чем перегруженные таблицы * Весь CSS-код может быть вынесен во внешний файл, который будет грузиться всего один раз и храниться в кэше браузера. * При помощи CSS можно контролировать очерёдность загрузки элементов страницы.
2. Не используйте картинки для отображения текста
Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:
Сначала это может показаться бессмысленным, но на самом деле такой способ может намного ускорить загрузку страницы. В этом случае браузер начнёт загружать картинку только после того, как будет выведен весь текст, а не одновременно. Таким образом пользователи могут работать со страницей, в кто время как изображение ещё будет подгружаться.
Эта техника лучше всего подходит для загрузки чисто декоративных, фоновых элементов страницы. Если изображение является частью содержимого, всё равно придётся использовать тег IMG.
4. Использование контекстных стилей
Данный код неэффективен:
This is a sentence
This is another sentence
This is yet another sentence
This is one more sentence
.text { color: #03c; font-size:2em }
Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:
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 }
Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.
Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.
Эти правила применяются к атрибутам margin, border и padding.
6. Минимизирование пробелов, переводов строк и комментариев
Каждый символ — буква или пробел — занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.
