RocketScript и Rocket Loader для ускорения работы сайта
Распространенной ошибкой, которую допускают разработчики при написании кода сайта, является размещение JS-скриптов перед основным контентом. Браузер распознает код страницы постепенно, по строчкам, и элементы со скриптами ощутимо увеличивают время загрузки содержимого страницы. Пользователь вынужден ждать, пока загрузятся все элементы. Зачастую люди не дожидаются и закрывают страницу. Чтобы сделать загрузку более мобильной, применяют инструменты для асинхронной загрузки элементов JavaScript. Это позволяет отложить их открытие и браузер загружает в первую очередь содержание. Часто для этих целей используют Rocket Loader от компании CloudFlare.
RocketScript и Rocket Loader что это и как они работают
Rocket Loader это универсальный загрузчик помогает быстро и безопасно открыть JS-код. Он имеет простой виртуальный браузер, распределяет элементы для асинхронного открытия, таким способом отдавая предпочтение непосредственно контенту. Это происходит благодаря добавлению rocketscript. Это влияет на популярность и посещаемость ресурса. Статистика Google говорит, что у таких сайтов гораздо меньше процент отказа, чем у тех, что игнорирует систему Rocket Loader и фрагмент RocketScript.
Как настроить Rocket Loader
Система предельно проста в использовании, она работает автоматически. Для начала присоедините ресурс к CloudFlare. В настройках активируйте Rocket Loader. Чтобы сделать это быстро и корректно, следуйте инструкции:
Если все правильно, то откроется личный кабинет.
Нужно активировать сайт следующим образом. Добавьте имена в DNS хостинга:
Существуют иные инструменты, помогающие оптимизировать скорость открытия элементов сайта. Пользуется популярностью AutoMinify. Он работает по принципу сжатия файлов JS, HTML, CSS, значительно ускоряет мобильную загрузку.
Отдельно нужно отметить плагин на базе WordPress
Отдельные инструменты, которые предлагает CloudFlare присутствуют в плагине для CMS WordPress. Его установка занимает минимум времени:
Такими несложными действиями устанавливается плагин. Он работает на бесплатной основе.
Чтобы использовать возможности CloudFlare, подключите аккаунт. Для этого выполните следующие действия:
После совершения этих действий плагин подключится и вы сможете применять инструменты, которые открыты для вашего тарифного плана.
Обучение продвижению сайтов
RocketScript
RocketScript – это уникальный фрагмент кода, который автоматически подставляется вместо JavaScript системой Rocket Loader, откладывая тем самым загрузку JS-скриптов до загрузки контента страницы.
Зачастую наличие скриптов в коде тормозит загрузку страниц сайта, так как браузер считывает информацию и загружает ее последовательно, строчку за строчкой. В результате на фрагментах, содержащих JS-скрипты, время загрузки увеличивается, откладывая тем самым загрузку самого контента. Это приводит к повышению процента отказов. Люди закрывают вкладки, попросту не дожидаясь окончания загрузки.
Хорошо, когда фрагменты кода, содержащие JS, расположены где-нибудь в конце. Но зачастую при верстке сайта их добавляют сразу после того элемента, к которому скрипт применяется. Например, сразу после слайдера, что значительно замедляет загрузку элементов, находящихся после этого слайдера.
В Сети есть множество инструментов, позволяющих сделать загрузку скриптов JavaScript асинхронно, то есть сначала весь контент, а потом скрипты. И Rocket Loader, разработанный компанией CloudFlare, является одним из них.
Rocket Loader
Rocket Loader – это универсальный асинхронный загрузчик JavaScript в сочетании с легким виртуальным браузером, который может безопасно загрузить любой JS-код. Сервис ускоряет загрузку ресурса за счет добавления rocketscript, делая представление контента приоритетным. Как показывают исследования компании Google, сайты, где контент загружается быстрее, получают гораздо меньше отказов и способны в большей степени увлечь посетителя.
Сервис работает в автоматическом режиме, вам лишь нужно подсоединить свой сайт к CloudFlare и включить Rocket Loader в настройках. Как это сделать:
Зарегистрироваться, введя свой e-mail и придумав новый пароль.
Согласиться с условиями использованиями, поставив галочку, и нажать Create Account.
Далее добавьте свой сайт, введя его домен.
Нажмите кнопку Next.
Выберите тарифный план (для первого раза можно воспользоваться бесплатной версией) и нажмите Confirm Plan.
Нажмите кнопку Confirm.
Далее вы попадете в «Личный кабинет». Здесь вам будет предложено активировать свой веб-сайт (подтвердить). Для этого нужно добавить в DNS вашего хостинга следующие имена:
Подтверждение может занять до 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.
После подключения плагина в его настройках вы сможете использовать все доступные для вашего тарифного плана инструменты.
Как мы смогли еще больше ускорить загрузку наших страниц
Дата публикации: 2018-02-20
От автора: в 2017 мы сделали свои 2 продукта веб-оптимизации — Mirage и Rocket Loader – еще быстрее! Вместе эти продукты ускоряют примерно 1.2 миллиарда веб-страниц в неделю. Обоим проектам примерно 5 лет, поэтому был большой шанс обновить их под современный мир браузеров, HTTP2 и современные JS инструменты. Мы измерили прирост производительности, и с очень грубыми подсчетами мы экономим посетителям сайтов в нашей сетки примерно 50-700ms. Исследование Google показало, что посетители, которые видят контент быстрее, намного сильнее увлечены им и реже уходят с сайта. Это действительно радует, особенно когда каждый год экономится 380 лет загрузки и ошеломляющая цифра в 1.03 петабайт данных. Поэтому вопрос о том, как ускорить загрузку страниц, всегда будет актуален.
Что делают Mirage и Rocket Loader
Mirage и Rocket Loader оптимизируют загрузки веб-страниц путем уменьшения и откладывания количества файлов, которые браузеру необходимо запросить для завершения парсинга HTML и рендера на экран.
Mirage
С Mirage пользователи на слабых мобильных соединениях будут быстро видеть полную страницу контента, используя плейсхолдер изображения маленького веса, которые загружаются намного быстрее. Без Mirage пользователям на слабом мобильном соединении придется долго ждать загрузки изображений высокого качества. Так как это займет много времени, для пользователей ваш сайт будет казаться медленным:
С Mirage посетители будут быстрее видеть контент, поэтому им будет казаться, что контент загружается быстро, что сократит число уходов с сайта.
Rocket Loader
Браузеры не будут показывать контент, пока не загрузится и не запустится весь JS, который на него влияет. Так пользователи могут довольно долго ждать, пока вообще что-то загрузится, даже если они пришли на сайт только ради этого контента! Rocket Loader прозрачно откладывает выполнение всего JS до загрузки остальной части страницы. Это позволяет браузеру максимально быстро показывать контент, который хотят пользователи.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Как они работают
Оба продукта работают по двухэтапному процессу: сначала наш оптимизирующий прокси-сервер переписывает способ доставки HTML клиента, после чего наш встроенный JS пытается оптимизировать загрузку страниц. Например, сервер Mirage переписывает теги изображений следующим образом:
Браузеры не понимают data-cfsrc, поэтому JS Mirage может контролировать весь процесс загрузки этих изображений. Он использует эту возможность для умной загрузки плейсхолдер изображений на слабых соединениях.
Rocket Loader использует похожий подход для снижения приоритета JS во время загрузки страницы, позволяя браузеру максимально быстро показывать контент страницы.
Проблемы
JS для обоих продуктов был написан много лет назад, когда rollup принес плохой образ жизни, а не отличный билд-инструмент. С большими изменениями, которые мы наблюдали в браузерах, протоколах и JS, было много возможностей по оптимизации.
Динамически… замедляя
Разработанные для экосистемы того времени, оба продукта загружались с помощью загрузчика Cloudflare asynchronous-module-definition (AMD), который назывался CloudflareJS и включал еще несколько общих библиотек.
Поэтому процесс загрузки Mirage и Rocket Loader был таким:
Серверный рерайтер вставлял CFJS в блокирующий тег script
CFJS запускался и просматривал некоторые настройки на странице, решая во время выполнения, загружать ли Rocket/Mirage через AMD, вставляя новые теги script
Rocket/Mirage загружались и запускались
Борьба с браузерами
Динамическая загрузка означала, что продукты не смогут пользоваться оптимизациями, которые есть в современных браузерах. Теперь браузеры сканируют HTML, так как он доходит до них, и им не приходится ждать, идентифицируя и загружая как можно быстрее внешние ресурсы типа теги скриптов. Процесс называется preload scanning – одна из важнейших оптимизаций, выполняемых браузером. Так как мы использовали динамический код внутри CFJS для загрузки Mirage и Rocket Loader, мы тем самым заблокировали их для прелоад сканнера.
Хуже того, Rocket Loader динамически вставлялся с помощью злодея DOM API, document.write – техника, которая сильно понижает производительность. Поняв, почему все именно так, я создал схему. Посмотрите на нее и вернитесь после следующего параграфа:
Как я сказал, вставка скриптов через document.write сильно бьет по производительности загрузки страниц. document.write невидим для прелоад сканнера (даже если скрипт встроенный, а наш нет, прелоад сканнер даже не пытается просканировать JS), поэтому когда вставляется тег скрипта браузер уже будет занят поиском ресурсов, которые сканнер нашел в другом месте на странице (другие теги скриптов, изображения и т.д.). Это имеет значение, потому что браузер, столкнувшийся с неотсроченным или асинхронным JS, как Rocket Loader, должен блокировать все дальнейшее построение дерева DOM до тех пор, пока этот скрипт не будет загружен и не запущен, чтобы он мог изменить DOM. Таким образом, Rocket Loader вставлялся в тот момент, когда он был очень медленным для загрузки из-за отставания запросов от прелоад сканнера, что вызывало большие задержки, прежде чем парсер DOM мог продолжить работу!
Помимо этой катастрофы с производительностью, нас подгоняло к удалению document.write то, что Chrome начал вмешиваться в 55 версии, что вызвало очень интересные обсуждения. Это вмешательство иногда мешало Rocket Loader вставляться в медленные 2G соединения, останавливая загрузку любого другого JS!
Было ясно, что от document.write необходимо было избавляться!
Неиспользуемый и слишком общий код
CFJS был общей библиотекой для клиентского кода Cloudflare, в том числе для оригинального магазина приложений Cloudflare. Это означало, что у нее большой набор API. Mirage и Rocket Loader зависели от них, но перекрытие было небольшим. Когда мы запустили новый Cloudflare Apps, у CFJS больше не было других важных продуктов, зависящих от него.
План действий
До присоединения к Cloudflare в июле прошлого года я работал в TypeScript – язык на всем любимом новом синтаксисе современного JS. Принятие множества проектов на AMD, ES5 с помощью Gulp и Grunt шокировало меня. Я реально думал, что написал свою последнюю
What Is Cloudflare Rocket Loader™?
Rocket Loader™ is a general-purpose asynchronous JavaScript loader coupled with a lightweight virtual browser which can safely run any JavaScript code after window.onload.
Activating Rocket Loader™ will immediately improve a web page’s window.onload time (assuming there is JavaScript on the page), which can have a positive impact on your Google search ranking.
Here are the different settings that can be found for Rocket Loader™ in your Cloudflare account’s performance settings:
Automatic Mode: Rocket Loader™ will automatically run on the JavaScript resources on your site, with no configuration required after turning on automatic mode.
Manual Mode: In order to have Rocket Loader™ execute for a particular script, you must add the following attribute to the script tag: “data-cfasync=’true’”. As your page passes through Cloudflare, we’ll enable Rocket Loader™ for that particular script. All other JavaScript will continue to execute without Cloudflare touching the script.
To enable Rocket Loader™:
1. Log in to your Cloudflare account.
2. Click the domain you wish to enable Rocket Loader™ on.
3. Click the “Speed” link on the menu at the top of the page.
4. Scroll to the “Rocket Loader™” section and toggle it on or off as needed.
Website Optimization Services
Delivering fast web experiences is not just about moving files closer to your visitors.
It’s about ensuring the first pixels load on your visitors’ screens as quickly as possible. It’s about optimizing the order of page resource delivery to make the page visible and usable faster.
And it’s about knowing when and why your webpages are rendering slowly, and what you can do about it.
Gauge how fast your website is. And how you can make it even faster.
Browser Insights
If you can’t measure it, you can’t improve it.
Measure the real user experience of your website as well as the performance benefits of using Cloudflare.
Browser Insights lets you measure the TCP connection time, DNS response time, Time to First Byte (TTFB), page load time, and more from the perspective of your visitors all over the globe.
The Speed Page on your dashboard also generates a filmstrip of screen snapshots taken as your webpage loads. This gives you a visual comparison of your website loading on Cloudflare with caching enabled compared to connecting directly to your origin.
«Browser Insights gives us both request-level metrics (such as TTFB) as well as page-level metrics (such as page load time). These insights are very valuable especially when monitoring real-time to enable us to deliver on our goal of making sure all our sites are fast and responsive.»
Technical Operations Manager
«Page speed is one of our #1 priorities right now, and we’ve looked at many analytics tools that can help us understand performance. I think Cloudflare is in the best position to do this well because it is ultimately serving the content and has visibility from the client to the origin server.»
