Разгони свой сайт. Объединение файлов. Лекция 4

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

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

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

Объединение стилей
5 / 22
webo.in
Ускоряет предзагрузку страницы
Применение
@media all { … }
@media 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

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

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

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