Изображение из заголовка я взял с AllThingsDistributed.

Для любого сайта важны контент, скорость и дизайн. Без качественного контента не будет посетителей, плохая скорость их рано или поздно отпугнёт, плохой дизайн тоже не придаст особой любви даже при хорошем контенте (но это на последнем месте, так как многие посетители читают обновления только через RSS). Контент и дизайн – вещи творческие, а вот скорость технологична, её можно обеспечить за счёт применения некоторых рекомендаций и настройки софта. Самое качественное и полное руководство – это документ Yahoo “Best Practices for Speeding Up Your Web Site“. Если его выполнить, то можно добиться значительного ускорения работы своего сайта.

Для аудита есть плагин Firefox YSlow, разработанный Yahoo. Он работает совместно с FireBug. В этой части я не буду останавливаться на нём, расскажу в отдельной части.

Один из важных пунктов в оптимизации – это “Use a Content Delivery Network”. Все Content Delivery Network служат для быстрой и надёжной географически распределённой доставки статического контента. Вот как раз об этом и поговорим.

У Amazon есть свой CDN – CloudFront. Описание и практические принципы работы расписаны в Getting Started Guide, я не буду их здесь дублировать, а покажу, как практически разместить свои данные в CloudFront.

Предупреждение: услуга Amazon CloudFront платная, тарифы есть на сайте Amazon.

Для начала активируем сервис, для чего идём на страницу CloudFront:

Sign Up For Amazon CloudFront. Будет запрошен логин/пароль:

Можно ознакомиться с ценами и проверить биллинговые данные, после чего нажать “Complete Sign Up”:

Сервис активирован:

Работать с CloudFront можно через AWS Management Console:

Но гораздо проще – через бесплатную утилиту Cyberduck. Я собирался привычно рассказывать о работе с системой через консоль, но в процессе создания S3 Bucket с удивлением увидел, что Cyberduck прекрасно работает не только с S3, но и с CloudFront. Желающих же продолжить с консолью я направляю на Getting Started Guide, там всё прекрасно описано.

Предварительно находим и где-нибудь сохраняем AWS Access Key ID и Secret Access Key – они нам понадобятся немного позже. За ними идём на AWS, Your Account, Security Credentials:

Запускаем программу:

Создаём учётную запись S3:

Secondary click и Connect, либо просто Enter для подключения:

В поле Username вводим AWS Access Key ID, в поле Password – Secret Access Key:

Зашли в S3:

Создаю новый каталог (bucket). Имя должно быть уникально для всей системы:

Вот информация по bucket’у (Cmd+I):

В Cyberduck есть возможность сразу разместить данные в CloudFront. Для этого выставляем права:

Включаем CloudFront Distribution и логирование

Заходим в каталог и перетаскиваем туда нужный файл image.jpg:

Смотрим информацию по файлу, запоминаем URL (http://d2ggdqlo6oay4b.cloudfront.net/image.jpg):

Всё, через минут 5 можно обращаться к файлу по указанному адресу.

Обратите внимание, что в свойствах S3 регион указан “US Standard”. Его можно поменять в настройках программы, но до создания bucket’а:

Логи по обращению к файлам в CloudFront находятся в каталоге logs в нашем Bucket’е:

Всё, данные размещены, URL получен, и его можно использовать у себя на сайте. Ждите следующую часть – я расскажу о потрясающем плагине W3 Total Cache для WordPress, с ним я ускорил время загрузки страницы с 220 ms до 34 ms – согласитесь, это очень хороший результат.

Кстати, сейчас вы можете оценить работу и этого плагина, и Amazon CloudFront – они у меня активны. Один побочный эффект – пришлось отключить плагин адаптации сайта под iPhone, но я занимаюсь восстановлением его работы.