Читать «Разгони свой сайт» онлайн

Методы клиентской оптимизации веб-страниц

Введение

Об этой книге и проекте 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