Меня зовут Сергей Лысенко, и я Front-end разработчик в компании TemplateMonster. В этой статье расскажу о том, как мы переводили основной сайт templatemonster.com с React на Vue.js, почему приняли такое решение и каких результатов достигли. Материал будет полезен всем, кто интересуется фреймворком Vue.js, заботится о производительности своего сайта и хочет сделать взаимодействие посетителей с ним максимально легким и быстрым.
LCP в отличие от FMP (First Meaningful Paint, или первое значимое отображение) является временем, когда браузер заканчивает отрисовку самого большого визуального блока на странице. Считается, что хороший показатель — это всё, что находится во временном интервале до 2,5 секунды.
FID, в свою очередь, — промежуток времени между первым взаимодействием посетителя со страницей (это может быть переход по ссылке, взаимодействие с кнопкой и так далее) и моментом, когда браузер начинает фактическую обработку этого события. В данном случае задержка на первый ввод не должна превышать 100 миллисекунд.
CLS — показатель, измеряющий визуальную стабильность страницы. Это сумма относительных смещений всех визуальных составляющих веб-страницы на протяжении всего её жизненного цикла.
Сразу же после этого заявления в блоге Search Console вышла статья, в которой описывался процесс включения новых метрик в основной алгоритм ранжирования Google-поиска. И вот спустя 6 месяцев в очередной публикации объявляется, что с мая 2021 года эти изменения вступают в силу. Для пользователей Google-поиска это означает, что они будут получать в выдаче наиболее качественные ресурсы, а для владельцев сайтов — что при, условно говоря, одинаковой SEO-оптимизации выше в выдаче окажутся те ресурсы, у которых показатели Web Vitals лучше.
Мы с командой приняли решение подготовить наш основной сайт к грядущим изменениям заблаговременно и летом 2020 года начали работу над его новой версией. На тот момент ресурс использовал React как основную библиотеку для отрисовки вeб-страниц. И, несмотря на то, что DX (Dev Experience) был на высоком уровне, UX (User Experience) оставлял желать лучшего. Для любого маркетплейса важно, чтобы сайт был максимально адаптирован для поисковых машин (с точки зрения SEO), поэтому для первоначальной отрисовки страниц использовался подход SSR (Server-Side Rendering, или рендеринг на стороне сервера).
После загрузки всех необходимых ресурсов браузером начинался процесс так называемой регидратации (rehydration), когда фреймворк сравнивал HTML-код, который отдал в ответе сервер, с состоянием текущего посетителя и при необходимости вносил правки в разметку страницы.
React справляется с подобной задачей хорошо, но весь процесс инициализации был долгим и ресурсоёмким, особенно учитывая характер большинства типовых страниц сайта, таких как списки продуктов.
Среди других сложностей, с которыми постоянно боролись:
В ходе длительных обсуждений и размышлений мы с командой рассматривали самые разные варианты и инструменты, которые помогли бы решить все вышеперечисленные проблемы. Необходимо было выбрать новый подход, который в перспективе мог бы не только повысить качество взаимодействия посетителей с сайтом, но и обеспечить гибкость для разработчиков.
Взвесив все за и против, мы пришли к выводу, что лучшей для нас реализацией будет полноценная отрисовка всех страниц на сервере с последующим добавлением интерактивности в браузере с помощью как можно меньшего количества JavaScript-кода.
И если с сервером вопросов не возникало, ведь благодаря хорошо продуманной архитектуре и гибким возможностям кеширования он всегда быстро справлялся с отдачей браузеру нужной страницы, то с клиентской частью было немного сложнее в выборе необходимых инструментов и библиотек. Необходимо было найти решение, которое предоставляло бы гибкость и удобство для разработчиков и к тому же имело небольшой размер финального JavaScript-бандла.
Таким инструментом для нас стал Vue.js.
Источник
Для сравнения: React последней версии весит всего 7 кБ в минифицированном виде, но обязательная зависимость в виде react-dom принесет в JavaScript-бандл еще 121 кБ.
В арсенале Vue.js есть официальный роутер Vue Router, набор инструментов для разработчиков Vue CLI, а также Vue Devtools для ускорения разработки и отладки приложений.
Также были оптимизированы баннеры и попапы, которые могли отображаться на сайте в период проведения акций. В некоторых случаях удалось уменьшить их размер в несколько раз.
На графике представлены несколько типовых ключевых страниц сайта, таких как главная страница, каталог, страница продукта и так далее. Слева заметен значительный рост оценки, которую нашему сайту выставляет PageSpeed Insights. В правой части изображения представлены графики сокращения размера DOM-дерева, на котором видно, что для некоторых страниц количество DOM-элементов сократилось в два раза. Стоит отметить, что большое влияние на финальные оценки все еще оказывают оставшиеся теги из Google Tag Manager, от которых совсем не просто отказаться.
Если же учитывать размер только JavaScript-бандла, который загружался при посещении главной страницы сайта, то его удалось сократить в 11 раз (с 845 кБ до 76 кБ в сжатом виде).
До перехода на новую версию:
После перехода на новую версию:
Нам удалось достичь четырехкратного роста для показателя First Contentful Paint, а Time to Interactive сократился в три раза.
Но самой громкоговорящей в этом случае стала метрика субъективных ощущений отзывчивости и скорости, которые возникают во время навигации по сайту с использованием мобильного устройства.
Нашей команде предстоит проделать еще много работы, прежде чем можно будет с уверенностью заявить, что наш сайт отвечает всем требованиям пользователей. Уже сегодня мы видим новые узкие места и новые, порой весьма неожиданные варианты решения этих проблем. Но это уже совсем другая история
dou.ua
С чего все началось
В мае 2020 года Google Chrome Team объявили о добавлении целого ряда показателей, связанных с быстродействием, отзывчивостью и визуальной стабильностью веб-страниц. Новые метрики назвали Core Web Vitals. С их помощью разработчики сайтов могли измерять и анализировать пользовательский опыт. В основу метрик вошло три основных показателя:LCP в отличие от FMP (First Meaningful Paint, или первое значимое отображение) является временем, когда браузер заканчивает отрисовку самого большого визуального блока на странице. Считается, что хороший показатель — это всё, что находится во временном интервале до 2,5 секунды.
FID, в свою очередь, — промежуток времени между первым взаимодействием посетителя со страницей (это может быть переход по ссылке, взаимодействие с кнопкой и так далее) и моментом, когда браузер начинает фактическую обработку этого события. В данном случае задержка на первый ввод не должна превышать 100 миллисекунд.
CLS — показатель, измеряющий визуальную стабильность страницы. Это сумма относительных смещений всех визуальных составляющих веб-страницы на протяжении всего её жизненного цикла.
Сразу же после этого заявления в блоге Search Console вышла статья, в которой описывался процесс включения новых метрик в основной алгоритм ранжирования Google-поиска. И вот спустя 6 месяцев в очередной публикации объявляется, что с мая 2021 года эти изменения вступают в силу. Для пользователей Google-поиска это означает, что они будут получать в выдаче наиболее качественные ресурсы, а для владельцев сайтов — что при, условно говоря, одинаковой SEO-оптимизации выше в выдаче окажутся те ресурсы, у которых показатели Web Vitals лучше.
Мы с командой приняли решение подготовить наш основной сайт к грядущим изменениям заблаговременно и летом 2020 года начали работу над его новой версией. На тот момент ресурс использовал React как основную библиотеку для отрисовки вeб-страниц. И, несмотря на то, что DX (Dev Experience) был на высоком уровне, UX (User Experience) оставлял желать лучшего. Для любого маркетплейса важно, чтобы сайт был максимально адаптирован для поисковых машин (с точки зрения SEO), поэтому для первоначальной отрисовки страниц использовался подход SSR (Server-Side Rendering, или рендеринг на стороне сервера).
После загрузки всех необходимых ресурсов браузером начинался процесс так называемой регидратации (rehydration), когда фреймворк сравнивал HTML-код, который отдал в ответе сервер, с состоянием текущего посетителя и при необходимости вносил правки в разметку страницы.
React справляется с подобной задачей хорошо, но весь процесс инициализации был долгим и ресурсоёмким, особенно учитывая характер большинства типовых страниц сайта, таких как списки продуктов.
Среди других сложностей, с которыми постоянно боролись:
- слишком большой размер DOM-дерева из-за частого «оборачивания» компонентов в дополнительные контейнеры;
- огромный JSON-объект в HTML-ответе от сервера для обеспечения регидратации страницы;
- выделение браузером большого количества памяти на первоначальную отрисовку и дальнейшую перерисовку некоторых компонентов;
- очень высокий TTI (Time to Interactive, или время, за которое страница становится интерактивной для посетителя);
- постоянно возрастающая сложность поддержки кодовой базы и так далее.
В ходе длительных обсуждений и размышлений мы с командой рассматривали самые разные варианты и инструменты, которые помогли бы решить все вышеперечисленные проблемы. Необходимо было выбрать новый подход, который в перспективе мог бы не только повысить качество взаимодействия посетителей с сайтом, но и обеспечить гибкость для разработчиков.
Взвесив все за и против, мы пришли к выводу, что лучшей для нас реализацией будет полноценная отрисовка всех страниц на сервере с последующим добавлением интерактивности в браузере с помощью как можно меньшего количества JavaScript-кода.
И если с сервером вопросов не возникало, ведь благодаря хорошо продуманной архитектуре и гибким возможностям кеширования он всегда быстро справлялся с отдачей браузеру нужной страницы, то с клиентской частью было немного сложнее в выборе необходимых инструментов и библиотек. Необходимо было найти решение, которое предоставляло бы гибкость и удобство для разработчиков и к тому же имело небольшой размер финального JavaScript-бандла.
Таким инструментом для нас стал Vue.js.
Почему Vue.js
Решение использовать этот фреймворк не было спонтанным или основанным на личных предпочтениях кого-то из разработчиков. Стоит отметить, что на тот момент ни у кого из членов команды даже не было опыта работы с Vue.js. Но этот фреймворк располагал целым рядом преимуществ, которые были важны при выборе инструмента для будущей версии сайта:- возможность работы с существующим DOM-деревом;
- наличие директив для расширения возможностей работы с DOM-деревом;
- относительно небольшой размер;
- наличие большого количества готовых дополнительных библиотек;
- низкий порог входа для разработчиков.
Возможность работы с существующим DOM-деревом
Это одна из ключевых особенностей фреймворка и один из самых важных факторов, повлиявших на окончательный выбор. Если у вас есть уже готовая HTML-разметка, которую вернул сервер, вы можете без труда использовать ее с помощью компилятора Vue.js. В этом случае достаточно инициализировать приложение на самом верхнем DOM-элементе и фреймворк возьмет всю внутреннюю разметку в качестве основного шаблона для вашего приложения. К сожалению, используя другие популярные инструменты, это не получится сделать с той же легкостью. С помощью Vue.js можно удобно взаимодействовать с разметкой страницы и легко добавлять необходимые интерактивные компоненты или дополнительную функциональность.Директивы для расширения возможностей DOM-дерева
Пользовательские директивы заслуживают отдельного упоминания, так как именно они предоставляют удобный интерфейс для низкоуровневого взаимодействия с элементами DOM-дерева. С их помощью легко организовать прослушивание и обработку событий или же реализовать небольшие изменения DOM-дерева, которые не укладываются в парадигму отдельного компонента.Относительно небольшой размер фреймворка
Vue.js, несмотря на все свои возможности, имеет наименьший размер JavaScript-кода среди «большой тройки» (Angular, React и Vue.js). Даже старый добрый jQuery обойдется вам «дороже».
Для сравнения: React последней версии весит всего 7 кБ в минифицированном виде, но обязательная зависимость в виде react-dom принесет в JavaScript-бандл еще 121 кБ.
Дополнительные готовые библиотеки
У фреймворка их много. Если вам понадобится удобное управление состоянием приложения, у Vue.js есть для этого готовое решение в виде библиотеки Vuex. Её размер всего 12 кБ в минифицированном виде, но преимущества неоспоримы. С ее помощью легко создать централизованное хранилище всех необходимых данных и состояний приложения и получить к нему доступ из любой его части. Единое хранилище можно использовать даже для обмена данными между отдельными приложениями, которые были запущены на одной странице (через инициализацию нового экземпляра Vue.js на отдельных корневых DOM-элементах). Именно такой подход мы применили на некоторых типах страниц сайта для еще большего их облегчения. Сократили время, которое необходимо фреймворку для компиляции шаблона страницы.В арсенале Vue.js есть официальный роутер Vue Router, набор инструментов для разработчиков Vue CLI, а также Vue Devtools для ускорения разработки и отладки приложений.
Низкий порог входа для разработчиков
У Vue.js отличная документация, которая к тому же переведена на несколько языков. При этом она не только предоставляет доступ к описанию основных возможностей фреймворка и его API, но и содержит разнообразные примеры конфигураций и реализаций приложений из реальной жизни, рекомендации, ссылки на всевозможные обучающие материалы и прочее.Над чем еще работали
Стоит отметить, что сильное влияние на производительность, быстродействие сайтов и приложений оказывает количество подключенных систем аналитики и разнообразных маркетинг- и SEO-инструментов. Мы используем Google Tag Manager, и не трудно представить, насколько просто с его помощью можно добавить огромное количество тегов и потерять над ними какой-либо контроль. Поэтому во время разработки нового сайта мы пересмотрели все используемые теги и провели их глобальную зачистку и оптимизацию:- все ненужные теги удалили;
- все теги, которые синхронно подключали исполняемые файлы, перевели на асинхронную загрузку;
- отложили запуск тегов, которые не являются критически важным в первые мгновения после загрузки страницы.
Также были оптимизированы баннеры и попапы, которые могли отображаться на сайте в период проведения акций. В некоторых случаях удалось уменьшить их размер в несколько раз.
Результаты
Над новой версией сайта мы работали на протяжении трёх месяцев. Вместе с функциональностью решили немного обновить и дизайн, хотя весь контент и основные составляющие сайта остались прежними. Основными метриками, которые хотелось улучшить, были:- показатель PageSpeed Insights;
- размер DOM-дерева;
- суммарный размер загружаемой страницы и в особенности размер JavaScript-бандла;
- отзывчивость интерфейса, в частности на мобильных устройствах;
- нагрузка на сервер.
Показатель PageSpeed Insights и размер DOM-дерева
Вот таких изменений в баллах инструмента PageSpeed Insights удалось достичь сразу же после запуска новой версии сайта:
На графике представлены несколько типовых ключевых страниц сайта, таких как главная страница, каталог, страница продукта и так далее. Слева заметен значительный рост оценки, которую нашему сайту выставляет PageSpeed Insights. В правой части изображения представлены графики сокращения размера DOM-дерева, на котором видно, что для некоторых страниц количество DOM-элементов сократилось в два раза. Стоит отметить, что большое влияние на финальные оценки все еще оказывают оставшиеся теги из Google Tag Manager, от которых совсем не просто отказаться.
Суммарный размер загружаемой страницы
Размер страниц даже с учетом всех third-party скриптов также стал значительно меньше. Это ускорило загрузку сайта, что особенно заметили посетители, которые используют мобильные устройства или не очень быстрый интернет-канал.
Если же учитывать размер только JavaScript-бандла, который загружался при посещении главной страницы сайта, то его удалось сократить в 11 раз (с 845 кБ до 76 кБ в сжатом виде).
Отзывчивость интерфейса, особенно на мобильных устройствах
Мне кажется, что ничего не демонстрирует улучшение ситуации с мобильными устройствами лучше, чем два скриншота, на которых представлено состояние основных показателей скорости сайта до и после изменений.До перехода на новую версию:
После перехода на новую версию:
Нам удалось достичь четырехкратного роста для показателя First Contentful Paint, а Time to Interactive сократился в три раза.
Но самой громкоговорящей в этом случае стала метрика субъективных ощущений отзывчивости и скорости, которые возникают во время навигации по сайту с использованием мобильного устройства.
Нагрузка на сервер
Одним из приятных побочных эффектов после перехода на новую версию сайта стало уменьшение нагрузки на серверную инфраструктуру. Ниже приведен график нагрузки CPU серверного кластера:
Вывод
Мир не стоит на месте, и посетители сайтов, пользователи веб-приложений и даже поисковые машины предъявляют все более высокие требования и ожидания к качеству продуктов. Но не стоит этого бояться, ведь в результате всевозможных оптимизаций все стороны оказываются в выигрышном положении. Количество инструментов и техник, которые позволяют к этому прийти, растет с каждым годом. Не бойтесь внедрять что-то новое, не бойтесь иногда ломать старое и проводить эксперименты!Нашей команде предстоит проделать еще много работы, прежде чем можно будет с уверенностью заявить, что наш сайт отвечает всем требованиям пользователей. Уже сегодня мы видим новые узкие места и новые, порой весьма неожиданные варианты решения этих проблем. Но это уже совсем другая история
DOU
DOU – Найбільша спільнота розробників України. Все про IT: цікаві статті, інтервʼю, розслідування, дослідження ринку, свіжі новини та події. Спілкування на форумі з айтівцями на найгарячіші теми та технічні матеріали від експертів. Вакансії, рейтинг IT-компаній, відгуки співробітників, аналітика...
dou.ua