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

Разгони свой сайт
Лекция 4: Объединение файлов
Мациевский Николай
webo.in
1 / 22
Содержание
•
•
•
•
•
•
Объединение CSS-файлов
Объединение JavaScript-файлов
Объединение картинок: CSS Sprites
Объединение картинок: data:URI
data:URI и CSS Sprites
Методы экстремальной оптимизации
webo.in
2 / 22
Объединение CSS-файлов
webo.in
3 / 22
Загрузка CSS-файлов
• Белый экран в браузере до получения
всех файлов
• Текущее устройство вывода на экран не
имеет значения
• Все CSS-файлы в head-секции
• @import увеличивает число файлов и
откладывает их загрузку
webo.in
4 / 22
Объединение стилей
• Ускоряет предзагрузку страницы
• Применение
• @media all { … }
• @media handheld { … }
• Нужно использовать уникальное имя
для результирующего файла
webo.in
5 / 22
Условные комментарии
• Плюсы
– Позволяют загружать таблицу стилей для
конкретного браузера
– Уменьшают размер общего файла
• Минусы
– Увеличивают число запросов к серверу
• Нужен компромисс
webo.in
6 / 22
Объединение JavaScriptфайлов
webo.in
7 / 22
Загрузка JavaScript
• Расположение в head увеличивает
время предзагрузки
• Располагаем перед </body>
• Или на стадии пост-загрузки
• Части страницы блокируются
незагруженным JavaScript-файлом
• Может содержать цепочки вызовов
файлов с других серверов
webo.in
8 / 22
Модульное построение
•
•
•
•
Цепочки зависимостей для компонентов
Облегчает разработку
Уменьшает размер используемого кода
Уменьшает время инициализации
webo.in
9 / 22
Все-в-одном
•
•
•
•
Всего один запрос к серверу
Хорошо, когда мало кода
Можно автоматически объединять
Можно использовать ядро и набор
модулей, загружаемых по
необходимости
webo.in
10 / 22
CSS Sprites
webo.in
11 / 22
Разнообразие эффектов
•
•
•
•
•
Смена изображения при наведении
Динамическое изменение фона
Индикатор загрузки (полоска)
Подсветка областей на карте
И многое другое
webo.in
12 / 22
Плюсы внедрения
• Одно основное изображение
• Позиционирование при помощи CSSправил
• Значительное уменьшение числа
запросов
• Вынесение анимации из JavaScript в
HTML/CSS
webo.in
13 / 22
Проблемы при использовании
• Нельзя объединить изображения для
разных осей повторения
• Наложение фоновых изображений
• Несемантические HTML-элементы
• Либо расположение «лесенкой»
• Сложно комбинировать разные области
webo.in
14 / 22
data:URI
webo.in
15 / 22
Несколько фактов
• Позволяет записать бинарную
информацию в текстовом (base64)
формате
• Не нужно дополнительных файлов
• Нет проблем с повторение фона
• Нет поддерживается в IE ниже 8 версии
webo.in
16 / 22
data:URI и mhtml
• mhtml поддерживается в IE
• data:URI во всех остальных браузерах
• Комбинация стилевых правил через
условные комментарии или хаки
• Позволяет использовать base64кодирование для всех изображений
webo.in
17 / 22
Балансировка объединения
файлов
webo.in
18 / 22
Важные моменты
• Время запроса примерно равно
получению 10-20 Кб информации
• Предзагрузка важнее всего
– Нужно максимально ее ускорить
• Последовательное изменение
страницы
– Пользователи лояльны к интерактивной
загрузке
webo.in
19 / 22
Выбираем метод
• CSS Sprites ускоряют основную стадию
загрузки
• data:URI в CSS замедляют предзагрузку
– Размер фоновых изображений в CSSфайле должен быть небольшим
• Можно вынести data:URI в пост-загрузку
– Или в основную стадию загрузки
webo.in
20 / 22
Экстремальная оптимизация
• Включить все ресурсы в один файл
– Для единственной загрузки страницы
• Или только HTML+CSS+JavaScript
– При небольшом количестве кода
• Или все закэшировать
– Для постоянно загружаемых ресурсов
– Для балансировки загрузки между разными
страницами одного сайта
webo.in
21 / 22
В следующей лекции
Параллельные загрузки
•
•
•
•
•
•
Ограничение браузеров
CDN и DNS
Балансировка на стороне клиента
Редиректы, 404-ошибки и повторы
Асинхронные HTTP-запросы
Уплотнение потока загрузки
webo.in
22/ 22