Подключение CDN к сайту на wordpress

Подключение дополнительного функционала в WP происходит через плагины. В этой статье мы рассмотрим самые популярные.

Бесплатно 7 дней

Рекомендуется сделать резервную копию вашей CMS перед началом интеграции.

Оставьте заявку на подключение CDN или напишите нам в чате, указав ваш email, сайт и CMS. Наш менеджер создаст для вас учетную запись в личном кабинете cdnnow! и настроит проект. Вы получите письмо с инструкцией и адресом вашего проекта в сети cdnnow.

Вы получили адрес проекта в CDN в виде userXXXXX.clients-cdnnow.ru.

Войдите в вашу административную панель Wordpress.

Для подключения CDN на WP вам потребуется установить плагин. Плагинов для подключения CDN множество, мы можем порекомендовать следующие: CDN Enabler, LiteSpeed Cache. Ниже разберем их по отдельности.

Плагин W3 Total cache с недавнего времени отключил возможность подключать сторонние CDN сервисы.
Плагин WP Fastest Cache — хороший плагин для ускорения сайта, однако, для него необходимо изменить настройки в Личном кабинете cdnnow!. Если вы решите использовать WP Fastest Cache, напишите напишите в поддержку, мы подскажем, как его настроить.

CDN Enabler

Ссылка на страницу плагина: https://ru.wordpress.org/plugins/cdn-enabler/
Автор: KeyCDN
Преимущества: бесплатный, самая простая настройка CDN, ничего лишнего.

Установка и настройка

В административной панели Wordpress перейдите в меню «Плагины → Добавить новый» и введите в поле поиска название «CDN Enabler».

CDN enabler

У плагина нажмите «Установить», а затем после установки — «Активировать».

После активации перейдите в раздел «Плагины → Установленные», где следует нажать на ссылку Settings/Настройки у данного плагина.

Настройка очень проста — необходимо заполнить только одно поле «Имя хоста CDN» вашим адресом, который вы получили у нас userXXXXX.clients-cdnnow.ru (где ХХХХХ — ваше уникальное имя).

Внимание! Указывайте адрес без протокола (http/https).

CDN enable

Вы также вместо служебного домена userXXXXX.clients-cdnnow.ru можете использовать свой домен для CDN. Как его настроить, читайте в нашей статье.

В поле «Включения CDN» уже добавлены все основные расширения файлов для кеширования.
Если вы хотите добавить иное расширение в список, не забудьте заглянуть в Личный кабинет cdnnow! и проверить, что данное расширение кешируется в CDN.
Это можно сделать в настройках вашего проекта, вкладка «Кеширование». Там есть список типов файлов для кеширования. Если там нет нужного расширения — напишите в поддержку, мы добавим.

cdnnow! настройки кеширования

Если же вы хотите исключить какие-то расширения из кеширования, вам нужно это сделать в двух местах:

  • в личном кабинете cdnnow! на вкладке Кеширования настроек вашего проекта снимите галку у определенного типа файлов, сохраните и опубликуйте проект,
  • в плагине CDN Enabler уберите из списка «Включения CDN» этот тип файлов, сохраните изменения.

Остальные поля плагина можно оставить пустыми.

Для сохранения изменений, нажмите «Сохранить изменения».

При использовании кнопки «Сохранить изменения и проверьте конфигурацию» может появится ошибка о том, что адрес CDN недоступен (404). Это корректное поведение. Просто используйте опцию «Сохранить изменения» без проверки конфигурации.

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

LiteSpeed Cache

Ссылка на страницу плагина: https://wordpress.org/plugins/litespeed-cache/
Автор: LiteSpeed Technologies
Преимущества: бесплатный, более 5 млн установок, множество настроек кеширования и оптимизации скорости.

Установка и настройка

В административной панели Wordpress перейдите в меню «Плагины → Добавить новый» и введите в поле поиска название «LiteSpeed Cache».

LiteSpeed Cache

У плагина нажмите «Установить», а затем после установки — «Активировать».

После активации перейдите в раздел «Плагины → Установленные», где следует нажать на ссылку Settings/Настройки у данного плагина.

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

Чтобы перейти к подключению CDN, нужно в боковом меню WP перейти в меню плагина, пункт CDN.

LiteSpeed Cache

На вкладке настроек CDN вам нужно:
1. Первый переключатель должен быть ВЫКЛ, а второй ВКЛ (Использовать CDN Mapping).
2. В поле «URL-адрес CDN» вставить ваш служебный домен CDN, с протоколом https (либо ваш настроенный домен для CDN вида https://cdn.example.ru, где example.ru — ваш основной домен сайта).

LiteSpeed Cache

Вместо служебного домена userXXXXX.clients-cdnnow.ru вы можете использовать свой домен для CDN. Как его настроить, читайте в нашей статье.

Справа на странице настроек заполнены типы файлов для кеширования.

Если вы хотите добавить иное расширение в список, не забудьте заглянуть в Личный кабинет cdnnow! и проверить, что данное расширение кешируется в CDN.
Это можно сделать в настройках вашего проекта, вкладка «Кеширование». Там есть список типов файлов для кеширования. Если там нет нужного расширения — напишите в поддержку, мы добавим.

cdnnow! настройки кеширования

Если же вы хотите исключить какие-то расширения из кеширования, вам нужно это сделать в двух местах:

  • в личном кабинете cdnnow! на вкладке Кеширования настроек вашего проекта снимите галку у определенного типа файлов, сохраните и опубликуйте проект,
  • в плагине уберите из списка «включить типы файлов» этот тип, сохраните изменения.

Остальные настройки можно оставить как есть.

Для сохранения изменений, нажмите «Сохранить изменения».

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

Как проверить, что файлы стали загружаться через CDN?

Откройте ваш сайт и откройте панель разработчика (F12).

В панели Elements (Элементы/Инспектор) можно увидеть код сайта. В нем файлы, такие как скрипты, стили CSS, изображения должны поменять свои адреса на новые, начинающиеся с домена CDN.

Адрес файлов через CDN

Посетитель вашего сайта будет получать эти файлы из нашей сети — с ближайшего к нему сервера.

На этом настройка завершена и CDN готов к использованию.

  • ваш сайт без CMS;
  • или для вашей CMS нет модуля для подключения CDN, но вы можете настроить сайт вручную;
  • у вас есть доступ до исходного кода вашего сайта и вы можете изменять его.

Подключите через CDN те ресурсы, которые меняются не часто, но часто запрашиваются: изображения, скрипты Javascript, стили CSS. Посетитель вашего сайта получит закешированные статичные файлы с ближайшего к нему сервера в сети CDN с максимальной скоростью. Сервис cdnnow! может сжимать кешируемые js и css файлы с помощью gzip и brotli, что уменьшает их вес.

Изображения можно сконвертировать «на лету» в тип webp без потери качества, что может дать до 50% сжатия веса картинок в браузере.

Создание аккаунта к cdnnow!

Для начала оставьте заявку на подключение CDN, указав ваш email и сайт для подключения.

Вы получите письмо с доступом в ЛК и адресом CDN для вашего сайта в виде userXXXXX.clients-cdnnow.ru, где userXXXXX — уникальный параметр.

Как проверить, что CDN работает?

По умолчанию, мы не кешируем в нашем CDN страницы вашего сайта, если вы специально это не запросили. Поэтому в большинстве случаев прямой адрес userXXXXX.clients-cdnnow.ru отдаст вам ошибку 404, и это нормально.

Работу CDN стоит проверять на статичных файлах. Например, если у вас есть файл по адресу <domain>/<uri_path>, то должен открываться такой же файл по адресу userXXXXX.clients-cdnnow.ru/<uri_path>

Пример с изображением:

Подключение CDN в коде сайта

Мы рекомендуем делать резервную копию сайта перед началом интеграции.

В исходном коде вашего сайта нужно поменять адреса к статичным файлам (стилям css, скриптам js, изображениям) на новые.

Например, в коде вашего сайта есть подключения стиля CSS, скрипта js и изображения img:

Вместо пути до файла на вашем сервере:
<link rel="stylesheet" href="/css/style.css"/>
укажите полный путь до этого же файла на сервере CDN:
<link rel="stylesheet" href="https://userXXXXX.clients-cdnnow.ru/css/style.css"/>

Если ваш сайт доступен только по протоколу HTTPS, то обязательно указывайте его в пути к файлам:
https://userXXXXX.clients-cdnnow.ru/<uri_path> Если сайт доступен по обоим протоколам HTTP и HTTPS одновременно, то не указывайте протокол, оставляйте только две косые черты в начале адреса:
//userXXXXX.clients-cdnnow.ru/<uri_path>

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

Если что-то пошло не так в процессе подключения, задайте вопрос нашему специалисту в чате или напишите нам на почту.

P.S. Остальные способы указания адреса до файлов зависят от того, на каком языке написан ваш сайт (html, php...), и требуют определенных знаний в области разработки. Мы не рекомендуем использовать тег <base href="https://userXXXXX.clients-cdnnow.ru/" /> т.к. он не только обновит путь до статичных файлов, таких как картинки или стили, но и изменит все адреса ссылок на вашем сайте на новый адрес.

Расширенная настройка CDN в личном кабинете cdnnow!

Как кешировать другие типы файлов (иные расширения)

В настройках вашего проекта в личном кабинете selfcare.cdnnow.ru на вкладке «Кеширование» перечислены типы файлов и их расширений, которые кешируются в CDN:

  • Изображения (bmp, gif, ico, jpeg, jpg, png, svg, tif, tiff, webp)
  • Стили CSS (css)
  • Скрипты javascripts (js)
  • Шрифты (otf, ttf, woff, woff2)
  • Архивы (gz, rar, z, zip)
  • Аудио (aac, flac, mp3, ogg, wav)
  • Видео (avi, flv, mkv, mp4, mpeg, oga, ogv, ogx, vob, webm)
  • Встраиваемые объекты (swf)
  • Вызовы API (REST, SOAP) (json, wsdl, xsd, xml)
  • Документы (csv, doc, docx, odp, ods, odt, pdf, pps, ppsm, ppsx, ppt, pptm, pptx, sldm, sldx, txt, xls, xlsx)
  • Запускаемые файлы (com, exe, apk)

Если среди перечисленных типов файлов вдруг не оказалось каких-то специфических расширений, которые присутствуют на вашем сайте и вы хотели бы раздавать их через CDN, то это можно сделать двумя способами:

1. написать в поддержку, с указанием номера вашего проекта и теми расширениями, которые вам требуется добавить для кеширования в CDN.

2. Вы можете включить полное кеширование всех файлов (включая страницы вашего сайта) самостоятельно через настройки личного кабинета. Ниже опишем по шагам:

2.1. Откройте личный кабинет cdnnow.

2.2. Перейдите в раздел «Проекты». Далее зайдите в ваш проект, кликнув на его название в таблице проектов.

2.3. На странице настроек проекта есть вкладки. Перейдите на вкладку «Кеширование», подраздел «Кеширование».

2.4. Включите опцию кешировать «всё что есть на сайте»:

Дополнительные расширения для кеширования в CDN

2.5. Сохраните изменения (без публикации).

2.6. Опубликуйте проект. Публикация занимает несколько минут. После публикации все типы файлов на вашем сайте будут доступны к кешированию.

Использование своего домена для CDN

Если вы хотите использовать в адресах к файлам, которые размещаются в сети cdnnow!, свой домен для CDN, например, cdn.example.ru вместо служебного адреса проекта CDN userXXXXX.clients-cdnnow.ru или userXXXXX.nowcdn.co, то следуйте инструкции ниже.

  1. Перейдите в панель управления вашим хостингом/VPS. Скриншоты сделаны на примере панели управления хостингом cPanel.
  2. Редактор зон DNS
  3. Откройте редактор зон DNS и добавьте новую CNAME запись. В поле «Имя» введите название вашего поддомена для CDN. Некоторые панели управления сами подставляют домен и точку в конце. В этом случае достаточно ввести слово cdn.
    В поле «CNAME» введите адрес вашего проекта в CDN вида userXXXXX.nowcdn.co или userXXXXX.clients-cdnnow.ru (требуется подставить ваше значение из Личного кабинета cdnnow!).
    Сохраните изменения.
  4. Создание новой записи CNAME
  5. Сохраненная CNAME запись появится в таблице записей.
    Новая запись CNAME создана
    DNS может обновляться некоторое время (от нескольких секунд до 72 часов).
  6. В личном кабинете selfcare.cdnnow.ru перейдите в раздел «Проекты». Далее зайдите в ваш проект, кликнув на его название в таблице проектов.
  7. Перейдите на вкладку «Домен и SSL»
  8. Свой домен для CDN
  9. Введите в поле ваш домен для CDN. Если доменов для CDN несколько, вы можете ввести их через пробел (с каждого их них должна быть сделана cname-запись).
  10. Ниже есть область для управления сертификатом SSL. Если ваш сайт работает по https-протоколу, то вам следует выпустить или добавить сертификат для вашего домена CDN. В этой части вы можете выпустить бесплатный сертификат от Lets' Encrypt, который будет автоматически обновляться каждые три месяца без вашего участия.
    SSL
  11. Если у вас есть собственный сертификат, то вы можете добавить его в этом разделе.
    SSL
    Тут нужно вставить сам сертификат и закрытый ключ. Также нажмите кнопку «Сгенерировать цепочку сертификата» для корректной работы.
    Сохраните без публикации, а затем Опубликуйте проект.
  12. После публикации проекта откройте ваш домен для CDN в браузере. При успешной настройке вы увидите:

    – Домен cdn.example.ru (здесь ваш домен для CDN) открывается по https протоколу (если вы выпускали/добавляли сертификат).

    – На странице может отображаться ошибка 404. Это нормально, если кешируется только статика, так как адрес домена для CDN является копией главной страницы вашего сайта (страницы в этом случае не кешируются).

    – Если вы включили полное кеширование, то будет отображаться копия главной страницы вашего сайта. Если вы предпочитаете, чтобы при обращении по прямой ссылке к домену CDN происходил редирект на ваш основной домен, вы можете настроить это в ЛК на вкладке SEO. Включите опцию «Перенаправлять прямые запросы» и укажите ваш родительский домен. Сохраните и опубликуйте проект.

    SSL

Настройка оптимизации изображений

Мы написали подробную статью про достоинства сервиса оптимизации изображений. Здесь опишем, как подключить эту опцию в вашем проекте.

Перейдите в личном кабинете selfcare.cdnnow.ru в вашем проекте на вкладку «Ускорение».

Ускорение, оптимизация картинок

Включите функцию оптимизации изображений.

Если вы не знаете все размеры изображений на вашем сайте, оставьте параметры «Любая ширина» и «Любая высота».

Если вам известны размеры ваших изображений, вы можете указать соответствующие параметры в полях. Оптимизация будет происходить только для этих размеров (п. 3 и 4 на рисунке).

Выберите расширения изображений (п.5), которые вы хотите оптимизировать на своем сайте. Файлы .ico не стоит оптимизировать, если они содержат прозрачность.

Сохраните (п.6) и опубликуйте (п.7) проект.

После публикации проекта ваши изображения на сайте станут загружаться еще быстрее за счет преобразования «на лету» в тип webp. При этом расширения картинок останутся прежними. Размер изображения (в байтах) уменьшится при неизменном качестве.

Стоимость услуг CDN

Мы предоставляем всем клиентам бесплатный тестовый период 7 дней. При получении доступа в личный кабинет вы также получаете неограниченный доступ к функциям CDN и оптимизации изображений. Во время бесплатного периода вы можете полноценно протестировать скорость загрузки, мы не ограничиваем функционал для тестовых аккаунтов.

Если вам понравился наш сервис и вы готовы к долговременному сотрудничеству, мы переведем ваш аккаунт из тестового в основной.

Стоимость размещения данных в CDN зависит от объема трафика. Вы можете посмотреть в личном кабинете в разделе «Статистика» объем трафика на тестовом периоде и рассчитать, сколько трафика ожидается за месяц. В том же разделе вы можете увидеть объемы запросов по оптимизации изображений, если вы включали эту функцию.

Тарифы

CDN по трафику

Минимальный платеж 600 рублей в месяц (включено 1000 ГБ). Любое количество проектов

Трафик в месяц Цена за 1 ГБ
Первый ТБ 0,6 ₽
Следующие 10 ТБ 1,44 ₽
Свыше 10 ТБ по запросу
от 600 ₽ / месяц
Калькулятор стоимости

Минимальный ежемесячный платеж 600 рублей по предоплате. Включено 1000 ГБ трафика. Превышение оплачивается по постоплате по ступенчатой системе расчета. Введите количество трафика в месяц, в гигабайтах. 1 ТБ = 1000 ГБ.

ГБ
1000 10 000
600 ₽ / месяц
Оптимизация картинок

В каждом тарифе включено до 100 000 запросов оптимизации в месяц

бесплатно 100 000 запросов

далее 90 ₽ / 10 000 запросов

При возникновении вопросов по настройке, сопровождению, стоимости — вы всегда можете обратиться в нашу поддержку: написав письмо на sales@cdnnow.ru, с помощью чата внизу страницы сайта или по телефону: 8 (800) 600-67-88 (c 10:00 до 19:00 по будням).


← Назад в раздел

Мы используем cookie, чтобы сделать сайт удобнее