Документ описывает методы оптимизации времени загрузки веб-сайтов, включая уменьшение объема данных, кеширование и параллельные загрузки. Основные стратегии включают сжатие CSS и JavaScript, использование CSS-спрайтов и оптимизацию изображений для повышения производительности. Также рассматриваются инструменты для профилирования и анализа загрузки сайтов.

1. Разгоняем все, что движется Оптимизация времени загрузки сайта : проблемы и решения Мациевский Николай, Acronis webo.in 1 / 23

2. Уменьшение объема данных minify/gzip Уменьшение числа запросов CSS sprites Кеширование Параллельные загрузки Оптимизация JavaScript 2 / 23 webo.in Основные направления технологические решения

3. 3 базовых типа страниц: «Одноразовые»: 99,9% новых посещений Все-в-одном Для непостоянной аудитории : от 70% новых CSS Sprites CSS/JS сжатие и минимизация Для постоянной аудитории: менее 70% новых Кеширование «Ненавязчивый» JavaScript 3 / 23 webo.in Основные направления посещаемость как критерий

4. Стили и скрипты Сжатие CSS Обфускация JavaScript minify / mod_gzip / mod_deflate Архивировать «на лету»… … или статически? Сжатие изображений PNG против GIF: кто лучше? Семантическая верстка Уменьшение объема данных основные направления 4 / 23 webo.in

5. Сжатие CSS CSS Tidy gzip выигрыш: до 85% Сжатие JavaScript Dean Edwards Packer YUI Compressor + gzip выигрыш : до 85% 5 / 23 webo.in Уменьшение объема данных стили и скрипты

6. Apache 2 + mod_deflate = gzip поддержка: 99,5% выигрыш: 7 0- 8 0 % Статическое сжатие CSS/JavaScript + gzip Safari or not Safari? Поддержка браузеров прокси и «старые» браузеры 6 / 23 webo.in Уменьшение объема данных архивирование

7. Portable Network Graphics (PNG) поддержка (без альфа-канала): 99,5% улучшенный алгоритм сжатия альфа-канал через ImageAlphaLoader выигрыш: 20-40% Graphics Interchange Format (GIF) анимированные изображения JPEG jpegtran: уменьшение без потери качества 7 / 23 webo.in Уменьшение объема данных оптимизация изображений

8. Преимущества нет «распорок» кеширование стилей лучше выглядит без стилей Недостатки ряд проблем с CSS Sprites XHTML «весит» больше HTML Выход: HTML 4.01 + POSH Общий выигрыш: 20-40% 8 / 23 webo.in Уменьшение объема данных семантическая верстка

9. Стили и скрипты CSS: 1 файл через @media (IE5.5+) JavaScript: комбинированный window.onload Объединение изображений CSS Sprites Image Map 1 HTML хотя iframe могут ускорить загрузку Общий выигрыш: 30- 80% 9 / 23 webo.in Уменьшение числа запросов основные направления

10. CSS- файлы объединение в 1 файл через @media print { … } .. или даже включение в HTML JavaScript- файлы влияют на отображение страницы объединение в 1 файл … … или загрузка в самом конце ( window.onload) … или включение в HTML Общий выигрыш: 1 0- 30% 10 / 23 webo.in Уменьшение числа запросов стили и скрипты

11. CSS Sprites 5 групп файлов: анимация и разные повторения поддержка браузерами: 99,9% rollover- эффекты все-в-одном BackgroundImageCache Image Map когда много маленьких картинок Общий выигрыш: 7 0- 80% 11 / 23 webo.in Уменьшение числа запросов объединение изображений

12. Объединяем HTML/CSS/JS yandex.ru / ya.ru / yahoo.com Изображения через date:image поддержка браузерами: 30% (все, кроме IE) хаки для IE (* html, *:first-child+html, <!—[if IE]…, mhtml) увеличение размера: +30-40 % + mod_gzip Общий выигрыш: 7 0-9 0% 1 2 / 23 webo.in Экстремальная оптимизация только 1 файл!

13. Размер HTML: 2-10% Cache-Control max-age, private сброс кеша GET- строкой статические ресурсы ETag когда срок кеша истек проблемы репликации Общий выигрыш: до 100% 1 3 / 23 webo.in Кеширование основные направления

14. Несколько «легких» серверов ( alias) Хеш-функция для имен файлов Балансировка по нагрузке/географии Балансировка на клиенте Не больше 4 хостов Общий выигрыш: до 85% 14 / 23 webo.in Параллельные загрузки дважды два – быстрее!

15. Система JavaScript- пакетов загружаем только необходимые Первоначальный вид страницы формируем на сервере «Быстрый» window.onload DOMContentLoaded / defer Сайт должен работать и без JavaScript визуальное ускорение при загрузке 15 / 23 webo.in Оптимизация JavaScript загрузка «по требованию»

16. Уменьшаем число DOM -элементов создавайте локальные копии узлов обновляйте дерево большими фрагментами Обработчики событий создавайте для родительских элементов удаляйте для избежания утечек памяти в IE Используйте CSS , а не JavaScript Избегайте CSS expressions / filters 16 / 23 webo.in Оптимизация JavaScript DOM и события

17. Избегайте глобальных переменных кешируйте в локальные переменные: array.length -> var a=array.length // globarVar -> var localVar = globalVar Избегайте eval + setTimeout / setInterval используйте анонимные функции Используйте элементарные функции myArray.push(value) -> myArray[idx++]=value Обновляйте UI в случае «тяжелых» вычислений 17 / 23 webo.in Оптимизация JavaScript полезные советы

18. Кеширование: до 100% Параллельные загрузки: до 85% CSS Sprites: до 60% Слияние + minify + gzip: до 40% Оптимизация изображений: до 30% Оптимизация JavaScript: до 20% Семантическая верстка: до 10% 18 / 23 webo.in Действенность методов что лучше?

19. Google: на 500 мс медленнее = 20% уменьшение трафика Amazon: на 100 мс медленнее = 1% уменьшение продаж Acronis: ускорение в 5 раз = 5% увеличение продаж www.pmexpert.ru: ускорение в 2, 8 раза www.creative.su: ускорение в 2,6 раза 19 / 23 webo.in Действенность методов ROI

20. Firefox + Firebug + Yslow лучший в своем классе оценка оптимизации практические советы IE + AOL Pagetest диаграмма загрузки для IE IE Leak Detector aka Drip нахождение утечек памяти для IE 20 / 23 webo.in Обзор инструментов системные приложения

21. JsUnit тестирование и отладка AjaxView проксирование Ajax- запросов JsLex профессиональное профилирование YUI Profiler время выполнения функций Лучший тестер – пользователь! 21 / 23 webo.in Обзор инструментов профилирование JavaScript

22. www.websiteoptimization.com подробный анализ узких мест при загрузке OctaGate SiteTimer / Pingdom Tools диаграмма загрузки сайта Практические советы от Yahoo! webo.in анализ скорости загрузки / история проверок диаграмма загрузки сайта (для 4 браузеров) более 40 статей и докладов по оптимизации 22 / 23 webo.in Обзор инструментов онлайн-инструменты

23. Спасибо. Вопросы? Разгоняем все, что движется Мациевский Николай, Acronis webo.in 23 / 23