Разгони свой сайт Лекция 4: Объединение файлов Мациевский Николай 1 / 22 webo.in

Содержание Объединение CSS-файлов Объединение JavaScript-файлов Объединение картинок: CSS Sprites Объединение картинок: data:URI data:URI и CSS Sprites Методы экстремальной оптимизации 2 / 22 webo.in

Объединение CSS-файлов webo.in 3 / 22

Загрузка CSS-файлов Белый экран в браузере до получения всех файлов Текущее устройство вывода на экран не имеет значения Все CSS-файлы в увеличивает число файлов и откладывает их загрузку 4 / 22 webo.in

Объединение стилей 5 / 22 webo.in Ускоряет предзагрузку страницы all { … handheld { … } Нужно использовать уникальное имя для результирующего файла

Условные комментарии 6 / 22 webo.in Плюсы –Позволяют загружать таблицу стилей для конкретного браузера –Уменьшают размер общего файла Минусы –Увеличивают число запросов к серверу Нужен компромисс

Объединение JavaScript- файлов webo.in 7 / 22

Загрузка JavaScript 8 / 22 webo.in Расположение в head увеличивает время предзагрузки Располагаем перед Или на стадии пост-загрузки Части страницы блокируются незагруженным JavaScript-файлом Может содержать цепочки вызовов файлов с других серверов

Модульное построение 9 / 22 webo.in Цепочки зависимостей для компонентов Облегчает разработку Уменьшает размер используемого кода Уменьшает время инициализации

Все-в-одном 10 / 22 webo.in Всего один запрос к серверу Хорошо, когда мало кода Можно автоматически объединять Можно использовать ядро и набор модулей, загружаемых по необходимости

CSS Sprites webo.in 11 / 22

Разнообразие эффектов Смена изображения при наведении Динамическое изменение фона Индикатор загрузки (полоска) Подсветка областей на карте И многое другое 12 / 22 webo.in

Плюсы внедрения Одно основное изображение Позиционирование при помощи CSS- правил Значительное уменьшение числа запросов Вынесение анимации из JavaScript в HTML/CSS 13 / 22 webo.in

Проблемы при использовании 14 / 22 webo.in Нельзя объединить изображения для разных осей повторения Наложение фоновых изображений Несемантические HTML-элементы Либо расположение «лесенкой» Сложно комбинировать разные области

data:URI webo.in 15 / 22

Несколько фактов Позволяет записать бинарную информацию в текстовом (base64) формате Не нужно дополнительных файлов Нет проблем с повторение фона Нет поддерживается в IE ниже 8 версии 16 / 22 webo.in

data:URI и mhtml mhtml поддерживается в IE data:URI во всех остальных браузерах Комбинация стилевых правил через условные комментарии или хаки Позволяет использовать base64- кодирование для всех изображений 17 / 22 webo.in

Балансировка объединения файлов webo.in 18 / 22

Важные моменты Время запроса примерно равно получению Кб информации Предзагрузка важнее всего –Нужно максимально ее ускорить Последовательное изменение страницы –Пользователи лояльны к интерактивной загрузке 19 / 22 webo.in

Выбираем метод CSS Sprites ускоряют основную стадию загрузки data:URI в CSS замедляют предзагрузку –Размер фоновых изображений в CSS- файле должен быть небольшим Можно вынести data:URI в пост-загрузку –Или в основную стадию загрузки 20 / 22 webo.in

Экстремальная оптимизация Включить все ресурсы в один файл –Для единственной загрузки страницы Или только HTML+CSS+JavaScript –При небольшом количестве кода Или все закэшировать –Для постоянно загружаемых ресурсов –Для балансировки загрузки между разными страницами одного сайта 21 / 22 webo.in

В следующей лекции Параллельные загрузки Ограничение браузеров CDN и DNS Балансировка на стороне клиента Редиректы, 404-ошибки и повторы Асинхронные HTTP-запросы Уплотнение потока загрузки 22/ 22 webo.in