Разгони свой сайт Лекция 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