Доклад: Оптимизация быстродействия сайта

Сентябрь 1st, 2012 |

18-го августа прошла встреча ThinkPHP #3, на которой я выступил с докладом на тему быстродействия Веб-сайтов. Доклад обзорный, я рассказывал о том на что стоит обратить внимание, на тему “как делать” написано и без меня много статей. И вот о чем шла речь…

Содержание

  1. Что влияет на производительность?
  2. Средства для мониторинга, утилиты
  3. Правильно определяем цели и задачи
  4. Детальнее про клиентскую оптимизацию
  5. Видио
  6. Материалы

Что влияет на производительность?

Есть не две, а три стороны: Браузер, Сеть, Сервер. Узким местом может оказаться любая из сторон.

При этом сеть — самая не предсказуемая. Мы знаем через какой канал подключён наш сервер, но не всегда знаем интернет-соединение наших клиентов.

Каждая страница состоит из большого количества компонентов. Статических и динамических. Статика хранится на винчестерах сервера, а динамика генерируется. К примеру HTML, который генерируется PHP кодом.

Ниже пример схемы загрузки простого документа:

Схема загрузки простого документа

Steve Souders (Yahoo! Inc.) проводил исследование, результаты которого показали, что при загрузке топ 10-и сайтов США на зугрузку HTML тратится < 20% от общего времени загрузки (более свежей статистики я не нашёл).

Что происходит при загрузке каждого компонента?

Рассмотрим по шагам:

Фаза загрузки Узкое место
1 DNS Lookup Сеть
2 Открытие TCP/IP соединения Сеть
3 Пересылка HTTP запроса Сеть
4 Разбор запроса сервером Сервер
5 Формирование ответа Сервер
6 Компрессия ответа (1) Сервер
7 Пересылка ответа Сеть
8 Распаковка ответа (1) Браузер
9 Представление ответа Браузер
10 Закрытие соединения? (2)
11 Отправка следующего запроса (3)

1) Если компрессия включена, то на сервер растёт нагрузка, хотя и экономится трафик.

2) Начиная с HTTP версии 1.1 cоединение не закрывается и ждёт следующий запрос, это существенно сокращает время загрузки. Вот краткое и лаконичное описание HTTP Keep Alive.

3) Если для представления текущего ответа требуются другие компоненты, то отправляются соответствующие запросы для их загрузки.

Что мы можем оптимизировать?

Фаза загрузки Возможное уменьшение задержки
1 DNS Lookup Уменьшим количество различных доменов
2 Открытие TCP/IP соединения Используем сервера, которые географически ближе
3 Отправка HTTP запроса Минимизируем размер шапки запроса
4 Разбор запроса сервером Настройка / оптимизация сервера
5 Формирование ответа Зависит от типа компонента. Статика считывается с винчестера, а динамика генерируется.
6 Компрессия ответа Не хотим загружать сервер — отключим компрессию. А как же канал (пункт 7) ?
7 Пересылка ответа Минимизируем размер ответа
8 Распаковка ответа См. п. 6
9 Представление ответа Оптимизируем HTML, CSS, JS и д.р.
11 Отправка следующего запроса Минимизируем количество запросов

Средства для мониторинга, утилиты

Не стоит работать вслепую:

Правильно определяем цели и задачи

Перед тем как “рваться в бой” проведём анализ.

Методично собираем симптомы, чтобы не было как на рисунке:

У клиента медленно загружается картинка в 5 МБ, а мы меняем структуру базы данных.

О чём не стоит забывать?

  • Расставляем и учитываем приоритеты;
  • Учитываем целесообразность изменений;
  • Учитываем скорость загрузки без попадания в кэш;
  • Действия могут противоречить, поэтому стандартные приёмы могут усугубить ситуацию.

Детальнее про клиентскую оптимизацию

Минимизируем количество HTTP-запросов

Следует строго следить за количеством запросов, ведь каждый новый запрос — это целый ряд действий:

Каждый новый запрос — это целый ряд действий

При этом все компоненты не загружаются одновременно.

Редиректы не желательны

Редирект — отдельный запрос, при котором может “съедаться” достаточно много ресурсов и, гарантировано, приводит к задержкам.

Не будем путать редиректами браузер

К чему приводят ответы 404 (некорректные URL-адреса)?

Страница не найдена / 404

Если ошибка 404 “перехвачена”, то её HTML загружается при неверных ссылках на изображения, JS, CSS файлы (а при этом часто запускается “ядро” сайта, выполняются запросы к базе данных), что существенно нагружает сервер.

Минимизация объёма данных, пересылаемых по сети.

  • Gzip компрессия. Что целесообразно «архивировать»?
  • Минификация HTML, JS, CSS. YUI Compressor (JS / CSS);
  • Минимизация размера медиа-файлов;
  • Минимизация размера HTTP-заголовка.

Какие компоненты целесообразно «архивировать»?

Паковать картинки не целесообразно, ведь мы нагружаем сервер, а размер картинки не уменшается. Настройка “mod_deflate” для Apache:

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE image/svg+xml

Нагрузка на сервер от Gzip компрессии

Источник статискики.

Оптимизация компонентов — HTML

  • Уменьшим количество DOM-элементов
  • Реже используем <iframe />

Оптимизация компонентов — CSS

  • Используем <link> вместо @import;
  • Оптимизируем селекторы;
  • Избавляемся от CSS Expressions;
  • Не копируем бездумно код (CTRL+C/V).

Оптимизация компонентов — JavaScript

  • Распределяем нагрузку по времени;
  • Отладка JavaScript в Google Chrome.

Gzip vs YUI Compressor. Степень сжатия JavaScript:

Источник статистики.

Оптимизация компонентов — Изображения

Есть несколько утилит для минимизации размера изображений. Вот одна из них: http://www.smushit.com/ysmush.it/. Хотя достаточно и Phptoshop — Save for Web.

И вот несколько полезных советов от Yahoo:

Кэширование компонентов браузером

  • Expires или Cache-Control Header;
  • Last-Modified / If-Modified-Since;
  • Etags;
  • Кэширование AJAX-запросов.

Вот как это выгладит. Заголовок запрорса:

GET /encrypted-area HTTP/1.1
 
Host: www.example.com
 
Accept-Encoding: gzip, deflate

Заголовок ответа:

HTTP/1.1 200 OK
 
Date: Mon, 23 May 2005 22:38:34 GMT
 
Server: Apache/1.3.3.7 (Unix)  (Red-Hat/Linux)
 
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
 
Etag: "3f80f-1b6-3e1cb03b"
 
Accept-Ranges: bytes
 
Content-Length: 438
 
Connection: close
 
Content-Type: text/html; charset=UTF-8
 
Content-Encoding: gzip

Снова несколько полезных советов от Yahoo:

Pre / Post-load. Всему своё время.

  • Lazy Load;
  • Preload;
  • Ajax Post-load.

Сеть

  • Параллельная загрузка компонентов;
  • Минимизируем количество различных доменов;
  • CDN (Content Delivery Network);
  • Сookie-free domains;

Видео

Материалы:

Утилиты:

There are no comments yet

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*