Исследования показали, что если загрузка Вашей веб-страницы занимает больше 5 секунд, Вы теряете около 50% просмотров и продаж. Можно ускорить работу wordpress (система управления содержимым сайта) используя CDN (Content Delivery Network, сеть доставки контента), чтобы представлять контент пользователю быстрее и эффективнее. Вы можете распределить основные файлы и другой контент, такой как css, javascript, загруженные изображения, видео и многое другое посредством CDN, который управляет доставкой контента с ближайшего cdn сервера к конечному пользователю. В этом руководстве, мы объясним, как настроить WordPress, Apache/Lighttpd вебсервер, Bind dns сервер для использования CDN при доставке Ваших основных файлов, таких как css, js, загруженных пользователем изображений, и тем самым сократить нагрузку на Ваш вебсервер.

Что такое CDN?

Сеть доставки контента или сеть дистрибуции контента(content distribution network, CDN) – это система компьютеров, содержащих копии файлов, расположенных в разных местах сети для максимизации полосы пропускания при обеспечении клиентам доступа к информации через сеть. Клиент получает доступ к копии данных, расположенной ближе всего к клиенту, вместо предоставления клиентам доступа к центральному серверу, чтобы там не возникло “узкого места”. CDN повысит скорость и эффективность Вашего блога.

Какие преимущества дает использование CDN вместо центрального сервера?

  • Скорость – все основные медиафайлы распределяются через CDN. Например, files.hostcomp.ru настроен как CDN субдомен. Все, что хостится на files.hostcomp.ru – географически ближе к конечному пользователю. Если Вы используете dns запросы через files.hostcomp.ru, он вернет IP, самый географически близкий к Вам.


$ host files.hostcomp.ru
$ ping files.hostcomp.ru

Это увеличит скорость доставки и поможет избежать перегрузок на сервере.

  • Безопасность – CDN обеспечивает дополнительный уровень безопасности.
  • Работоспособоность – CDN обеспечивает 100% работоспособность, даже при больших нагрузках, отказах сети и оборудования.

Типы CDN

CDN может использовать различные методы для дистрибуции контента:

  1. Peer to peer CDN – такой тип используется для доставки последних серий мыльных опер (сериалов / ТВ шоу) и патчей/обновлений для программ за короткое время большому количеству пользователей.
  2. Origin Pull CDN – этот тип очень удобен для дистрибуции маленьких файлов, таких как javascript, css, изображений, текста, pdf, .doc, .xls и пр. Именно этот тип рекомендуется использовать с WordPress. Весь контент хранится на Вашем собственном сервере с названием «Origin Pull Host». Этот хост регистрируется в CDN. Когда первый пользователь создает запрос контента, он перенаправляется в CDN сеть из Вашего хоста и посредством CDN этот контент пересылается в ближайший к пользователю пункт. Контент кэшируется в CDN по маркеру TTL (время жизни пакета данных в протоколе IP). Такая конфигурация предполагает расположения хранилища на Вашем сервере, а не на сервере CDN. Пользователь, первым запросивший данный контент, получит весьма средние показатели скорости доставки через CDN, но последующие запросы будут обработаны и выполнены очень быстро. Этот тип CDN рекомендуется для файлов, объемом менее 10МБ.
  3. PoP Pull CDN – Вам необходимо загрузить данные на CDN хост сервер, где они буду храниться до запроса. Эта опция немного более дорогая, так как Вам нужно приобрести CDN хранилище и провайдера с предоставлением подходящей ширины канала. Такой тип рекомендуется для больших файлов, потокового видео и т.п. Вам нужно будет загрузить файлы на CDN сервер, используя FTP / SCP или API.

Поставщики сервисов дистрибуции контента (Content Delivery Service)

Приведем список крупнейших поставщиков услуг по доставке контента. Обязательно проведите собственную оценку, прежде чем покупать услуги CDN у любого из провайдеров:

  • Amazon CloudFront
  • Akamai
  • CacheFly
  • EdgeCast Networks
  • Internap
  • Level 3 Communications
  • Limelight Networks

Наша пробный пример

  • URL блога: https://www.hostcomp.ru/ — хост на собственном сервере под Apache, Lighttpd, IIS или Nginx.
  • Origin Pull URL: http://www-origin.hostcomp.ru/ — хост на собственном сервере. Для использования, Вам нужно будет настроить свой веб-сервер, wordpress и dns сервер. Название «Origin Pull Host» – это название метода CDN, согласно которому контент поставляется с Вашего сервера.
  • CDN URL: http://files.hostcomp.ru/ — Такой cdn url поддерживает любой из вышеупомянутых CDN провайдеров. Этот url всегда перенаправляет контент на edge сервер через DNS. files.hostcomp.ru должен быть установлен в качестве записи CNAME, которая будет направлять запрос к доменным именам CDN-сервера.
  • CDN DNS CNAME: files.hostcomp.ru.example.com — example.com это любой из вышеуказанных CDN провайдеров. Он должен быть установлен в качестве CNAME для files.hostcomp.ru

Шаг № 1: Покупка услуги CDN

Цена CDN варьируется в зависимости от провайдера. Для получения дополнительной информации, посетите сайты провайдеров CDN. Затем нужно использовать услугу провайдера «control panel» для настройки «Origin Pull Host» в каждом домене. Другими словами, настроить files.hostcomp.ru в режиме origin pull. Панель управления также позволит установить CDN dns CNAME. Этот же CNAME нужно будет использовать на шаге № 2. Как только конфигурация активирована и разрешен выбранный CNAME, запросы будут кэшироваться с www-origin.hostcomp.ru на files.hostcomp.ru.

Шаг № 2: Обновите свой DNS сервер

Допустим, что Вы используете BIND dns сервер. Отредактируйте файл зоны, добавив следующие элементы:

; CDN CNAME mapping for files.hostcomp.ru
files                3660       IN CNAME files.hostcomp.ru.example.com.
; Your www-origin url (note hostcomp.ru is also hosted on same server IP 123.1.2.3)
www-origin      3600       IN A 123.1.2.3

Перезагрузитесь:

# rndc reload

Чтобы настройка была проще, используйте один и тот же веб-сервер для домена origin pull и основного домена, то есть хостите www-origin.hostcomp.ru и hostcomp.ru на одном сервере. Это позволит Вам загружать и связвыать файлы непосредственно к серверу CDN.

Примите во внимание, что Вы можете установить CNAME и оригинальные имена хостов, используя также панель управления ISP DNS.

Шаг № 3: Настройте Origin Pull веб-сервер

Вам нужно настроить www-origin.hostcomp.ru следующим образом:

  • Origin pull DocumentRoot: /home/httpd/www-origin.hostcomp.ru – все ваши .css, .js и загруженные файлы будут храниться здесь.
  • Server Blog DocumentRoot: /home/httpd/hostcomp.ru – Все Ваши файлы wordpress будут храниться по этому адресу.
  • MaxAge: задайте максимальную продолжительность жизни статических файлов для сети cdn.
  • Etags: An ETag (тэг объекта) — часть HTTP, протокола World Wide Web. Это ответный заголовок, который может быть возвращен любым HTTP/1.1 совместимым веб сервером и используется для выявления изменений контента по данному URL. Когда новый ответ HTTP содержит тот же ETag, что и старый ответ HTTP, клиент может сделать заключение, что контент не изменился, и не продолжать загрузку.

Приведем пробный пример элемента Lighttpd lighttpd.conf:

# Configure ETags
etag.use-inode = "enable"
etag.use-mtime = "enable"
etag.use-size = "enable"
static-file.etags = "enable" 

###### CDN FILES via WordPress Upload ##############
$HTTP["host"]  == "www-origin.hostcomp.ru"{
        server.document-root = "/home/httpd/www-origin.hostcomp.ru"
        accesslog.filename         = "/var/log/lighttpd/cdn.access.log"
	#  Set max age
        $HTTP["url"] =~ "^/" {
            expire.url = ( "" => "access 60 days" )
        }
}

Вот примерный файл Apache httpd.conf:

<VirtualHost www-origin.hostcomp.ru>
	ServerAdmin webmaster@hostcomp.ru
	DocumentRoot /home/httpd/www-origin.hostcomp.ru
	ServerName files.hostcomp.ru
	ServerAlias file.hostcomp.ru
	ErrorLog /var/logs/httpd/cdn-error_log
	CustomLog /var/logs/httpd/cdn-access_log common

	# Files in this directory will be cached for 1 week only.
	# After 1 week, CDN server will check if the contents has been modified or not.
	# If not modified, Apache will send 304 "Not Modified" header
	<Directory "/userimages">
		Header set Cache-Control "max-age=604800, must-revalidate"
	</Directory>

	# Disable ETag as we are on cluster Apache server
	<Directory "/pdfs">
		Header unset ETag
		FileETag None
	</Directory>

	# Do not cache
	<Directory "/patches">
		Header Set Cache-Control "max-age=0, no-store"
	</Directory>
</VirtualHost>

Шаг № 4: Настройте WordPress для загрузки файлов на CDN сервер

  1. Посетите панель настроек wordpress по url (например, https://www.hostcomp.ru/wp-admin/)
  2. Выберите Settings > Miscellaneous Settings
  3. Обновите пункты, указывающие пути (paths) и домены CDN, как указано ниже

Рис.01: Wordrpess Miscellaneous Settings — установка CDN URLS

Все загруженные файлы сохранены на собственном сервере в директории /home/httpd/www-origin.hostcomp.ru. Эта директория привязана к CDN посредством метода доставки origin pull. Для примера:

  • Пользователь запрашивает http://files.hostcomp.ru/uploads/2010/04/test.png
  • Файл будет доставлен с http://www-origin.hostcomp.ru/uploads/2010/04/test.png Вашим CDN сервером
  • Файл будет кэширован CDN сервером на период 60 дней (или на период установленного максимального срока жизни файлов)
  • Остальные пользователи будут получать эту картинку с сервера CDN.

Шаг № 5: Конфигурация WordPress под доставку CSS / JS с сервера CDN

Во-первых, скопируйте все свои файлы .css и .js в директорию /home/httpd/www-origin.nixcraft.:

mkdir -p /home/httpd/www-origin.hostcomp.ru/{css,js}
cp -av /home/httpd/hostcomp.ru/wp-content/themes/mythemename/*.css /home/httpd/www-origin.hostcomp.ru/css
cp -av /home/httpd/hostcomp.ru/wp-content/themes/mythemename/*.js /home/httpd/www-origin.hostcomp.ru/js

Потом измените тему (header.php и footer.php), указав расположение CDN в таблице стилей и/или .js файлах. Для этого откройте меню «Manage Themes» с панели настроек wordpress:

<link rel="stylesheet" href="http://files.hostcomp.ru/css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://files.hostcomp.ru/css/images.css" type="text/css" media="screen, projection" />

Результаты

Конечный результат очень радует. Вот показатели пробной загрузки с вебсайта после применения CDN:

Рис.02: Демонстрация скорости загрузки с вебсайта через Alexa

Рис.03: Демонстрация скорости работы вебсайта с помощью инструмента оценки отклика

Как можно проверить, кэшировались ли изображения и другие медиафайлы сервером CDN?

Используйте curl для теста заголовков HTTP (проверьте объявления тэгов Etag, значение максимальной продолжительности жизни):

$ curl -I http://files.hostcomp.ru/css/styles.css

$ curl -I http://files.hostcomp.ru/uploades/2010/04/test.png

Результаты пробного запроса:

HTTP/1.1 200 OK
Content-Type: image/png
Accept-Ranges: bytes
ETag: "1482142335"
Last-Modified: Fri, 02 Apr 2010 09:11:53 GMT
Content-Length: 33143
Server: lighttpd
Cache-Control: max-age=2588785
Expires: Sun, 02 May 2010 09:13:50 GMT
Date: Fri, 02 Apr 2010 10:07:25 GMT
Connection: keep-alive

Примечание о дополнениях (плагинах) к WordPress CDN

Вы можете автоматизировать последние два шага при помощи плагинов worpdress. Так или иначе, Вам нужно настроить параметры максимальной продолжительности жизни DNS и веб-сервера, чтобы получить достаточную степень управляемости.

Просмотры: (1720)




Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить