Увеличение быстродействия сайта. Правило 1: сокращение количества HTTP запросов

Около 80% времени ожидания загрузки сайта уходит на его дизайн. Большую часть этого времени занимает загрузка всех компонентов страницы: изображений, таблиц стилей, скриптов,  флэша и др. Уменьшение количества этих компонентов приводит к уменьшению количества HTTP запросов для генерации страницы. В этом и есть ключ к созданию быстро загружаемых страниц сайта.

Один из способов уменьшения числа компонентов это упрощение дизайна сайта. Существует ли способ сохранить высокую скорость загрузки сайта с большим количеством изображений и текста? К счастью, существуют ряд способов добиться уменьшения количества HTTP запросов, при котором дизайн сайта может содержать большое количество изображений и текста.

Объединение файлов — способ при котором уменьшение количества HTTP запросов достигается путём объединения всех файлов скриптов в один файл. Аналогично все файлы CSS объединяются в один файл таблицы стилей. Объединять файлы становится сложным, когда файлы скриптов и таблиц стилей меняются от страницы к странице сайта. Но если программно объединять эти файлы на этапе выдачи готовой страницы можно увеличить время её загрузки.

CSS спрайты наиболее предпочтительный способ уменьшения количества запросов, которые приходятся на загрузку изображений. Объедините ваши изображения в одно и используйте свойства CSS  background-image и background-position для отображения нужной части изображения.

Карты изображения (image maps) — способ, при котором одно изображение разделяется на части или карты. Полный размер загружаемых данных в этом случае примерно такой же, но уменьшение количества HTTP запросов позволяет увеличить быстроту загрузки страницы. Карты изображения применяются только в случае, если изображение размещается на странице непрерывно, к примеру панель навигации. Определение координат карт изображения может быть утомительно и чревато ошибками. Использование карт изображения для панели навигации также не очень удобно, поэтому данный способ не рекомендуется применять.

Встроенные изображения (inline images) — способ при котором используется data: URL scheme для встраивания данных об изображении непосредственно в код страницы. Хотя это может увеличить общий размер вашей HTML страницы. Но объединяя встроенные изображения в ваши (кэшированные) таблицы стилей ещё один способ уменьшить количество HTTP запросов и избежать увеличения размера ваших страниц. Следует иметь в виду, что встроенные изображения поддерживаются не всеми популярными браузерами.

Уменьшение количества HTTP запросов вашей страницы это то с чего следует начинать. Это наиболее важно для быстрой загрузки страниц пользователям, которые попали на ваш сайт впервые. Примерно 40-60% посетителей в день заходят на сайт с пустым кэшем браузера. Увеличение быстроты загрузки страницы для этих новых посетителей — в этом и есть ключ к удобству использования вашего сайта.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>