Веб-дизайнеры хорошо знают, что отличный дизайн имеет особое значение для сайта. И если они доверяют какой-либо концепции, которая, по их мнению, является лучшей и эффективной, то для некоторых пользователей или новых посетителей это может стать большой проблемой. Большой дизайн сайта, красивый, функциональный, анимационный и прочее, и прочее может оказаться очень и очень большой проблемой. Даже для веб-верстальщика, для разработчика. Попросту добавим визуальной составляющей, обилие плагинов, больших кусочков кода, множественные переменные, условия и…
Над оптимизацией работы всего этого совместного творения работают в равной мере и верстальщики, и дизайнеры, но одним только изменением кода или сжатием jpg-изображений дело не заканчивается. Речь идет о скорости работы сайта, об оптимизации и настройке обмена и передачи данных.
Казалось бы, что это может только косвенно касаться верстальщиков и дизайнеров, но клиенты…такие уж клиенты, и зачастую заказывают не просто создание сайта, верстку, но и развертывание на сервере, даже поддержку маломальскую хотят получить. Вот сегодня рассмотрим один из вариантов работы и оптимизации готового дизайнерского проекта по ускорению, но… и не только.
В частности, речь пойдет о подключении CDN, несмотря на то, что кто-то из читателей подумает: «с этим все ясно, много чего я читал уже». Никто и не спорит, но иногда полезно все собрать в одном месте и посмотреть на вопрос оптимизации немного с иной стороны.
Почему скорость так важна?
О том насколько важна быстрота загрузки сайта в окнах браузеров пользователей исследования проводились и проводятся постоянно. Наверное, уже таким заключением никого в наши дни и не удивишь, а сами мы частенько сталкиваемся с моментами, когда внезапно странички сайтов начинают ну…ооочнеь долго подгружаться. Сайты, которые не являются достаточно быстрыми, создают негативное восприятие и влияние.
Фактически время загрузки сайта существенно сказывается на коэффициенте конверсии, а это, в свою очередь, влияет на развитие бренда в целом. Одновременно с тем, как время загрузки становится все выше и выше, коэффициент конверсии снижается в прогрессии. Поэтому оптимальной скоростью загрузки страниц сайта принято считать около 2,4 секунд.
Польза CDN для увеличения скорости
У CDN много плюсов для использования, но мы остановимся на тех моментах, которые могут помочь в ускорении загрузки сайта. Проще говоря, CDN гораздо лучше оснащены, чем большинство услуг хостинга, даже несмотря на VPS или выделенный сервер, представляя собой сеть для обработки трафика веб-сайта. Чтобы немного было понятнее, CDN представляет собой совокупность серверов в ЦОД, которые доставляют сайты конечным пользователям (все, что на сайтах есть: картинки, видео, текст, плагины и так далее).
Виртуальный хостинг, как правило, оптимизирован для предоставления стабильной среды, в которой ваш сайт может работать на PHP или на других популярных средах хостинга, CMS и пр. Такая система, в большинстве случаев, не направлена на оптимизацию для скорости работы сайта в целом. В противовес виртуальному хостингу основная цель CDN направлена на оказание помощи в молниеносной доставке веб-сайта.
Но как же на самом деле CDN может ускорить сайт, что в нем такого необычного и заманчивого?
Как осуществляется ускорение CDN
Чтобы понять, в чем преимущества CDN, вспомним, почему вообще сайт может быть медленным: перегруженность сервера или его медленная работа, большие по размеру изображения на сайте, обилие скриптов, сценариев, что не были оптимизированы или просто, их очень много; географически удаленное расположение серверов по отношению к нахождению целевой аудитории.
Да, существуют и иные причины, но они не так часто встречаются. И если с картинками и выбором хорошего хостинга еще можно определиться и поработать, то последние моменты требуют нашего отдельного рассмотрения.
Множественные скрипты
Когда мы начинаем свое творчество в качестве веб-дизайнера или верстальщика, кажется, что… «как прекрасно все вокруг». Можно установить отдельные скрипты, виджеты, подобрать и то и се, и практически самому даже писать код не требуется, поскольку есть готовые шаблоны. Мы наслаждаемся мнимой свободой, тестируем и устанавливаем и…сайт замедляется в работе, сайт перегружается. Пусть замедление происходит на доли секунд, но оно есть и накапливается.
И даже «прожженные» профессионалы верстальщики тоже порой попадаются в эту ловушку по той причине, что стараются использовать десятки разных плагинов и протестировать их функциональность на соответствие самым изысканным требованиям заказчика. И в результате появляются побочные эффекты в работе, которые не так просто и быстро решить одним удалением скрипта.
В действительности, каждый плагин, что устанавливается на сайте, добавляет файлы Javascript, CSS файлы и требует более высокой производительности вашего сайта. Во время тестирования производительности это можно заметить по большому количеству запросов к этим файлам.
Например, можно увидеть количество уже существующих запросов к сайту через «код элемента» в Opera. Три типа сайтов и разное количество запросов, насыщение скриптами и пр.
Чем меньше – тем лучше. Сжимайте, объединяйте, уменьшайте код скриптов, включите HTTP/2 и, в идеале, держите сайт подальше от тяжелых плагинов.
В данном случае CDN не поможет решить, какие плагины сохранить, а какие удалить, CDN может фактически выполнять «на лету» сжатие и минимизацию скриптов, чтобы сделать общий размер содержимого вашего сайта меньше, и, следовательно, быстрее в работе.
Третьей очень важной рекомендацией является включение HTTP/2. Подробно о преимуществах HTTP/2 мы поговорим отдельно в будущем, но сейчас обратим внимание на тот факт, что протокол был написан (2015 год, поддерживается всеми браузерами) специально для оптимизации времени загрузки веб-сайтов, в частности, тех сайтов, которые имеют много различных ресурсов для обслуживания. Соответственно, косвенно переход на данных протокол влияет на позиции сайта.
Большинство услуг CDN позволяет быстро и легко подключить HTTP/2 к веб-сайту (хотя и без него можно), что и делает мгновенный прирост скорости.
География
Отлично, если вы создаете проект для местной аудитории. Но если сайт предназначен для международных пользователей? Подобрать хороший хостинг и сервер становится затруднительным. У CDN есть сеть из сотен серверов в десятках мест по всему миру. Эти серверы копируют ваши изображения и статические ресурсы, такие как Javascript и CSS файлы к себе. Когда же пользователь затем попадает на ваш сайт, тяжеловесные ресурсы будут загружаться с того сервера, который физически расположен как можно ближе к данному пользователю. Разумеется, это значительно уменьшает проблему расстояния и дает сайту большие преимущества при загрузке.
Крупнейшие CDN в мире
На сегодняшний день оптимизацией CDN пользуются практически все крупные компании. Ускорение работы крупных информационных порталов попросту без него невозможно. Когда же дело доходит до самого обычного интернет-магазина или личного сайта, кафе, блога, то CDN также удобен и не бывает лишним, тем более, что существуют возможности подключения его и без необходимости тратить финансы. А это означает, что создать тот же сайт-портфолио можно невероятно «крутым» с визуальной точки зрения.
Большинство поставщиков услуг CDN предлагают свободный план, который обеспечит необходимую функциональность кэширования, которую мы обсуждали выше. Как правило, помимо оптимизации контента, вы также получаете поддержку по обеспечению безопасности сайта. Со временем, когда сайт разрастется, то возникнет и логическая ситуация в необходимости обеспечения и других возможностей и функционала. Тогда можно переходить и на платные тарифы.
Но если обраться к тем CDN, которые представлены в мире, то обратим внимание на:
Incapsula – один из ведущих поставщиков облачных систем безопасности, который также предлагает возможности по ускорению сайтов. У него есть бесплатный тарифный план с основным набором функций, который подходит для блога или небольшого сайта. Например, кэширование, сжатие, оптимизация скриптов и изображений, защита от спам-ботов, капча, спамовых комментариев, поддержка IPV6, мониторинг, статистика в реальном времени, отчеты еженедельные.
Однако для бизнеса или электронной коммерции потребуется более сложные и функциональные планы с защитой от DDoS, поддержкой Web Application Firewall и пр.
Серверы Incapsula находятся в 30 ЦОД по всему миру, и соответственно, обеспечивают быструю загрузку данных практически всем пользователям. На текущий момент услугами поставщика пользуются более 500 000 сайтов, среди которых Siemens, Wix, T-Mobile, Moc, Hitachi и другие.
CloudFlare – еще один крупнейший игрок на рынке безопасности сайтов и ускорения их загрузки. Его услугами пользуется более 4 миллионов сайтов, а серверы находятся в 118 ЦОД.
Они также предлагают бесплатный план с возможностями кэширования данных, асинхронные загрузки Javascript, HTTP/2 и SPDY, WebSockets, защиту от DDoS, защиту от спама и многое другое. Настройка простая и подключается достаточно быстро. Но если требуется мобильная оптимизация, безопасность более высокого уровня, то придется переходить на платные тарифы.
Поскольку CloudFlare является наиболее популярным решением оптимизации сайта, то и используют его такие компании как Reddit, Mozilla, Feedly, Yelp, StackOverflow, также и Google, Microsoft, Qualcomm.
jsDelivr – как уже понятно по названию, разгружает библиотеки JavaScript, JQuery, шрифты, CSS и многое другое, что способно притормаживать загрузку сайта. Также он обслуживает файлы из Cloudflare, Keycdn, Quantil и MaxCDN. Особенность jsDelivr в том, что можно загрузить несколько файлов с помощью одного запроса HTTP и нет никакого ограничения трафика.
Его услугами пользуются новостные агентства New-York Times, NBC News, а также и Mozilla.
Разумеется, что кроме этих трех, наиболее известных, существуют и такие платформы как Datapath (с поддержкой оптимизации работы в облачном Office 365, Azure, Google Cloud), Photon от Jetpack и Netlify. И да, они могут выглядеть, как нечто сложное и «навороченное», но по факту решают самые незаурядные задачи, даже если у вас самый обычный небольшой сайт с обилием эффектов, анимации, картинок и прочего.
Подключение CDN осуществляется обычно в виде плагина, который переписывает URL статических ресурсов, подставляя к адресу cdn.example.com, где cdn это тот адрес, что дается вам после подключения к системе.
Завершение
Как мы заметили выше, подключение CDN не так затруднительно и дорого, как можно было бы подумать. Но при этом, и дизайнер, и верстальщик могут быть уверены в том, что даже, если они сделали всю зависящую от них работу по оптимизации сайта (скриптов, картинок, видео и пр.), то CDN дополнительно способен в разы увеличить скорость загрузки сайта. А это, в свою очередь, приведет к улучшению UX, к конверсиям, популярности, развитию бренда и вашего профессионализма тоже. И тем более, позволит использовать и самые последние версии библиотек, движков, насыщать сайт анимацией, эффектами, добавлять ресурсоемкие VR и панорамы высокого качества и так далее.
Кроме настройки и развертывания сайта на сервере существуют и вопросы безопасности, а потому CDN способен в разы выручить и с этим вопросом.
Не имеет значение какой хороший вы верстальщик и как хорошо пишете скрипты и настраиваете библиотеки. Все равно сайт может подтормаживать, он может оказаться перегруженным (даже если вы пишете код сами, а не используете CMS). А значит, использование CDN не будет лишним при работе над любым типом сайта.
