"Разгони свой сайт" - читать интересную книгу автора (Николай Мациевский)
Методы клиентской оптимизации веб-страниц Введение Об этой книге и проекте webo.in Web Optimizator Благодарности Глава 1. Что такое клиентская оптимизация? 1.1. Цели и задачи оптимизации Основные задачи оптимизации Краткий обзор технологий 1.2. Психологические аспекты производительности Терпимое время ожидания Эффекты медленной скорости загрузки Как время ответа сайта влияет на пользовательскую психологию 1.3. Стадии загрузки страницы Расставляем приоритеты Узкие места 1.4. Клиентская и серверная оптимизация: сходство и различия Кэширование во главу угла Меньше запросов — легче серверу Архивировать и кэшировать на сервере Кто у кого на службе? 1.5. Применение в разработке приложений Этап 1: Доставка информации и оформления Этап 2: Кэширование файлов оформления и параллельные запросы Этап 3: Жизнь после загрузки страницы Этап 4: Предупреждаем действия пользователя Глава 2. Уменьшение размера 2.1. Насколько ресурсоемко архивирование HTML Издержки на использование mod_gzip Формализация модели Набор тестов Результаты тестирования Пара слов о файловой системе Что быстрее: gzip или канал? Исследование степени gzip-сжатия и загрузки процессора Окончательные выводы Конфигурируем Apache 1.3 Конфигурируем Apache 2 2.2. CSS и JavaScript в виде архивов Статическое архивирование в действии Проблемы для Safari Конфигурируем Apache Маленькие «но» Два слова о nginx 2.3. Все о сжатии CSS Инструменты Графические результаты Выводы Практический пример 2.4. JavaScript: жать или не жать? Инструменты и методика Графические результаты Промежуточные выводы Есть ли жизнь после сжатия? Скорость загрузки JavaScript-библиотек Методы упаковки JavaScript Производительность загрузки JavaScript-библиотек 2.5. PNG против GIF Алгоритмы сжатия Возможности PNG Поддержка PNG в браузерах PNG и проблема соответствия для фоновых CSS-изображений Анимированные PNG: MNG против "PNG+" Двигаемся к маленьким PNG Полезные советы 2.6. Разгоняем favicon.ico — это как? Краткое описание формата Боевое крещение Оптимальные размеры 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-файлы в начале страницы Объединение CSS-файлов Практическое решение Два слова об условных комментариях 4.2. Объединение JavaScript-файлов Конструктивные предложения В теории На практике К чему мы пришли? Немного из теории HTTP-запросов Суровая реальность Возможное решение Реализация на PHP 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 Балансировка на сервере Балансировка на стороне клиента Осуществляем кросс-доменные запросы А если все же AJAX? Преимущества балансировки на стороне клиента Используем Cloud Computing для балансировки на стороне клиента Пример приложения Логика для скрипта, запускающегося по расписанию 5.4. Редиректы, 404-ошибки и повторяющиеся файлы Редиректы 404-ошибки 5.5. Асинхронные HTTP-запросы Моделируем параллельные запросы Предварительные выводы Влияние заголовков 5.6. Уплотняем поток загрузки Реальная ситуация Шаг первый: простая страница Шаг второй: уменьшаем изображения Шаг третий: все-в-одном Шаг четвертый: нарезаем поток Шаг пятой: алгоритмическое кэширование Итоговая таблица Шаг шестой: балансируем стадии загрузки Шаг седьмой: балансируем кэширование Заключение Глава 6. CSS оптимизация 6.1. Оптимизируем CSS expressions CSS-выражения Динамические выражения Вычисление постоянных Использование Реализация Все так просто? Нет, еще проще 6.2. Что лучше, id или class? Методика. Размер файлов Время открытия страницы Результаты Выводы 6.3. Влияние семантики и DOM-дерева Графики влияния DOM-дерева Выводы по DOM-дереву Семантическое DOM-дерево Что быстрее? Методика для DOCTYPE Результаты оптимизации «Экономия на спичках»? 6.4. Ни в коем случае не reflow! offsetHeight и style.display Немного теории Использование Computed Style Оптимизация: определение класса hide Заключение В качестве послесловия: стили или классы? Перерисовка страницы Групповое изменение стилей Два слова о таблицах Глава 7. Оптимизация JavaScript 7.1. Кроссбраузерный window.onload Firefox впереди планеты всей А Internet Explorer? Условные комментарии Все так просто? Двойное выполнение Избавляемся от внешнего файла Полное решение Неблокирующая загрузка JavaScript Число загрузок с одного хоста Неблокирующие скрипты Зависимости А если по-другому? В будущем 7.2. Основы «ненавязчивого» JavaScript Javascript: храним отдельно Javascript — это расширение Доверять, но проверять Доступ к элементам Полезные советы Добавляем обработчики событий Ускоряем обработку событий Немного усложним Боремся с Internet Explorer Пойдем дальше Обработка событий в браузерах Работаем с событиями Давайте рассмотрим, что мы можем извлечь из события после перехвата его с помощью соответствующего обработчика: 7.3. Применение «ненавязчивого» JavaScript В предыдущих разделах были представлены некоторые теоретические аспекты построения клиентской логики, ориентированной на максимальное быстродействие и адекватную ему замену в проблемных случаях. Ниже приведены практические решения по облегчению наиболее характерных сторон клиентского взаимодействия любого сайта: это счетчики посещений и размещение рекламы. Ведь они встречаются сейчас практически на любом веб-проекте. Принципы «ненавязчивой» рекламы document.write против innerHTML Контекстная реклама TopLine, Pop-Up, Pop-Under и RichMedia Внутренние рекламные сети Идеальная архитектура рекламной сети Разгоняем счетчики: от мифов к реальности Разбираем по косточкам А если сложнее? Делаем статистику динамической 7.4. Замыкания и утечки памяти Шаблоны утечек Циклические ссылки Более сложный случай Замыкания Постраничные утечки Псевдо-утечки Проектируем утечки 7.5. Оптимизируем «тяжелые» JavaScript-вычисления Оптимизируем вычисления Улучшаем шаблон Советы и замечания Заключение 7.6. Быстрый DOM DOM DocumentFragment: быстрее быстрого Нормальное добавление Добавление при помощи DocumentFragment А если еще быстрее? 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 8.3. Оптимизированные конфигурации Конфигурация Apache 1.3 Конфигурация 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 Заключение В качестве послесловия
Разгони свой сайт
Методы клиентской оптимизации веб-страниц Сайт тормозит, и вы не представляете, как с этим справиться? Количество анимации на странице превысило все мыслимые и немыслимые границы, и вы не знаете что делать? На странице десятки и сотни картинок, дизайнер превзошел сам себя, и теперь все это загружается страшно медленно? Эта книга поможет разобраться с этими и множеством других проблем, связанных с клиентской производительностью.
Оглавление
Введение4
Глава 1. Что такое клиентская оптимизация?7
Глава 2. Уменьшение размера17
Глава 3. Кэширование45
Глава 4. Уменьшение числа запросов55
Глава 5. Параллельные соединения84
Глава 6. CSS оптимизация110
Глава 7. Оптимизация JavaScript128
Глава 8. Приложение169
Заключение207
