ВикиЧтение
Поиск
Содержание
ВикиЧтение
Разгони свой сайт
Мациевский Николай
Web Optimizator
{{title}}
{{{description}}}
Методы клиентской оптимизации веб-страниц
Введение
Об этой книге и проекте webo.in
Благодарности
Глава 1. Что такое клиентская оптимизация?
1.1. Цели и задачи оптимизации
Основные задачи оптимизации
Краткий обзор технологий
1.2. Психологические аспекты производительности
Терпимое время ожидания
Эффекты медленной скорости загрузки
Как время ответа сайта влияет на пользовательскую психологию
1.3. Стадии загрузки страницы
Расставляем приоритеты
Узкие места
1.4. Клиентская и серверная оптимизация: сходство и различия
Кэширование во главу угла
Меньше запросов — легче серверу
Архивировать и кэшировать на сервере
Кто у кого на службе?
1.5. Применение в разработке приложений
Этап 1: Доставка информации и оформления
Этап 2: Кэширование файлов оформления и параллельные запросы
Этап 3: Жизнь после загрузки страницы
Этап 4: Предупреждаем действия пользователя
Глава 2. Уменьшение размера
2.1. Насколько ресурсоемко архивирование HTML
Издержки на использование mod_gzip
Формализация модели
Набор тестов
Результаты тестирования
Пара слов о файловой системе
Что быстрее: gzip или канал?
Исследование степени gzip-сжатия и загрузки процессора
Окончательные выводы
Конфигурируем Apache 2
2.2. CSS и JavaScript в виде архивов
Статическое архивирование в действии
Проблемы для Safari
Конфигурируем Apache
Маленькие «но»
Два слова о nginx
2.3. Все о сжатии CSS
Инструменты
Графические результаты
Выводы
Практический пример
2.4. JavaScript: жать или не жать?
Инструменты и методика
Графические результаты
Промежуточные выводы
Есть ли жизнь после сжатия?
Скорость загрузки JavaScript-библиотек
645.4818
276.1929
2.5. PNG против GIF
Алгоритмы сжатия
Возможности PNG
Поддержка PNG в браузерах
PNG и проблема соответствия для фоновых CSS-изображений
Анимированные PNG: MNG против "PNG+"
Двигаемся к маленьким PNG
Полезные советы
2.6. Разгоняем favicon.ico — это как?
Краткое описание формата
Боевое крещение
1150
PNG — быть или не быть?
А если еще и сжать?
data:URI нас спасет?
Заключение
2.7. Режем cookie
Оптимизируем размер, зону и время действия
Хостинг для компонентов без cookie
Глава 3. Кэширование
3.1. Expires, Cache-Control и сброс кэша
Настройка заголовка HTTP Expires
Спецификация кэширования
Практическое запрещение кэширования
Разрешение кэширования
Форсированный сброс кэша
3.2. Кэширование в IE: pre-check, post-check
Спецификация
Рассматриваем подробнее
Пример использования
3.3. Last-Modified и ETag
Last-Modified
ETag
Синхронизация ETag и Last-Modified
3.4. Кэширование в iPhone
Попадание в кэш
Сжатые компоненты
После перезагрузки
Заключение
Глава 4. Уменьшение числа запросов
4.1. Объединение HTML- и CSS-файлов
CSS-файлы в начале страницы
Практическое решение
Два слова об условных комментариях
4.2. Объединение JavaScript-файлов
Конструктивные предложения
В теории
На практике
К чему мы пришли?
Немного из теории HTTP-запросов
Суровая реальность
Возможное решение
PHP Speedy
4.3. Техника CSS Sprites
Простой rollover-эффект
Сложный rollover-эффект
Проблемные места в IE
CSS Image map
Статичные картинки
Онлайн-генераторы
Полезные советы
4.4. Картинки в теле страницы с помощью data:URI
Поддержка браузерами
Схема data:URI
CSS и встроенные изображения
Проблемы data:URI
Работа в Internet Explorer
Преимущества и недостатки data:URI
Дополнительные соображения по оптимизации
Кроссбраузерное использование data:URI
О, этот странный Microsoft!
Объединяем несовместимое
Панацея или ящик Пандоры?
Валидность
Некоторые итоги
Включение музыки (base64)
4.5. CSS Sprites и data:URI
Проблемы при верстке
Проблемы при загрузке
Проблемы при использовании
Шаг за шагом
Выносим CSS-файлы в пост-загрузку
Теоретическое решение
На практике
Выигрыш
4.6. Методы экстремальной оптимизации
Объединение JavaScript и CSS в одном файле
Рассмотрим на примере
Объединение HTML, CSS и JavaScript в одном файле
Глава 5. Параллельные соединения
5.1. Обходим ограничения браузера на число соединений
Издержки на доставку объектов
Ограничения спецификации HTTP/1.1
Времена меняются
«Режем» соединения
Реальный выигрыш
Подводим итоги
5.2. Content Delivery Network и Domain Name System
Подключаем CDN
Yahoo! и Google
Количество DNS-запросов
5.3. Балансировка на стороне клиента
Round-Robin DNS
Балансировка на сервере
Балансировка на стороне клиента
Осуществляем кросс-доменные запросы
Преимущества балансировки на стороне клиента
Используем Cloud Computing для балансировки на стороне клиента
Пример приложения
Логика для скрипта, запускающегося по расписанию
5.4. Редиректы, 404-ошибки и повторяющиеся файлы
Редиректы
404-ошибки
5.5. Асинхронные HTTP-запросы
Моделируем параллельные запросы
Предварительные выводы
Влияние заголовков
5.6. Уплотняем поток загрузки
Реальная ситуация
Шаг первый: простая страница
Шаг второй: уменьшаем изображения
Шаг третий: все-в-одном
Шаг четвертый: нарезаем поток
Шаг пятой: алгоритмическое кэширование
Время загрузки (мс)
Шаг шестой: балансируем стадии загрузки
Шаг седьмой: балансируем кэширование
Заключение
Глава 6. CSS оптимизация
6.1. Оптимизируем CSS expressions
CSS-выражения
Динамические выражения
Вычисление постоянных
Использование
6.2. Что лучше, id или class?
Методика. Размер файлов
Время открытия страницы
div.div #id
Выводы
6.3. Влияние семантики и DOM-дерева
Графики влияния DOM-дерева
Выводы по DOM-дереву
Семантическое DOM-дерево
Что быстрее?
Методика для DOCTYPE
28
«Экономия на спичках»?
6.4. Ни в коем случае не reflow!
Немного теории
5318
92 раза
Заключение
Перерисовка страницы
Групповое изменение стилей
Два слова о таблицах
Глава 7. Оптимизация JavaScript
7.1. Кроссбраузерный window.onload
Firefox впереди планеты всей
А Internet Explorer?
Условные комментарии
Все так просто?
Двойное выполнение
Избавляемся от внешнего файла
Полное решение
Неблокирующая загрузка JavaScript
Число загрузок с одного хоста
Зависимости
Недостатки
В будущем
7.2. Основы «ненавязчивого» JavaScript
Javascript: храним отдельно
Javascript — это расширение
Доверять, но проверять
Полезные советы
Добавляем обработчики событий
Боремся с Internet Explorer
Принципы «ненавязчивой» рекламы
document.write против innerHTML
TopLine, Pop-Up, Pop-Under и RichMedia
Внутренние рекламные сети
Идеальная архитектура рекламной сети
Разгоняем счетчики: от мифов к реальности
Делаем статистику динамической
7.4. Замыкания и утечки памяти
Шаблоны утечек
Циклические ссылки
Более сложный случай
Замыкания
Псевдо-утечки
Проектируем утечки
7.5. Оптимизируем «тяжелые» JavaScript-вычисления
Оптимизируем вычисления
Улучшаем шаблон
Советы и замечания
Заключение
7.6. Быстрый DOM
DOM DocumentFragment: быстрее быстрого
Нормальное добавление
40
А если еще быстрее?
innerHTML нам поможет
7.7. Кэширование в JavaScript
Итерации и локальное кэширование
Кэширование ресурсоемких вызовов
Кэшируем цепочки вызовов
7.8. Быстрые итераторы, регулярные выражения и другие вкусности
Глава 8. Приложение
8.1. Обзор аналитических инструментов
Apache Benchmark и JMeter
Кэширование на сервере
Web Developer Toolbar для Firefox
Firebug NET Panel для Firefox
Yslow для Firebug для Firefox
Web Inspector для Safari
HttpWatch
Fiddler
Live HTTP Headers
Прокси-эмулятор каналов Sloppy
Analyze.WebSiteOptimization.com
Octagate.com/service/SiteTimer/
Tools.Pingdom.com
AlertSite.com
Site-Perf.com
GetRPO.com
Webo.in
Профилирование JavaScript
8.2. Несколько советов для браузеров
Ускоряем загрузку страниц в Firefox 3
Как это работает?
Ускоряем загрузку страниц в Opera 9
Interner Explorer
Конфигурация Apache 2
Конфигурация nginx 0.7+
Настройка IIS
8.4. Разбор полетов
vkontakte.ru
odnoklassniki.ru
yandex.ru
rambler.ru
mail.ru
rbc.ru
lenta.ru
kommersant.ru
marketgid.ru
habrahabr.ru
Заключение
В качестве послесловия