Уменьшение количества HTTP-запросов
80 % времени отклика конечного пользователя тратится на front-end. Большая часть этого времени связана с загрузкой всех компонентов на страницу: изображений, таблиц стилей, скриптов, Flash и т.д. Уменьшение количества компонентов в свою очередь, уменьшает количество HTTP-запросов, требуемых для отображения страницы. Это является ключевым моментом для ускорения отображения страниц.
Одним из способов уменьшения количества компонентов на странице является упрощение её дизайна. Но есть ли способ создать страницы богатые контентом, и при этом сохранить быстрое время отклика? Вот несколько способов сокращения количества HTTP-запросов, сохранив при этом богатый дизайн страницы.
Объединение файлов является одним из способов уменьшения количества HTTP-запросов через объединение всех скриптов в один скрипт, и подобным образом через объединение всех таблиц стилей (CSS) в одну. Объединение файлов является более сложным, когда скрипты и таблицы стилей на разных страницах разные, но если вы это сделаете, это уменьшит время отклика.
CSS-спрайты являются предпочтительным методом сокращения количества графических запросов (image requests). Объедините ваши фоновые рисунки в один и используйте свойства CSS background-image и background-position, чтобы отобразить нужный сегмент изображения.
Карты изображений объединяют несколько изображений в одно. Полный размер оcтаётся приблизительно такой же, но сокращение количества HTTP-запросов ускоряет загрузку страницы. Карты изображений работают только в том случаи, если изображения являются смежными на странице, как, например, панель навигации. Определение координат карты изображений может быть утомительно и чревато ошибками. Использование карт изображений для навигации не слишком доступно, поэтому не рекомендуется.
Встроенные изображения используют data: URL scheme, чтобы вставить данные изображения на данную страницу. Это может увеличить размер вашего HTML-документа. Объединение встроенных изображений в (кэшированные) таблицы стилей является способом уменьшения HTTP-запросов и избегания увеличения размера страниц. Встроенные изображения пока ещё не поддерживаются основными браузерами.
Сокращение количества HTTP-запросов на вашей странице - вот с чего надо начать. Это самое важное руководство для повышения производительности для первых посетителей. Как описано в блоге Tenni Theurer "Browser Cache Usage - Exposed!", 40-60% ежедневных посетителей вашего сайта заходят с пустым кэшем. Оптимизация своей страницы для более быстрой загрузки для этих первых посетителей является ключевым моментом для лучшего обслуживания пользователей.
Оригинал статьи на developer.yahoo.com
Перевод КОМТЕТ komtet.ru