Источник:
http://cvacubo.r2.ru/
Учитывая
качество наших телефонных линий, размер и структура HTML -
документа являются одними из основных показателей которые
влияют на скорость загрузки. Уменьшить размер страницы можно
следующими способами:
1.
Удалив все лишние пробелы и прописав файл в одну строчку
2. Применив таблицы стилей во внешнем фале
3. Прописать одинаковые элементы разметки как классы CSS и
таким образом уменьшить количество атрибутов.
4. Вынести повторяющиеся на нескольких страницах элементы
разметки во внешний JavaScript - файл.
5. Уменьшить размер графических файлов включенных в HTML
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html;
charset=windows-1251">
</head>
<body bgcolor="black" leftmargin="0"
topmargin="0">
<table>
<tr>
<td align="right" bgcolor="red">
<font face="Tahoma" color="yellow">Красная
ячейка
</font></td>
<td align="center" bgcolor="yellow">
<font face="Tahoma" color="blue">Желтая
ячейка</font></td>
<td bgcolor="blue"><font face="Tahoma"
color="red">
Cиняя ячейка</font></td>
</tr>
<tr>
<td align="right" bgcolor="blue">
<font face="Tahoma" color="red">Cиняя
ячейка</font></td>
<td align="center" bgcolor="red">
<font face="Tahoma" color="yellow">Красная
ячейка</font>
</td>
<td bgcolor="yellow">
<font face="Tahoma" color="blue">Желтая
ячейка</font></td>
</tr>
<tr>
<td align="right" bgcolor="yellow">
<font face="Tahoma" color="blue">Желтая
ячейка</font></td>
<td align="center" bgcolor="blue">
<font face="Tahoma" color="red">Синяя
ячейка</font></td>
<td bgcolor="red">
<font face="Tahoma" color="yellow">Красная
ячейка
</font></td>
</tr>
</table>
</body>
</html>
Как видите в этом файле есть повторяющиеся атрибуты: 'bgcolor'.
Фактически файл написан без применения CSS. Кроме того для
некоторых значений атрибутов кавычки необязательны. Вот как
будет выглядеть этот файл после форматирования в CSS и удаления
ненужных кавычек:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<META http-equiv=content-type content="text/html;
charset=windows-1251">
<style>
body {background-color: black; font-family: Tahoma;}
.red {background-color: red; color: yellow;}
.yell {background-color: yellow; color: blue;}
.blue {background-color: blue; color: red;}
</style>
</head>
<body leftmargin=0 topmargin=0>
<table>
<tr>
<td align=right class=red>Красная ячейка</td>
<td align=center class=yell>Желтая ячейка</td>
<td class=blue>Cиняя ячейка</td>
</tr>
<tr>
<td align=right class=blue>Cиняя ячейка</td>
<td align=center class=red>Красная ячейка</td>
<td class=yell>Желтая ячейка</td>
</tr>
<tr>
<td align=right class=yell>Желтая ячейка</td>
<td align=center class=blue>Синяя ячейка</td>
<td class=red>Красная ячейка</td>
</tr>
</table>
</body>
</html>
Теперь,
после применения таблиц стилей, отпала необходимость описывать
каждую ячейку и свойства шрифта в ней. Но версии броузеров
4 поколения и младше поддерживают вынесение таблиц стилей
во внешний файл. Так, например, поместив строчку вида <link
href="style.css" rel="stylesheet" type="text/css">
в заголовке файла и скопировав все что находится между тегами
<style> и </style> в текстовый файл style.css
находящийся в той же директории что и наш HTML мы получим
тот же самый эффект. Учитывая то, что большинство сайтов строятся
на одном стилистическом решении и цветовой гамме, нам не надо
будет писать эти атрибуты в каждом файле. Но надо предостеречь
вас от часто встречающейся ошибки. Зачастую при разработке
сайтов дизайнер описывает большое количество классов. Это
приводит к тому что .CSS файл разрастается и становится достатчно
"тяжелым" в результате происхолит чуть ли не обратный
эффект. Вместо того чтобы ускорить процесс загрузки, создатель
наоборот его замедляет. Поэтому, если у вас на сайте встречаются
элементы дизайна которые существуют в 1-2 экземплярах (какой-то
абзац текста, например) лучше опишите их стиль прямо в теле
элемента пользуясь атрибутом 'style', а если внутри сайта
существует раздел кардинально отличающийся по дизайну, то
вообще создайте для него отдельный .CSS файл.
Но
на ваших страничках наверняка повторяются не только стили
шрифтов и цветов. Как правило на сайте существует система
навигации по нему, которая на каждой страничке выглядит одинаково.
Одним из способов решения этой проблемы являются фреймы. Однако
сайт с фреймами - это не самый лучший выход. Гораздо удобнее
решить эту проблему используя один из скриптовых языков: Perl,
PHP или JavaScript. Но первые два, предоставляются не на всех
хостингах. Поэтому в следующем разделе рассматривается именно
вариант применения JavaScript.
|
::
Учебники ::
