RocketScript – это уникальный фрагмент кода, который автоматически подставляется вместо JavaScript системой Rocket Loader, откладывая тем самым загрузку JS-скриптов до загрузки контента страницы.
Зачастую наличие скриптов в коде тормозит загрузку страниц сайта, так как браузер считывает информацию и загружает ее последовательно, строчку за строчкой. В результате на фрагментах, содержащих JS-скрипты, время загрузки увеличивается, откладывая тем самым загрузку самого контента. Это приводит к повышению процента отказов. Люди закрывают вкладки, попросту не дожидаясь окончания загрузки.
Хорошо, когда фрагменты кода, содержащие JS, расположены где-нибудь в конце. Но зачастую при верстке сайта их добавляют сразу после того элемента, к которому скрипт применяется. Например, сразу после слайдера, что значительно замедляет загрузку элементов, находящихся после этого слайдера.
В Сети есть множество инструментов, позволяющих сделать загрузку скриптов JavaScript асинхронно, то есть сначала весь контент, а потом скрипты. И Rocket Loader, разработанный компанией CloudFlare, является одним из них.
Rocket Loader
Rocket Loader – это универсальный асинхронный загрузчик JavaScript в сочетании с легким виртуальным браузером, который может безопасно загрузить любой JS-код. Сервис ускоряет загрузку ресурса за счет добавления rocketscript, делая представление контента приоритетным. Как показывают исследования компании Google, сайты, где контент загружается быстрее, получают гораздо меньше отказов и способны в большей степени увлечь посетителя.
Сервис работает в автоматическом режиме, вам лишь нужно подсоединить свой сайт к CloudFlare и включить Rocket Loader в настройках. Как это сделать:
-
Открыть официальную страницу dash.cloudflare.com/login.
-
Зарегистрироваться, введя свой e-mail и придумав новый пароль.
-
Согласиться с условиями использованиями, поставив галочку, и нажать Create Account.
-
Далее добавьте свой сайт, введя его домен.
-
Нажмите кнопку Next.
-
Выберите тарифный план (для первого раза можно воспользоваться бесплатной версией) и нажмите Confirm Plan.
-
Нажмите кнопку Confirm.
-
Далее вы попадете в «Личный кабинет». Здесь вам будет предложено активировать свой веб-сайт (подтвердить). Для этого нужно добавить в DNS вашего хостинга следующие имена:
-
kiki.ns.cloudflare.com,
-
plato.ns.cloudflare.com
Подтверждение может занять до 24 часов.
-
-
После того как сайт будет активирован, необходимо перейти во вкладку Speed в «Личном кабинете» CloudFlare.
-
Далее вы увидите перечень инструментов, способствующих увеличению скорости загрузки страниц, одним из которых и будет Rocket Loader.
-
Он доступен для бесплатной версии, поэтому вам лишь останется передвинуть ползунок вправо (On), чтобы он загорелся зеленым цветом.
Далее сервис автоматически подставит фрагмент rocketscript на каждую страницу, где это будет необходимо, тем самым сделав загрузку JS-скриптов асинхронной.
Обратите внимание, что ускорить загрузку страниц ресурса вы можете и с помощью других инструментов. Например, AutoMinify, который сжимает файлы JS, HTML, CSS, ускорение мобильной загрузки, мобильный редирект и др.
Плагин на WordPress
Для веб-мастеров, использующих CMS WordPress, создан специальный плагин, содержащий в себе некоторые инструменты сервиса CloudFlare.
Чтобы его установить, необходимо:
-
Перейти в консоль сайта.
-
Далее перейти в раздел «Плагины».
-
Нажать кнопку «Добавить новый».
-
В поисковую строку вписать CloudFlare.
-
Найти официальный плагин и нажать кнопку «Установить».
-
Дождаться установки и нажать кнопку «Активировать».
Готово! Плагин установлен.
После установки необходимо подключить свой аккаунт (или создать его), чтобы появилась возможность использовать функционал CloudFlare на своем сайте.
-
Перейдите в настройки плагина.
-
Здесь необходимо создать свой аккаунт (или авторизоваться, если вы уже зарегистрированы).
-
При создании вас перенесет на страницу компании CloudFlare, где необходимо будет повторить пункты 2–7 из первой инструкции этой статьи.
-
Если вы уже зарегистрированы, вам необходимо авторизоваться (кнопка here).
-
Далее необходимо ввести e-mail и API Key, который можно получить в «Личном кабинете» на сайте CloudFlare. Для этого нажимаем кнопку here, расположенную под формой.
-
В появившемся окне найдите раздел API Keys.
-
Напротив строки Global API Key нажмите кнопку View.
-
Введите пароль и подтвердите, что вы не робот, а затем снова нажмите кнопку View.
-
Далее вы увидите свой API-ключ.
-
Полученный ключ скопируйте, вставьте в окне авторизации в настройках плагина и нажмите Save API Credentials.
После подключения плагина в его настройках вы сможете использовать все доступные для вашего тарифного плана инструменты.
