Многие специалисты утверждают, что сайт должен загружаться не более чем за две секунды. При этом обычно цитируется исследование Forrester, где говорится, что 47% пользователей ожидают загрузки страницы за две и менее секунды.

Существует более прагматичный подход: оптимизируйте скорость загрузки до тех пор, пока это экономически оправдано. Как уже говорилось выше, чем больше трафик, тем больше отдача от каждой миллисекунды. Если у вас сайт вроде Amazon.com, разница в 200мс будет «стоить» миллионы долларов. Если вы только готовитесь запустить новый сайт, снижение скорости загрузки до 4—6 секунд может быть достаточным. Исходите из текущего трафика, положения дел у конкурентов, бюджета и собственных стратегических приоритетов.

Для начала составьте объективное представление о положении дел со скоростью загрузки. Такие инструменты как WebPageTest.org помогут вам протестировать скорость загрузки страниц из разных географических точек.

С чего начать?

Повышение производительности сайта может казаться утомительной работой, поэтому важно начать с задач, лежащих на поверхности. Как сказал Стив Саундерс (Steve Souders), главный инженер по производительности в Google, 80-90% времени отклика для конечного пользователя приходится на фронт-энд, с него и начните.

Это высказывание стало своего рода золотым правилом производительности. Говоря попросту, оптимизация веб-сервера и инфраструктуры базы данных, конечно, важная, но наибольшую отдачу вы получите от оптимизации компонентов фронт-энда, загружаемых браузером — изображений, CSS, JavaScript, Flash и других ресурсов, связанных со страницей HTML.

Иллюстрацию этого правила можно увидеть на каскадном графике загрузки страницы, который рисуют инструменты вроде WebPageTest.

Существуют десятки, если не сотни способов ускорить загрузку сайта. Вот несколько шагов, дающих максимальный результат при минимальных временных затратах.

Шаг 1: уменьшите размер страницы

Раздутый контент грузится очень долго. Даже простое сжатие данных может уменьшить размер текстовых ресурсов (HTML, CSS и JavaScript) вдвое и больше. На сайте WhatsMyIP.org есть отличный бесплатный инструмент, показывающий, включено ли сжатие на вашем сайте. При тестировании проверяйте не только главную страницу, но и ссылки на файлы JavaScript и CSS. Мы нередко встречаем случаи, когда сжатие включено для HTML, но отключено для JavaScript и CSS.

А вот компрессировать изображения не стоит. Эффективность сжатия таких данных низкая, а нагрузка на сервер растёт, замедляя обработку запросов. Подробнее о том, какие данные надо компрессировать, вы можете узнать из вот этого руководства.

Если вы считаете, что сжатие на вашем сервере не включено, попросите администратора или провайдера хостинга включить его. Зачастую это решается очень просто, см. справку по модулю mod_deflate для Apache, документацию по настройке IIS 7, или вот статью о том, как включить сжатие на сайтах на основе WordPress.

Кроме того, изображения могут занимать более 80% от общего веса страницы при её скачивании, поэтому их тоже нужно оптимизировать. Следующие рекомендации помогут вам сократить их размер на 50% и более:

Не используйте PNG для фотографий. Изображения в формате JPEG сжимают фотографии до существенно меньшего размера, сохраняя хорошее качество. Например, в день запуска Windows 8 на главной странице Microsoft использовалось изображение весом в 1 мегабайт в формате PNG, хотя неотличимый на глаз аналог в JPEG весил бы всего 140 килобайт! Представьте себе, сколько трафика было «накручено» напрасно одним лишь этим изображением.
Не увлекайтесь применением PNG ради полупрозрачности. Полупрозрачность — отличный эффект (не поддерживаемый JPEG), но если он вам особенно не нужен, то и PNG нужен не больше. Используйте PNG для логотипов и изображений с резким контрастом (например, изображений с текстом).
Корректно указывайте значение качества в JPEG. При значении качества в 50-75% конечный вес изображения намного меньше, а на изображение всё ещё можно смотреть не морщась. Разумеется, каждый случай надо рассматривать отдельно. Но в большинстве случаев изображение должно весить меньше 100 килобайт.
Удаляйте метаданные из файлов изображений. Графические редакторы сохраняют в изображениях много мусора: миниатюры, комментарии, неиспользуемые цвета из палитры и т.д. Они полезны для дизайнера, но конечным пользователям совершенно не нужны. Поэтому пусть дизайнер хранит у себя оригинал со всеми нужными данными, а для публикации на сайте отдаёт более чистую копию, пропущенную через оптимизатор вроде Yahoo Smush.It или программы pngcrush и jpegtran.