Настройка собственного хостинга CDN может ускорить работу WordPress путем распараллеливания загрузок. Недавно я объяснил, почему я перешел на предложение VPS за 5 долларов от Digital Ocean. Я могу сказать вам, что я был более чем доволен производительностью моего VPSсервер и мой сайт WordPress. Около недели назад я использовал Amazon CloudFront для своих нужд CDN. А затем из-за ошибки плагина я получил 20 миллионов HTTP-запросов и, следовательно, огромный счет CloudFront. Для меня CloudFront предлагал лишь незначительное увеличение скорости. Поэтому я решил установить CDN на моем VPS-устройстве Digital Ocean со стеком LEMP. Хотя это может быть не настоящая сеть доставки контента (это не краевое кэширование), она ускорит работу WordPress, обслуживая статические ресурсы из доменов без файлов cookie и распределяя параллельные загрузки на нескольких виртуальных хостах. [ Читать: Удалить строки запроса из статических ресурсов для повышения скорости страницы ]
Требования к настройке Self-Hosted CDN
- Доступ к DNS-записям
- Права администратора на вашем сервере
- Доступ к W3 Total Cache на вашей установке WordPress
- [WWW префикс к имени домена](https://www.smarthomebeginner.com/5-blogging-mistakes-i-made/ “5 ошибок в блоге, которые я сделал, когда начал этот блог”) в жизнь
- Немного терпения
Субдомены CDN и их преимущества
Браузер имеет ограничения на количество подключений к конкретному домену или поддомену. Поскольку css.htpcbeginner.com отличается от cdn.htpcbeginner.com, браузер может устанавливать больше подключений к серверу и параллельно загружать файлы, тем самым ускоряя работу вашего сайта. Настройка собственного хостинга CDN также позволит загружать данные с поддоменов без файлов cookie, уменьшая объем служебных данных и размер запроса. Для этого очень важно, чтобы ваш сервер WordPress работал с префиксом «www», а не без него.
Обычно для кэша W3 Total требуется как минимум 5 отдельных поддоменов для CDN. В этом примере я собираюсь выбрать следующие поддомены CDN для обслуживания файлов JS, CSS и Image:
- jsh.htpcbeginner.com
- jsb1.htpcbeginner.com
- jsb2.htpcbeginner.com
- css.htpcbeginner.com
- cdn.htpcbeginner.com
1. Настройте записи CNAME
Поскольку изменения DNS могут распространяться в течение нескольких часов, первым шагом является настройка записей CNAME в вашем DNS. Ваш хостинг или провайдер домена должен предоставить вам доступ для редактирования записей DNS. В этом примере я иду с GoDaddy. Войдите в панель управления доменом и откройте экран редактирования файла зоны DNS. Создайте записи псевдонимов CNAME для 3 поддоменов CDN, как показано ниже.
Настройка псевдонимов CNAME
Сохранить и выйти. Активация поддоменов может занять несколько часов. [ Читать: Альтернативный PHP Cache (APC) с W3 Total Cache для WordPress ]
2. Настройте виртуальные хосты NGINX
Чтобы настроить самодостаточный CDN, на стороне сервера вам нужно будет создать виртуальные хосты для каждого из поддоменов. Прямо сейчас я собираюсь показать вам, как создавать виртуальные хосты в NGINX, но в какой-то момент я обновлю пост, чтобы включить инструкцию для веб-сервера Apache. Найдите /etc/nginx/sites-available
и создайте файл с именем «cdn»:
$ cd /etc/nginx/sites-available
$ sudo nano cdn
Введите следующее содержимое в файл:
server {
# Comment: Server Basic Information
listen 80;
server_name cdn.htpcbeginner.com jsh.htpcbeginner.com jsb1.htpcbeginner.com jsb2.htpcbeginner.com css.htpcbeginner.com;
root /var/www/html/public/;
# Comment: The section below allows only images, JS, and CSS files to be available to self-hosted CDN subdomains. Avoids duplicate availability of other content through subdomains.
if ($request_uri !~* ".(jpe?g|gif|png|ico|js|css)$") {
rewrite ^(.*) https://www.smarthomebeginner.com$1 permanent;
break;
}
# Comment: The section below sets expires header to static resources and unsets cookies.
location / {
expires max;
add_header Pragma public;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
access_log off;
log_not_found off;
fastcgi_hide_header Set-Cookie;
tcp_nodelay off;
break;
}
}
Замените имена поддоменов в server_name
настройках и root
путь (должен совпадать с корнем сайта WordPress) на те, которые относятся к вам. Сохраните и выйдите, нажав Ctrl X. Приведенный выше файл виртуального хоста можно разбить на три раздела, и у каждой части есть комментарий, объясняющий его назначение. Ключевым моментом является разрешение показа только изображений, JS и CSS-файлов через собственные субдомены CDN, потому что если к вашему пост-контенту также можно получить доступ через субдомены, то Google может рассматривать его как дублирующий контент и наказывать ваш сайт.
Рекомендуемые руководства:
Включите виртуальный хост CDN и перезапустите NGINX:
Если есть какие-либо ошибки, NGINX не перезагрузится. Исправьте ошибки и повторите команду выше. Теперь вы можете проверить, работает ли CDN, получив доступ к одному из ваших образов через ваш CDN, размещенный самостоятельно. Обратите внимание на URL на изображении ниже. Если вы пытаетесь получить доступ к чему-либо, кроме изображений, JS и CSS-файлов, страница должна автоматически перенаправить на поддомен не-cdn (обычно www).
Доступ к изображениям через Self CDN
3. Настройка W3 Total Cache
Последняя настройка при настройке собственной сети доставки контента – настройка раздела CDN плагина W3 Total Cache. Сначала на странице «Общие настройки» включите CDN и выберите «Общее зеркало» для типа CDN. Затем перейдите на страницу CDN и настройте псевдонимы CNAME для поддоменов CDN, как показано ниже. Снова используйте имена поддоменов, которые соответствуют вашей ситуации. Проверьте зеркало, чтобы убедиться, что оно работает.
W3 Total Cache Настройки хост-хостинга CDN
И, наконец, установите флажок «Установить домен cookie на www.smarthomebeginner.com» в конце страницы. Остальные настройки CDN можно настроить на свой вкус. Сохраните все настройки и очистите кэш. Теперь откройте сообщение в своем блоге и просмотрите его источник. Вы должны увидеть, что изображения, файлы JS и CSS загружаются из вашего CDN.
Скорость страницы с собственным CDN
С Amazon CloudFront вышеуказанная страница загружается примерно за 1,5 секунды. С моей собственной CDN страница загружалась примерно в то же время. Эффект был таким же при тестировании с других серверов. Поэтому на данный момент наличие Amazon CloudFront CDN не принесло мне существенных преимуществ. [ Читать: Удалить дубликаты мета-описаний и заголовков на многостраничных постах WordPress ]
Исправления для побочных эффектов
Есть по крайней мере два дополнительных изменения, которые вам, возможно, придется сделать, чтобы противостоять побочным эффектам при передаче статических файлов через ваш собственный CDN. Сначала явно указывается домен cookie (в данном случае www.smarthomebeginner.com) через W3 Total Cache, как описано выше. Второй указывает _setDomainName
на Google Analytics. Если вы используете плагин Yoast для Google Analytics, вы можете указать www.smarthomebeginner.com в разделе «Отслеживание поддоменов» или вручную установить значение.
Выводы
Поймите, что я не рекомендую настраивать Self-Hosted CDN в качестве альтернативы обычному CDN. Но в моем случае прирост скорости страниц был незначительным, а дополнительная нагрузка на мой VPS Digital Ocean была незначительной. Также обратите внимание, что настройка CDN на другом сервере лучше, чем обслуживание статических файлов с того же сервера. Но объяснение этого выходит за рамки этого поста. В любом случае, для блогов с небольшим и средним трафиком настройка собственного CDN с собственным поддоменом может снизить некоторые расходы на CDN и ускорить работу вашего собственного сайта WordPress за счет удаления файлов cookie и распараллеливания загрузок.
Источник записи: https://www.smarthomebeginner.com