Разработка ускоренной главной страницы BBC News

Веб производительность это то, что меня беспокоит как разработчика, чья работа затрагивает миллионы людей по всему миру, так и пользователя, который часто получает доступ к веб используя медленное и ненадежное соединение. Я часто и громко жаловался, что сайт BBC News неоправданно медленный ^[1], поэтому когда мне предоставилась возможность помочь перестроить одну из самых посещаемых страниц на BBC News — я ухватился за этот шанс.

Это был апрель 2016. Сейчас, спустя год, мы готовы начать поэтапный переход на новую главную страницу. Начиная с небольшого процента пользователей из Великобритании, мы постепенно переведем всех на новую главную страницу в течении нескольких недель. Если же вам нетерпится увидеть её прежде чем переход будет завершен, она доступна по адресу www.bbc.co.uk/news/0 ^[2]

Быстрые факты о новой главной странице

• Она более легкая и быстрая, чем предыдущая:
• Сайт доступен через HTTPS и в ближайшем будущем мы планируем перенаправлять на него весь незащищенный трафик.
• Страница основана на React компонентах, которые стилизованы нашим CSS фреймворком Grandstand ^[3].
• Каждый компонент это горизонтальный «ломтик» страницы, который собирает свои данные. Это облегчает для нас использование «ломтиков» на любой странице.
• Все компоненты React рендерятся с помощью нашего React-component-as-an-API-endpoint сервиса и соединяются в страницу page-assembly-as-a-service ^[4] сервисом.
• React используется только на сервере. Мы не загружаем его на стороне браузера.
• Команда разработчиков состоит из пяти разработчиков и одного тестировщика, но мы также сотрудничаем с более чем 60 разработчиками и тестировщиками со всего BBC.

Что дальше?

Текущая версия главной страницы это задача номер один, часть первая. Мы будем существенно её менять в течении следующих нескольких месяцев. Вот некоторые идеи, что вы можете ожидать увидеть:

Улучшение производительности

Несмотря на то что мы уже существенно улучшили её производительность, все еще много работы только предстоит сделать:

• Первая значимая отрисовка все еще длинная. Мы можем улучшить её загружая основной CSS раньше.
• Мы все еще отправляем слишком много байт пользователю. Большая часть из этого — инлайн стили, которые используются только в IE8 (Обновление: Мы уже отправили pull request чтобы удалить треть этих стилей).
• Пересчет стилей и макетов идет слишком долго на маломощных устройствах. Это все еще требует изучения.
• Мы основательно связаны «белой панелью BBC», расположенной вверху страницы. Эта панель содержит компоненты из других частей BBC: поиск, уведомления и BBC ID. Все эти компоненты загружают свой блокирующий CSS и Javascript перед ресурсами главной страницы. Хотя это навряд изменится в ближайшем будущем, мы надеемся поработать с командами которые разрабатывают эти компоненты чтобы уменьшить их влияние на производительность.

Усовершенствование дизайна

Чтобы запустить главную страницу быстрее, мы пошли на многие компромисы с UX и редакторской командами по поводу дизайна страницы. После того как мы закончим с внедрением, мы будем улучшать визуальную часть блока историй (промо) чтобы выделить истории корреспондентов и избранные частицы. Текущий дизайн выглядит так:

Ниже одно из предложений как мы можем показывать другие типы промо:

React в браузере

На раннем этапе мы решили что React в браузере будет излишним для страницы на которой в основном статичные тексты и изображения. Влияние на произодительность от объединения такого количества Javascipt'а и выполнения его в браузере также непозволительно высокое. Даже используя рендеринг на стороне сервера, эмулируемые мобильные устройства тратили на выполнение скриптов и прорисовку почти в 4 раза больше времени когда React был запущен на странице.

Без React на странице

Влияние React в браузере

В нашем текущем подходе мы собираем Javascript по старинке, отдельно от компонентов React. Однако мы заметили что это не может долго масштабироваться, поэтому в конце концов нам придется найти способ использовать компоненты React в браузере, не влияя на производительность. Решения к которым мы присматриваемся включают:

• Использование Preact ^[5] вместо React.
• Конвертация наших компонентов в stateless functional components ^[6] где это возможно, чтобы уменьшить их размер.
• Использовать умное разделение кода ^[7] чтобы иметь возможность подгружать второстепенный код по запросу.

Источник перевода ^[8]

Автор: puagardian

Источник ^[9]