Библиотека Интернет Индустрии I2R.ru

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

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

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

Разбивайте большие таблицы

Как правило, веб-страницы верстаются с использованием таблиц с невидимой границей. Пока последнее слово в самом низу таблицы не загрузится, на экране содержимое таблицы отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Однако, если таблица велика по высоте, может пройти значительное количество времени, прежде чем мы увидим нужную информацию.

Чтобы сократить время появления контента на экране, разбивайте одну большую таблицу на несколько таблиц, меньших по размеру.

Еще один альтернативный способ ускорения загрузки страниц - использование вместо таблиц слоев.

Оптимизируйте графику

Чтобы графические изображения быстрее загружались на веб-странице, следует уменьшать размер файлов картинок при сохранении их качества. Для оптимизации графики существуют специальные программы, позволяющие управлять различными параметрами с учетом форматов файлов. Например, Adobe ImageReady, Ulead SmartSaver Pro, Macromedia FireWorks, Adobe Photoshop и другие. Подробнее о том, как оптимизировать файлы JPEG и GIF в Adobe Photoshop 5.5 можно почитать в статьях "Оптимизация файлов в формате JPEG" и "Оптимизация файлов в формате GIF".

Задавайте ширину и высоту рисунков

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

Многократно используйте одни и те же изображения

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

Применяйте каскадные таблицы стилей (CSS)

Стили позволяют существенно сократить код HTML за счет применения одним действием сразу всей группы атрибутов форматирования. С помощью стилей можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к определенному тегу. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и текст будет изменен автоматически.

Код HTML без использования стилей

<p align=center><b><font face=Arial color=navy size=5>Заголовок</font></b></p>

То же с использованием стилей

<p class=title>Заголовок</p>

Видно, что происходит сокращение кода, вдобавок, описанный класс можно использовать многократно.

Храните таблицу стилей во внешнем файле

Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег LINK в заголовке страницы. Достоинства такого размещения стилей:

• используется один файл со стилем для любого количества веб-страниц, а также возможно его применять на других сайтах;
• можно изменять таблицу стилей без модификации веб-страниц;
• файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее;
• при изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.

Размещайте скрипты в отдельных файлах

Аналогично стилям скрипты можно размещать во внешнем файле. То есть вместо

<script language="JavaScript">
  текст программ
</script>

указываем

<script language="JavaScript" src=program.js></script>

где параметр src указывает на файл со скриптами.

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

Размещайте важную информацию наверху страницы

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

Оптимизируйте код HTML

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

По сравнению с предыдущими методами оптимизация кода HTML является самым слабым способом ускорения загрузки страниц.