Знакомьтесь: Thor Render Engine: создавайте молниеносно быстрые страницы

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

Для интернет-маркетологов не секрет, что скорость загрузки страницы напрямую влияет на вовлеченность пользователей и показатель отказов. Google и другие компании уделяют особое внимание скорости страницы для всех, кто работает в области цифрового маркетинга по крайней мере несколько лет, так что в 2019 году в этом нет ничего нового.

Мы упоминали об этом много раз, но исследования Google показывают, что при медленной загрузке страниц вовлеченность пользователей резко падает, а показатель отказов растет:

Вот почему наша команда неустанно работала над созданием Thor Render Engine™. Механизм рендеринга — это наш новый генератор страниц и часть нашего полностью адаптивного интерфейса страниц, который обеспечивает невероятно быструю загрузку ваших целевых страниц после клика без каких-либо усилий с вашей стороны.

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

Влияние медленной загрузки страниц на конверсию

Насколько медленно загружается медленная страница? Каждая секунда задержки загрузки мобильной страницы приводит к падению конверсии:

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

Akamai пришла к следующим выводам после сбора данных о 10 миллиардах посещений пользователей ведущих интернет-магазинов:

• Половина потребителей просматривают товары и услуги на своих смартфонах, и только каждый пятый на самом деле совершает покупки с мобильных устройств.
• 100-миллисекундная задержка загрузки сайта может снизить коэффициент конверсии на 7%.
• Двухсекундная задержка загрузки веб-страницы увеличивает показатель отказов на 103%.
• 53% посетителей мобильных сайтов покинут страницу, загрузка которой занимает более трех секунд.
• Показатели отказов покупателей мобильных телефонов были самыми высокими, в то время как у покупателей планшетов были самые низкие показатели отказов.

Итак, как вы можете обеспечить быструю загрузку ваших целевых страниц после клика? Google PageSpeed ​​Insights может помочь, но насколько?

Google PageSpeed ​​Insights сообщает о производительности страницы, показывая, является ли страница быстрой, средней или медленной как на мобильных, так и на настольных устройствах. В нем также содержатся предложения по улучшению этой страницы:

Но если у вас нет технического образования, информация о скорости страницы может вас сбить с толку. Понимание того, какие метрики First Contentful Paint (FCP) и First Input Delay (FID) может пройти мимо вас.

Войдите в систему Thor Render Engine™ от Instapage.

Детали Thor Render Engine™

Мы разработали Thor Render Engine™, чтобы обеспечить быструю загрузку всех целевых страниц Instapage после клика.

Это означало полную переработку целевых страниц после клика во всех аспектах — изменение структуры HTML, рефакторинга JavaScript и CSS и отзывчивости CSS, чтобы гарантировать, что все в серверной части ваших страниц позволяет им загружаться мгновенно.

Лучшая часть всех этих изменений заключается в том, что вам не нужно ничего делать, потому что Thor Render Engine™ работает незаметно за кулисами, чтобы сделать ваши страницы молниеносно быстрыми.

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

HTML-структура

Многое ушло на ускорение системы рендеринга страниц с точки зрения HTML, начиная с приоритизации ресурсов.

Приоритизация ресурсов

Мы избавили целевые страницы после клика от большого количества неиспользуемого, двусмысленного или неоптимального кода, в результате чего разметка стала четкой и быстрой.

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

Отзывчивость больше не требует дополнительных точек останова в CSS или JavaScript, потому что страницы будут загружаться быстро и отлично выглядеть без дополнительного кода. Кроме того, все скрипты размещены в нижней части тела страницы, поэтому они не блокируют отрисовку страницы. Критические сценарии и ресурсы (например, шрифты) используют возможности предварительной загрузки браузера, что означает, что они не блокируются во время отображения страницы. Кроме того, в теге head страницы не размещается синхронный JavaScript.

Ленивая загрузка изображений и видео

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

Для решения проблемы мы ввели следующие оптимизации:

• Изображения выше первой страницы загружаются с более высоким приоритетом — загрузка начинается немедленно, поэтому они видны еще до того, как страница станет интерактивной.
• Изображения и видео в нижней части страницы загружаются лениво — загрузка начинается, когда пользователь прокручивает их. Серые прямоугольники используются в качестве заполнителей для еще не загруженных изображений.
• Чтобы пользователь не видел эти серые прямоугольники, изображения фактически загружаются, когда они прокручиваются в окне просмотра. Но когда они прокручиваются на расстоянии 400 пикселей до нижней части области просмотра. Когда они входят в область просмотра, они уже загружены.
• То же правило распространяется на видео, которые загружаются в iframe.

Чтобы это произошло, мы использовали передовой API IntersectionObserver, который делает ленивую загрузку сверхэффективной с небольшим размером кода:

Рефакторинг JavaScript

Рефакторинг JavaScript включал следующие оптимизации:

1. Модульная архитектура: весь код JavaScript на целевых страницах после клика относится к функциям определенных виджетов. Мы разделили наш код на несколько пакетов, каждый из которых содержит код для определенной функции. Таким образом, когда пользователь создает страницу только с изображениями и ссылками, код для виджетов Form или Popup не загружается, что ускоряет загрузку страницы.
2. Сверхлегкий: мы удалили старые библиотеки и перепроектировали всю архитектуру кода, что позволило нам уменьшить общий размер JavaScript на странице с более чем 1 МБ до примерно 200 КБ (то есть в 5 раз меньше!), в то время как обычная страница загружается менее 100 КБ. благодаря модульности, описанной выше.
3. Все асинхронно: поскольку JavaScript блокирует рендеринг, мы переместили импорт всех скриптов в нижнюю часть тега BODY. Это позволяет браузеру отобразить всю страницу до того, как будут выполнены сценарии, что позволит посетителю раньше увидеть значимый контент. Скрипты, которые обеспечивают интерактивность, будут загружаться и выполняться только после того, как они начнут взаимодействовать с этим разделом страницы. Это обеспечивает очень хорошую работу, особенно на мобильных устройствах с более низкой производительностью и часто плохим подключением к Интернету.

Рефакторинг CSS

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

Мы также внедрили анимацию только на CSS с ускорением GPU. Самым важным изменением в нашем стеке CSS стало введение относительной единицы «rem» вместо пикселей. Благодаря этому целевые страницы после клика теперь плавно масштабируются на устройствах любого размера, от смартфонов до настольных дисплеев с разрешением 4k.

Отзывчивость CSS

Мы используем «rem» в сочетании с единицей «vw», чтобы сделать целевые страницы отзывчивыми после клика. Это означает, что есть два пробела в разрешениях устройств, когда целевая страница после клика уменьшается между шириной 768 и 1200 пикселей и шириной менее 400 пикселей. Во всех остальных разрешениях основной контент остается фиксированной ширины, как и в конструкторе. Фиксированное значение ширины составляет 400 пикселей для мобильных устройств и 1200 пикселей для компьютеров.

Единицы Rem дают нам возможность плавно пересчитывать положение и размер виджета. Это также означает, что нам не нужно использовать JavaScript, чтобы это произошло.

В итоге:

• контент размером менее 400 пикселей автоматически масштабируется в соответствии с шириной экрана
• между 400px и 767px ширина содержимого фиксирована
• с 768px мобильное представление переключается на настольное представление
• контент размером от 768 до 1200 пикселей автоматически масштабируется в соответствии с шириной экрана
• выше 1200px содержимое фиксируется

Пример теста скорости Thor Render Engine™

Поскольку вы никогда не знаете, как люди просматривают вашу целевую страницу после клика (на компьютере, мобильном телефоне или планшете), важно, чтобы страница была полностью адаптивной. Решение Thor Render Engine™ полностью реагирует на все разрешения.

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

Результаты рендеринга старой страницы Instapage:

Результаты Thor Render Engine™:

Получение 56 баллов в первом тесте и увеличение его до 95 во втором тесте означает увеличение скорости загрузки страницы на 58,9%!

Сравнение скорости загрузки страниц

Обобщив все изменения в Thor Render Engine™, давайте посмотрим, как скорость загрузки страницы Instapage сравнивается с конкурентами.

Мы проверили скорость этой страницы (скриншот показан только вверху сгиба) при подключении 3G:

Вот сколько времени требуется для загрузки страницы:

• Со старой системой рендеринга страниц Instapage (верхний ряд): 10,5 секунд до начала загрузки.
• Thor Render Engine™ (средний ряд): за 5 секунд страница загружена на 98 %.
• Использование конкурента (нижний ряд): 8 секунд, чтобы начать загрузку

При соединении 4G вот результаты:

• Со старой системой рендеринга страниц Instapage: 4,5 секунды, чтобы начать загрузку
• Thor Render Engine™: полностью загружается за 3,5 секунды.
• Использование конкурента: 4,5 секунды только для начала загрузки

Наслаждайтесь более быстрой загрузкой страниц с помощью Thor Render Engine™.

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

Теперь с Thor Render Engine™ мы можем гарантировать, что ваши целевые страницы после клика будут загружаться мгновенно без каких-либо усилий с вашей стороны. Подпишитесь на демоверсию Instapage Enterprise сегодня и убедитесь в этом сами.