Одна из задач, которую должен решить Web-мастер, состоит в том, чтобы создать такую страницу, которая будет оптимальна как с точки зрения дизайна, содержания (контента) страницы и размера.
Оптимизировать Web-страницу можно с ущербом ее качества и без ущерба качества. Самый простой и варварский способ уменьшить размер страницы - это оптимизация с ущербом для качества Web-страницы. К такому способу можно отнести такие возможности по оптимизации, как полный отказ от использования сценариев и таблиц стилей, рисунков и HTML-таблиц. Практически любая Web-страница, которая не будет иметь графические элементы, HTML-таблицы, не будет использовать сценарии и таблицы стилей - будет существенно меньше по размерам, чем страница, которая все это имеет. Но в этом случае пострадает функциональность страницы (а возможно и всего сайта), а также дизайн этой страницы. Поэтому далее рассматривать этот способ оптимизации Web-страницы мы не будем.
Второй способ - это оптимизация Web-страницы без ущерба для ее качества. Для реализации оптимизации страницы этим способом вам потребуется гораздо больше времени и терпения, чем при первом способе.
Каждая Web-страница одного сайта имеет одинаковые элементы. Такие элементы можно вынести в сценарии, при этом содержимое Web-страницы будет формироваться динамически. Одинаковые элементы будут иметь одинаковые параметры стиля, поэтому все основные стилевые параметры необходимо выносить в отдельный внешний файл, а не подключать к телу страницы с помощью тега <STYLE>. Подключить внешний CSS-документ можно с помощью достаточно простой команды: <LINK REL=. В этом случае в качестве значения параметра "StyleSheet" HREF="" TYPE="text/css" />HREF укажите адрес к вашему файлу стиля.
Полностью отказываться от стилевого оформления не стоит. Просто необходимо правильно подойти к этому процессу. При создании CSS-таблиц используйте их свойство каскадности. Более подробную информацию о CSS-таблицах читайте в статье Почему таблицы стилей каскадные?. Используя свойство каскадности вы сможете существенно упростить HTML-код, избавиться от чрезмерного употребления параметров ID и CLASS.
Посмотрите по новому на ваши файлы сценариев JavaScript - используйте интенсивный способ подключения сценариев JavaScript (о чем подробно описано в статье Элегантный сайт с помощью JavaScript); создавайте более простые и более быстрые JavaScript-функций (смотрите статью Повышение производительности сценариев JavaScript).
Уменьшить размер Web-страниц можно с помощью полного или частичного удаления комментариев. Правильные таблицы стилей должны быть интуитивно понятны, если вы будете создавать их таким образом, то сможете отказаться от необходимости использовать комментарии. Постарайтесь создать простые и понятные комментарии к сценариям, но при этом не следует комментировать каждую строку кода; ведь чрезмерное комментирование затрудняет чтение и понимание исходного кода и говорит о низком мастерстве Web-мастера.
Самым существенным шагом в оптимизации любой Web-страницы является оптимальное использование графики. Графическая информация, во-первых, занимает большой размер, а, во-вторых, передача ее посетителю страницы может занимать существенное время. Здесь можно поступить двумя путями. Первый путь достаточно прост - отказаться от использования большого количества изображений и рисунков. Второй путь - это оптимизация этих изображений. А самый оптимальный путь - это и убрать лишние рисунки, и оптимизировать оставшиеся. С помощью современных графических редакторов вы сможете конвертировать изображения из одного формата в другой (специальный инструмент Image Converter, вы можете бесплатно загрузить с данного сайта). Конвертируйте исходное изображение в самые популярные форматы, которые используются в Web-разработке: это PNG, JPEG и GIF. Если размещаете небольшое изображение, то выбирайте формат GIF, так как некоторые редакторы позволяют установить прозрачный фон рисунку - идеальное средство для создания красочного дизайна сайта. Если размещаете фотографии, то выбирайте между PNG и JPEG. Конечно, при конвертации может страдать качество изображений, но ведь вам никто не мешает на странице разместить ссылку, которая будет вести на изображение в высоком качестве.
Еще один способ, который позволяет увеличить скорость загрузки Web-страницы заключается в простом удалении изображений из контента страницы - просто размещайте ссылку на рисунок. Вероятно, что не каждый посетитель страницы хочет видеть десятки рисунков подряд, а ссылка на рисунок его может заинтересовать.
Размер Web-страницы складывается не только из размера самой страницы, но и всех тех дополнительных файлов, которые используются и отображаются в браузере.
Найдите сумму непосредственного размера Web-страницы (контента), файлов стилей и сценариев, к этому результату прибавьте размер рисунков и изображений, Flash-элементов и всех остальных вещей, которые используются на странице. Теперь разделите данное число на среднюю скорость передачи данных. Помните, что посетитель не будет долго ждать, пока ваша страница загрузиться - он просто уйдет с вашего сайта так и не дождавшись никакого ответа.
Чем быстрее будет загружаться страница - тем лучше для вашего сайта. Подгоняйте размер страницы таким образом, чтобы загрузка длилась 20 - 30 секунд. Хотя, и это ожидание будет посетителю казаться существенным. Если время загрузки вашей страницы превышает 20 - 30 секунд, то оптимизируйте изображения, отредактируйте текст страницы, файлы стиля или сценарии. Возможно, придется отказаться от Flash-роликов и других современных дизайнерских штучек. Но будет лучше, если посетитель будет действительно получать пользу от страницы, чем уходить с сайта, не дожидаясь его окончательной загрузки.
Допустим, что средняя скорость передачи данных у пользователя составляет 7 KB в секунду; получается, что постетитель будет ждать загрузки страницы, если она и все используемые ею файлы занимают 140 - 210 KB. Зная данную цифру, вы можете определить своеобразные лимиты для страниц, например, контент страницы не должен превышать 50 KB. В результате имеем 90 - 160 KB, которые вы можете потратить на сценарии, файлы стилей и рисунки. Это не много, но если вы будете следовать вышеизложенным советам, то сможете уложиться в отведенные рамки.
Например, на сегодняшний день, данная страница обращается к файлам размером менее 30 KB; контент страницы размером менее 10 KB. Исходя из расчетов, изложенных в предыдущем абзаце, данная страница будет загружаться 6 секунд. Конечно, это время несколько увеличиться, так как на страницах данного сайта используется множество функций JavaScript, но вряд ли данная страница будет загружаться более 10 секунд. Таким образом, данная страница полностью оптимизирована по вышеизложенным правилам.
В качестве итога можно предложить формулу для расчетов: Время загрузки страницы = ( Размер страницы + Размер, используемых страницей, файлов ) / Средняя скорость передачи данных. Но данной формулой не следует злоупотреблять - это не значит, если средняя скорость передачи данных возрастает, то вы можете делать страницы размером более 500 KB.
Если контент страницы очень большой, то лучше разделить данную страницу на две или три маленьких, так как в основном посетителей отпугивает слишком длинная горизонтальная полоска скроллинга в браузере - максимум он прочтет лишь одну треть от вашего шедевра, поэтому размер любой Web-страницы (контента) не должен превышать 50 KB, чтобы посетитель действительно прочитал всю информацию, находящуюся на такой странице.