Отправляет email-рассылки с помощью сервиса Sendsay

Web - полезные советы по веб-строительству

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "От Винта - Раскрутка сайта. Способы. Сравнительный анализ." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Владимирис

Статистика

8.145 подписчиков
-7 за неделю
←   Все выпуски   →

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


Компания ИнфоСтарз
Как читать RSS:
RSS Reader
- для PC Windows
NewsCopier
-для КПК Windows Mobile
FoCuS
- для мобильного телефона
Hand/RSS
- для Palm OS
Другие программы...

Каталог RSS:
что такое RSS?
Компьютеры/Интернет
Безопасность, Блоги/Форумы, Дизайн, Каталоги, Компьютерная техника, Обзоры/Новости, Персональные страницы, Провайдеры, Программирование, Программы, Сервисы

Скачать файлы:

Музыка
Мелодии для мобильных 
Изображения  
Видео 
Игры 
Программы

БЕСПЛАТНЫЙ
ХОСТИНГ ФАЙЛОВ


Онлайн игры:

     Wizards World - ролевая игра в стиле фэнтези
И был мир волшебников...

     Wizards World II
Темный отыскал путь в другую, астральную плоскость Мира Волшебников...I

     Острова - ролевая игра
Огромный мир океанов и островов, где игроки в поисках приключений...

     Астроникс - звездные войны
Армии противоборствующих сторон канули в хаос...

     Война онлайн
Ты - главнокомандующий армией. Под твоим началом - лучшие воинские части...


Мир Мобильного Контента. MoCO 2007

 

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

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


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

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

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


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

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


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

<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. Минимизирование пробелов, переводов строк и комментариев


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

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


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

* <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


Большинство тегов 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/">


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

по материалам сайта http://www.internet-technologies.ru
В избранное