[Из песочницы] Разработка ускоренной главной страницы BBC News25.04.2017 00:03

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

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

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


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

Что дальше?


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

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


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

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


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

image

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

image

React в браузере


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

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

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

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

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

Источник перевода

Комментарии (2)

  • 24 апреля 2017 в 21:01

    –1

    ↑

    ↓

    Мы основательно связаны «белой панелью BBC», расположенной вверху страницы. Эта панель содержит компоненты из других частей BBC: поиск, уведомления и BBC ID.

    В чём проблема заместо неё оставить пустой div который будет держать место под неё, а контент скинуть вниз? Потом в css ей выставить


     #panel{position: absolute; top: 0}

  • 24 апреля 2017 в 23:52

    0

    ↑

    ↓

    А правда, что сайт BBC America сделан на Вордпресс?

© Habrahabr.ru