WordPress CDN: подробное руководство по повышению вашей глобальной видимости

С годами более быстрая и быстрая скорость загрузки стала главным приоритетом для веб-сайтов. Но идет рука об руку с более богатым контентом и функциональными возможностями, которые должны соответствовать постоянно растущему спросу на интерактивность пользователей. Поэтому многим владельцам веб-сайтов сложно доставлять свой контент конечным пользователям по всему миру с большей скоростью.

В свете этого многие веб-сайты начали использовать WordPress CDN (сеть доставки контента). Эта технология помогает быстрее доставлять контент веб-сайта каждому пользователю, независимо от того, где он находится. В этом удобном руководстве вы узнаете, что такое CDN, почему это важно для WordPress и как использовать WordPress CDN.

1. Что такое CDN (сеть доставки контента)?

Как следует из названия, CDN имеет какое-то отношение к доставке контента. Но какой контент и как? Что ж, он предоставляет статический, потоковый и динамический контент вашего сайта WordPress, включая файлы мультимедиа, файлы CSS и JavaScript.

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

Факт: задержка загрузки страницы в 1 секунду может привести к потере конверсии на 7%, просмотрам страниц на 11% и снижению удовлетворенности клиентов на 16%.

Допустим, вы запустили сервер на управляемом хостинге Cloudways WordPress и выбрали центр обработки данных в Лондоне, Великобритания. Здесь физически размещен ваш сайт WordPress, и отсюда обрабатываются все запросы. Ваш сайт будет молниеносно загружаться для пользователей в Европе, но может загружаться немного медленнее для пользователей в Токио или Маниле. Это потому, что Лондон дальше от Токио, чем Париж.

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

2. Кому нужен WordPress CDN?

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

Давайте посмотрим, какие компании используют CDN для WordPress для ускорения работы своих сайтов WordPress.

• Электронная торговля
• Блоги
• Рекламные агенства
• СМИ и развлечения
• Сайты потоковой передачи
• Сайты онлайн-игр
• Онлайн-образование
• Здравоохранение

3. Почему CDN важен для WordPress?

Со временем сеть доставки контента (CDN) значительно улучшилась. Наличие CDN WordPress на сайте WordPress дает множество преимуществ, которые нельзя игнорировать. Посмотрим на них подробнее!

• Более быстрое время загрузки : сокращает время загрузки страницы, поскольку контент легко доступен из сети серверов CDN.
• Обработка большого трафика : поскольку контент доставляется из нескольких источников, сайт, использующий CDN для WordPress, практически не сталкивается с простоями или низкой производительностью даже при большом объеме трафика.
• Сохраняет пропускную способность : CDN также снижает потребление пропускной способности, поскольку ограничивает прямой поток запросов от пользователей к веб-хостингу, доставляя сам контент.
• Безопасность : сеть CDN разрознена и способна противостоять DDoS-атакам от слабых до умеренных. У некоторых провайдеров CDN также установлен активный механизм для выявления этих атак, спамеров и ботов. Он добавляет дополнительный уровень безопасности, особенно для тех сайтов WordPress, где клиенты платят, используя данные своей кредитной карты.
• Лучшее SEO-рейтинг : Не секрет, что Google ранжирует более быстрые сайты выше. Трудно определить, насколько скорость может повредить SEO-рейтингу, но очевидно, что она плохо влияет на пользовательский опыт, что Google не одобряет.
• Улучшенный пользовательский интерфейс : WordPress CDN на сайте WordPress не только улучшает взаимодействие с пользователем на рабочем столе, но и на мобильных устройствах, быстрее загружая веб-страницы. Большое количество людей сейчас используют свои мобильные телефоны для работы в Интернете. Google также начал инициативу по поиску для мобильных устройств, что означает, что сайты, оптимизированные для мобильных устройств, будут иметь преимущество в результатах поиска.

Факт: доход увеличивается на 1% на каждые 100 мс уменьшения времени загрузки страницы.

Тест скорости WordPress CDN

Давайте посмотрим на CDN в действии, протестировав его на сайте WordPress, размещенном на Cloudways. Наш сервер находится во Фремонте, США. Мы тестировали скорость из нескольких мест до и после интеграции CloudwaysCDN .

Сан-Хосе, Калифорния, США

До

После

Нью-Йорк, Нью-Йорк, США

До

После

Стокгольм, Швеция

До

После

Мельбурн, Австралия

До

После

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

4. Лучшие поставщики CDN на WordPress

Поставщики WordPress CDN доступны в любом бюджетном диапазоне. Вдобавок к этому многие поставщики CDN предлагают пробную учетную запись.

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

Примечание. StackPath (также известный как CloudwaysCDN) можно легко интегрировать в платформу.

CloudwaysCDN (StackPath)

CloudwaysCDN работает на StackPath, одном из лучших поставщиков CDN для WordPress с большой глобальной сетью серверов.

Популярные функции включают защиту от DDoS-атак и функции блокировки с балансировкой нагрузки. Все планы также предлагают защиту брандмауэром, что также способствует сокращению времени загрузки страницы вашего веб-сайта.

Пользователи Cloudways также могут использовать эту опцию CDN с плагином кэширования Breeze по умолчанию.

Стоимость: 1 доллар за 25 ГБ.

KeyCDN

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

KeyCDN также предлагает защиту от DDoS-атак, бесплатные и настраиваемые SSL-сертификаты, поддержку HTTP / 2 и RESTful API для сторонних интеграций.

Ценообразование: модель ценообразования - оплата по факту использования, начиная с 0,04 доллара США за гигабайт, при минимальном годовом счете в размере 40 долларов США.

Cloudflare

Cloudflare - один из самых популярных CDN для WordPress, главным образом потому, что его легко настроить и он имеет огромную глобальную сеть серверов.

Cloudflare также предлагает бесплатный CDN для сайтов WordPress с ограниченной защитой от DDoS-атак и других уязвимостей. Другие функции включают балансировку нагрузки, веб-оптимизацию, управление DNS и сертификаты SSL.

Цена: план Pro начинается от 20 долларов в месяц.

CloudFront

CloudFront от Amazon - это быстрый и безопасный CDN для WordPress, который предлагает стандартную защиту от DDoS и подобных угроз. Его можно легко интегрировать с помощью консоли управления Amazon, интерфейса командной строки и SDK.

Цена: по запросу

Инкапсула

Incapsula - еще один популярный CDN для WordPress с серверами, расположенными по всему миру. Он легко интегрируется с WordPress и совместим со всеми популярными плагинами кеширования.

Incapsula предлагает такие функции, как сертификаты SSL, круглосуточную поддержку, защиту от DDoS-атак, брандмауэр, аналитику атак, анализ угроз и защиту данных.

Цена: от 59 долларов в месяц.

CDN77

CDN77 - одна из самых быстрых сетей CDN для веб-сайтов WordPress. Основные функции включают сертификаты SSL / TLS, защиту от DDoS-атак, защиту от горячих ссылок и веб-брандмауэр.

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

Стоимость: от 199 долларов в месяц.

При выборе правильного CDN для вашего бизнеса обязательно учитывайте стоимость и услуги наряду с производительностью.

5. Бенчмаркинг WordPress CDN

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

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

1. CloudwaysCDN (партнерство со StackPath, ранее известное как MaxCDN)
2. Cloudflare
3. KeyCDN

Процесс тестирования CDN

Я запустил WordPress по умолчанию на сервере Cloudways DigitalOcean с 1 ГБ ОЗУ , 25 ГБ SSD и 1 ядерным процессором .

Для тестирования производительности мы использовали инструмент CLI для тестирования CDN с открытым исходным кодом . Чтобы понять, насколько быстро WordPress CDN доставляет контент, вам потребуется ввести достаточное количество данных в течение нескольких часов.

В нашем тестировании CDN мы загрузили три файла изображений с нашего сайта WordPress, размещенного на Cloudways ( маленький: 78,6 КБ, средний: 747 КБ, большой: 1,28 МБ), на 3,5 часа с 5-минутными интервалами. Эти файлы взяты с сайта WordPress, размещенного на Cloudways.

Результаты бенчмаркинга CDN

После тестирования производительности мы скомпилировали окончательные данные в графическом представлении для облегчения сравнения. Данные были получены после выполнения теста в течение 3,5 часов. Тест дает вам подсказку, какой CDN лучше работает с каким размером файла.

Маленькое изображение

Cloudflare запустился нормально, но не смог сохранить тот же темп при загрузке изображения небольшого размера. В первые 40 минут теста он достиг 22 миллисекунд, тогда как CloudwaysCDN и KeyCDN просто лежали прямо на горизонтальной оси, показывая постоянную скорость примерно 2-3 миллисекунды. В KeyCDN наблюдается всплеск с 75-й на 85-ю минуту, где он достиг 9 мс.

CloudwaysCDN была довольно гладкой на протяжении всего испытания. Началась и закончилась проверка на максимальной скорости загрузки без каких-либо сюрпризов.

Среднее изображение

Не стало лучше с CloudFlare и при загрузке изображения среднего размера. У него были огромные всплески от 20-40 минут примерно 128 мс. Еще один меньший всплеск с 75 до 85 минут. С другой стороны, CloudwaysCDN сохранил свою лидирующую позицию по сравнению с KeyCDN , которая показала некоторые нарушения к концу теста, как видно на приведенном выше графике.

Большое изображение

При загрузке большого изображения (1,28 МБ) скорость загрузки Cloudflare составляла примерно 40 мс, в то время как у его аналогов начало было сравнительно хорошим. KeyCDN был почти стабильным на протяжении всего теста, за исключением нескольких ударов в начале и ближе к концу теста. CloudwaysCDN снова проделал потрясающую работу, оставаясь как можно ближе к оси X, показывая быструю и стабильную скорость загрузки на протяжении всего теста.

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

Средний балл

Результаты из приведенного выше графика довольно просты. CloudwaysCDN имел самую высокую скорость загрузки во всех трех категориях файлов. KeyCDN занял второе место со средним баллом. Cloudflare занял третье место с самым низким показателем из-за огромных всплесков на начальных этапах всех трех тестов. Он показал неплохие результаты как в середине, так и в конце тестов.

6. Как использовать CDN в WordPress?

6а. Добавить CloudwaysCDN в WordPress

Клиенты Cloudways могут активировать и интегрировать CloudwaysCDN с WordPress всего одним щелчком мыши. Вот несколько этапов этого процесса: войдите в учетную запись Cloudways, перейдите в Приложения, а затем войдите в приложения WordPress, в которых вы хотите установить CloudwaysCDN.

На левой панели перейдите на вкладку CloudwaysCDN и введите URL-адрес вашего сайта WordPress. Щелкните по кнопке СОЗДАТЬ .

Это включит CloudwaysCDN для этого приложения и предоставит вам несколько деталей, таких как URL-адрес CDN, использование полосы пропускания и очистка кеша. У вас также есть возможность удалить CloudwaysCDN.

Чтобы интегрировать его в сайт WordPress, просто нажмите кнопку « Применить» .

PS: Одно нажатие применимо только к Breeze - бесплатному плагину кеширования WordPress от Cloudways. Если вы используете какой-либо другой плагин кэширования, получите URL-адрес CDN на вкладке CloudwaysCDN и настройте CDN соответствующим образом.

Войдите в административную панель вашего сайта WordPress и затем нажмите Breeze в разделе « Настройки» :

Перейдите на вкладку CDN плагина Breeze Cache, и здесь вы увидите, что опция Активировать CDN отмечена как отмеченная, а URL-адрес CDN установлен в поле CDN CNAME .

Пришло время проверить, интегрирована ли CDN. Откройте свой сайт, нажмите CTRL + U и найдите StackPath . Вы получите несколько результатов, которые означают, что CDN успешно интегрирован.

Похоже, сайт не работает?

Не стоит беспокоиться! Cloudways использует Varnish для оптимизации сайтов WordPress. Обязательно очистите весь кеш, а затем снова посетите сайт. Ура! Вы интегрировали CloudwaysCDN всего за несколько кликов.

Хотите узнать больше о CloudwaysCDN? Взгляните сюда .

6б. Добавить CloudFront в WordPress

CloudFront от Amazon, пожалуй, самый популярный CDN для веб-сайтов WordPress. После подключения CloudFront обслуживает контент сайта WordPress непосредственно со своих серверов, а не запрашивает сервер хостинга. Это уменьшает количество запросов, которые нагружают хост-сервер.

Получите URL-адрес CDN, создав веб-распространение в CloudFront CDN

Я предполагаю, что у вас уже есть учетная запись в Amazon Web Services (AWS). Если нет, зарегистрируйтесь и перейдите в CloudFront Console . Затем нажмите « Начать работу» в разделе « Интернет ».

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

• Исходное доменное имя: URL-адрес моего веб-сайта (wpcommunity.org)
• Путь к источнику: введите конкретный путь для активов, если они у вас есть. (Я оставил поле пустым.)
• Идентификатор источника: введите простое описание того, о чем эта услуга.

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

Развертывание займет несколько минут, в зависимости от содержания вашего сайта. После завершения процесса вы перейдете на экран, на котором вы найдете доменное имя (URL-адрес CloudFront).

Скопируйте URL-адрес в доменное имя, перейдите на вкладку CDN в Breeze и вставьте в текстовое поле URL-адрес корневого каталога CDN .

• Активировать CDN : отметьте это, если хотите активировать CDN.
• Корневой URL-адрес CDN : URL-адрес созданного дистрибутива. Не забудьте добавить к URL-адресу HTTP / HTTPS.
• Контент CDN : каталоги контента, который вы хотите обслуживать с помощью CDN.
• Исключить контент : если вы хотите исключить несколько расширений файлов или каталогов, которые не обслуживаются CDN, введите их здесь.
• Относительный путь : всегда рекомендуется включать относительный путь, чтобы сохранить структуру файлов и папок.

Давай проверим!

Посетите URL своего сайта, просмотрите исходный код и выполните поиск CloudFront . Вы увидите, что все ресурсы, такие как CSS, JS и изображения, обслуживаются CloudFront CDN.

6c. Добавить KeyCDN в WordPress

KeyCDN - один из ведущих поставщиков CDN для WordPress на рынке. Я предлагаю вам опробовать их услуги на своем веб-сайте (в течение бесплатного пробного периода), прежде чем выбирать полную учетную запись.

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

Первым делом мне нужно зарегистрировать учетную запись KeyCDN, заполнив несколько необходимых данных. В самом первом поле введите URL-адрес веб-сайта, который вы хотите соединить с KeyCDN, и заполните другие данные, такие как адрес электронной почты и учетные данные пользователя.

После нажатия на кнопку « Создать учетную запись» вы получите письмо с подтверждением. После проверки вы увидите панель управления KeyCDN:

Получите URL-адрес CDN, добавив зону в KeyCDN

Мой сайт WordPress добавлен в мою учетную запись. Теперь мне нужно добавить зону относительно URL-адреса моего сайта. На левой панели перейдите на вкладку Зоны, и вам будет предложено настроить зону.

• Имя зоны: KeyCDN предоставляет специальный URL-адрес в формате по умолчанию: http://xxx-yyy.kxcdn.com. Где XXXX - это имя, которое вы ввели в поле «Имя зоны». В моем примере это будет wp-yyy.kxcdn.com, потому что я ввел wp.
• Статус зоны : поскольку мой сайт будет общедоступным, я добавлю статус «Активный».
• Тип зоны : существует два типа зоны: тянущая или толкающая. Помимо типа зоны, вы можете увидеть флажок Показать дополнительные функции. Разверните и настройте его - если вы достаточно уверены в том, что делаете! В противном случае оставьте значение по умолчанию.
• Исходный URL : введите URL-адрес веб-сайта, который вы хотите подключить к этой Зоне.

После настройки зоны вы будете перенаправлены на вкладку « Зона », и там вы увидите вновь созданную зону, как на изображении ниже. Статус моей зоны в настоящее время установлен как « Развертывание» . Это означает, что он настраивает и связывает все между зоной KeyCDN и веб-сайтом.

Процесс может занять несколько минут. Как только это будет сделано, статус изменится на Активный . Вы можете очистить кеш, нажав кнопку « Управление» , как показано на рисунке ниже.

Настройте KeyCDN с помощью Breeze

Итак, я настроил KeyCDN, создал зону и получил URL-адрес зоны.

Скопируйте его, перейдите на вкладку CDN в плагине кеширования Breeze WordPress и вставьте в поле URL-адрес корневого каталога CDN .

Протестируйте сайт

На данный момент я правильно настроил KeyCDN и подключил его к Breeze. Давайте проверим, обслуживает ли сайт CDN. Для этого посетите свой веб-сайт и просмотрите исходный код страницы, нажав CTRL + U (Chrome). Найдите kxcdn , и вы увидите, что CSS, JS и изображения обслуживаются через KeyCDN.

Breeze ими не ограничивается, любой CDN на основе активов можно легко настроить с помощью Breeze. Вам просто нужно получить URL-адрес CDN WordPress и вставить его во вкладку Breeze CDN. Вот и все!

Подведение итогов!

Мы видели, как скорость играет важную роль в общей конверсии, а также в SEO-рейтинге вашего сайта. В конце концов, инвестировать в хороший WordPress CDN - неплохая идея. Пользователи Cloudways могут легко интегрировать CloudwaysCDN со своей панели управления, и с них взимается экономичная 1 доллар за 25 ГБ за приложение. Дополнительное потребление стоит всего 0,04 доллара за Гб.