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

1. Разгони свой сайт

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

2. Содержание

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

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

webo.in
3 / 22

4. Загрузка CSS-файлов

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

5. Объединение стилей

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

6. Условные комментарии

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

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

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

8. Загрузка JavaScript

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

9. Модульное построение

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

10. Все-в-одном

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

11. CSS Sprites

webo.in
11 / 22

12. Разнообразие эффектов

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

13. Плюсы внедрения

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

14. Проблемы при использовании

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

15. data:URI

webo.in
15 / 22

16. Несколько фактов

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

17. data:URI и mhtml

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

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

webo.in
18 / 22

19. Важные моменты

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

20. Выбираем метод

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

21. Экстремальная оптимизация

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

22. В следующей лекции Параллельные загрузки

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