Webmaster

Ускоряем загрузку сайта с помощью простого и бесплатного CDN от Cloudflare

Итак вы перевели блог в статику, оптимизировали js, css и картинки, сделали кнопки социальных сетей асинхронными. И все равно вам кажеться что ваш сайт должен загружается быстрее. Что дальше? Следующим разумным шагом было бы:

  • Установить на каком-нибудь VPS сверхбыстрый сервер G-WAN и раздавать статические html'ы оттуда.
  • Или вообще отказаться от сервера, залить статические html'ы на Amazon S3 и раздавать с помощью Cloudfront.

Первый метод все равно не дает сильного прироста по сравнению с nginx (по моим тестам около 30%, потому что в независимости от того как быстро сервер отдает файл, основная задержка как правило в сети). Второй метод мне не подходит по заповеди - "Не храни все яйца в одной корзине, юный падаван". Ну не могу я хранить файлы у сервиса где я обычно покупаю кеды :).

Основной проблемой становиться география географическое положение. Я нахожусь в Европе, основная аудитория этого блога - в России. Поскольку хоститься в Европе дорого, а в России стрёмно, все сервера на которых работают мои сервисы находятся в Америке. Из за этих диких расстояний и теряются ценные секунды.

Сайт с Cloudflare пингуеться в 10 раз быстрее

Обычно такие проблемы решаются с помощью CDN'ов (Content Delivery Network). В двух словах идея CDN: редко обновляемый контент сайта заливается на несколько серверов расположенных в разных частях мира. А когда посетитель запрашивает например картинку, она будет скачивается с ближайшего к нему сервера.

Такие штуки как правило стоят денег, но есть классный бесплатный сервис Cloudflare. Сыр бесплатен в расчете на то, что когда вам понадобиться поддержка SPDY, HTTPs, продвинутая защита от DDOS и.т.д вы купите платный аккаунт. Но скромному блогу то этого всего не надо, так что пока вам не потребуется 100 террабайт траффика в месяц можно спокойно использовать эту CDN.

Сайт с Cloudflare грузится в 6 раз быстрее

Также Cloudflare спасает от простеньких DDOS. А если ваш основной сервер ляжет, то сайт все равно будет открываться из кэша Cloudflare. Ну и картинки с css и скриптами сжимать умеет. И траффик ваш по понятным причинам серьезно сэкономит. И даже всякую фигню типа разнеси страницу навешивать умеет. Must have вообщем.

Итак, с помощью Cloudflare на этом блоге который находиться на Eskhosting'e удалось (см. скриншоты где-то рядом):

  • Скорость загрузки увеличилась с 297 KB/s до 1.72 MB/s.
  • Время загрузки страницы сократиось в среднем с 2.91 сек до 1.09сек.
  • Пинг с 161мс до 10мс.
  • Вообщем загрузка сайта ускорилась примерно в 2-3 раза.

Теоретически Cloudflare может сделать быстрым и доступным для всего мира даже сайт на каком-нибудь копеечном шаред хостинге, где нибудь в Афганистане, Австралии или Замбезии с 50% uptime1. Помоему преимущества очевидны. Далее пару советов по настройке

У Cloudflare очень дружественная к пользователю админка. Даже русский язык включить можно внизу страницы. Подключение сайта сделано максимально просто, по шагам его описывать я не вижу смысла. Cloudflare сам перетащит с себе существующие настройки DNS (например MX для почты) после чего вы можете смело направить свои DNS на их сервера. Потом надо подождать примерно сутки чтобы все обновилось. После этих простых действий, ваш сайт будет доступен напрямую по ip и по адресу direct.вашсайт.сом (используйте это чтобы подключиться по ftp например). Все остальные обращения к сайту будут идти через прокси Cloudflare, который будет отдавать контент с самого ближнего к посетителю сервера.

Настройки Page Rules

По дефолту Cloudflare не кеширует html. Если у вас статический сайт (то есть все часто меняющиеся функции типа комментов и топов постов делаються JavaScriptом на клиентской стороне) то в настройках сайта создайте два правила (Page Rules) для страниц вашсайт.com/*.html и вашсайт.com/ со значением Custom caching = Cache everything как показано на скриншоте справа. Если сайт не статический то вы все равно выиграете в скорости благодаря кешированию всего остального - картинок, стилей, скриптов etc.

Там же в настройках можно заказать оптимизацию для тех же скриптов и css'ов. Если вы не по каким то причинам не делаете это сами позвольте Cloudflare сделать это за вас (Performance settings расставить птички для JS, CSS, HTML в Auto Minify (Web optimization)).

Все что нам остается сделать - после обновления вашего сайта послать Cloudflare комманду о том что нужно удалить все из кеша, чтобы изменения стали видны всем посетителям:

curl https://www.cloudflare.com/api_json.html \
  -d 'a=fpurge_ts' \
  -d 'tkn=8afbe6dea02407989af4dd4c97bb6e25' \
  -d '[email protected]' \
  -d 'z=вашсайт.com' \
  -d 'v=1'

Абракадабра 8afbe6dea02407989af4dd4c97bb6e25 - это у меня не клавиатура заела, а api key который бреться здесь.

Например я добавил это в скрипт синхронизации новой версии сайта по ftp.

UPD: Минусом является то, что ваш сайт "лишается" своего уникального ip (если таковой был), и он будет находиться на одном ip с множеством других сайтов, которые так-же используют Cloudflare. А если какой-то иэ этих сайтов забанит Росгосрыбнадзор Роскосмоснадзор то и ваш сайт может попасть под одну гребёнку. Но как я понял теперь они аккуратнее работают, и такое реже происходит.

Спасибо за внимание. Всем желаю быстрого интернета! Godspeed, как говориться.

  1. Потому что соляра в дизельгене постоянно кончается.
Оцените статью
  • Страшный

    Не понимаю почему не наткнулся на ресурс ранее, я перекопал пол интернета в поисках ресурса поднимающего подобные вопросы. Не сочти за лесть, но огромное спасибо) Теперь сайт точно будет летать!

  • Nurlan

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

  • Сёма Мрачный

    чего я не понял, так это того, что нужно ли мне удалять настройки у старого dns-провайдера при подключении? т.е. ns-записи у него поставил на CloudFlare, нужно ли удалять mx-записи и прочие? думаю, что да, но точно ли это так?

  • marybe

    когда "кажетЬся" - креститься надо

  • Shikova Elena

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

  • seoonly.ru

    Стал почему-то только медленней грузиться((

  • Sergey Sergeev

    интересно