• Главная
  • Контакты
Подписаться:
  • Twitter
  • Facebook
  • RSS
  • VK
  • PushAll
logo

logo

  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • За год
    • Положительные
    • Отрицательные
  • Сортировка
    • По дате (возр)
    • По дате (убыв)
    • По рейтингу (возр)
    • По рейтингу (убыв)
    • По комментам (возр)
    • По комментам (убыв)
    • По просмотрам (возр)
    • По просмотрам (убыв)
Главная
  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • Главная
  • Разработка ускоренной главной страницы BBC News

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

24.04.2017 15:31
puagardian 7 4500 Источник
ReactJS*
Веб производительность это то, что меня беспокоит как разработчика, чья работа затрагивает миллионы людей по всему миру, так и пользователя, который часто получает доступ к веб используя медленное и ненадежное соединение. Я часто и громко жаловался, что сайт 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 где это возможно, чтобы уменьшить их размер.
  • Использовать умное разделение кода чтобы иметь возможность подгружать второстепенный код по запросу.

Источник перевода
Поделиться с друзьями
-->

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


  1. ivan386
    24.04.2017 21:01
    #10189218
    -2

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

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


     #panel{position: absolute; top: 0}


  1. Analitik_Telecom
    24.04.2017 23:52
    #10189442

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


    1. defaultvoice
      25.04.2017 02:42
      #10189534
      +1

      Правда
      http://www.bbcamerica.com/wp/wp-login.php


  1. Areso
    25.04.2017 05:17
    #10189548
    -1

    1200 ms — жуткий стыд. Причем это явно не PIV тестировали. И таких вот порталов — овердофига.


    1. dimka11
      25.04.2017 18:32
      #10190834

      Возможно, просто устройство медленное.


      1. Areso
        26.04.2017 12:19
        #10191728

        А на медленном устройстве 1200 ms легко превратятся в 12000ms.
        К примеру, у меня есть одноплатный микрокомпьютер Raspberry Pi, и с него пользоваться интернетом — настоящая боль, даже по проводному подключению. Но для истинных ценителей с Raspberry Pi надо выходить в интернет при помощи лимитированного EDGE/3G соединения, ну, чтобы понять, каково это.
        Я понимаю, что у большинства высокооплачиваемых разработчиков установлено современное и производительное оборудование (потому что их работа стоит приличных денег), но мерить надо производительность не рабочими станциями программистов, а вычислительными мощностями, которые укладываются как минимум в 95% разброс. Иначе — потеря в конверсии и всё такое.


  1. ACPrikh
    27.04.2017 09:28
    #10193366

    Они там слишком загрузили домашнюю страницу. Тут что не делай — будет тупить. Надо приготовить презентацию, что это не баг, а богатая фича BBC. И всё будет оки.

МЕТКИ

  • Хабы
  • Теги

ReactJS

перевод с английского

ReactJS

web performance optimization

СЕРВИСЫ
  • logo

    CloudLogs.ru - Облачное логирование

    • Храните логи вашего сервиса или приложения в облаке. Удобно просматривайте и анализируйте их.
Все публикации автора
  • Руководство по созданию выдающегося портфолио +10

    • 28.04.2017 20:30

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

    • 24.04.2017 15:31

Подписка


ЛУЧШЕЕ

  • Сегодня
  • Вчера
  • Позавчера
09:01

«Тупой ИИ» с нами надолго. Почему в новых моделях больше галлюцинаций +79

08:48

Как я убедил виртуальную машину, что у неё есть кулер +61

07:01

Федеративные возможности YDB: масштабируем разработку вместе со студентами +44

08:04

Я сплю на рабочем месте и вам советую +36

08:08

Регулярные выражения простыми словами. Часть 3 +35

13:01

Радость создания хобби-программ +26

07:43

Как я использую терминал +26

16:18

NoDPI4Android. Решаем проблему «деградации» YouTube теперь и на Android +19

12:00

Lisuan G100: первый игровой графический чип из Китая. Возможности новинки +19

01:54

О векторном вычислении экспоненциальной функции +18

15:01

Большое испытание тюменских кальциевых аккумуляторов: часть 1 — циклирование по ГОСТ +17

12:31

Дайджест новостей из мира науки за прошедшую неделю +17

08:15

Подводные камни у материнских плат из Поднебесной +16

13:04

POLLUX: оценка генеративных способностей моделей для русского языка +15

10:05

Как создавать контент, который ИИ будет воспринимать как источник +14

04:52

Досмотр мемов на границе США, а также ипотека под залог фарткоина +14

07:35

Продакты в Китае: как мы искали вдохновение для 2ГИС в стране, где навигация — это искусство +13

06:25

Какое мрачное(?) будущее нас ждёт по версии Илона Маска +13

10:00

Польза от «качалок» — любительского бодибилдинга +12

06:03

Как контейнеры работают в Kubernetes +11

08:46

Запускаем настоящую DeepSeek R1 671B на игровом ПК и смотрим вменяемая ли она на огромном контексте (160к) +113

18:14

Подтверждение ИТ-компетенций на ГосУслугах, стоит ли доверять? +56

08:00

SoundBlaster AWE32: как звуковая карта из 90-х получила обновление спустя 30 лет +54

12:15

Нейробиология восприятия: почему мы никогда не увидим мир «глазами» животного +51

09:01

Вычисляем коэффициент популярности крейтов Rust для работы и для хобби-проектов +43

07:57

Кромешная темнота: почему случился блэкаут 2025 года в Испании и Португалии +39

07:05

Ностальгические игры: Fallout +32

13:01

«The Legend of Zelda: Breath of the Wild» — идеальный открытый мир, но какой ценой? +30

11:41

Право на ошибку: история изобретательницы замазки +29

07:08

Анджелина Джоли была права насчёт компьютеров +21

02:54

Почему Россия не сможет переломить упадок демографии? +21

08:57

Project Vend: может ли языковая модель продавать чипсы и вольфрам? +20

15:15

MVP vs MLP: почему минимально жизнеспособного продукта уже недостаточно в 2025 году +16

10:15

Полный гид по 50 идеям, которые формируют современное мышление: от А до Я +16

15:14

Джейлбрейкаем чатботы: ChatGPT без фильтров +12

09:00

Как в СССР придумали настольную игру про фондовый рынок +10

05:10

Готовим формулы красиво (Libre Office, MS Office и LaTeX) +10

13:56

Базы данных. Как выбрать идеальное решение? Полный гид по SQL, NoSQL и не только +9

07:15

ИИ-ассистент программиста: есть ли риск для студентов? Об опыте применения ассистента в образовательном процессе +9

15:59

Caddy и 100к доменов: автоматический SSL при одностраничном конфиге +8

ОБСУЖДАЕМОЕ

  • Почему Россия не сможет переломить упадок демографии? +21

    • 811   30000

    Кромешная темнота: почему случился блэкаут 2025 года в Испании и Португалии +39

    • 168   8400

    Мы всё чаще не отличаем реального автора от AI +7

    • 145   1800

    Нейробиология восприятия: почему мы никогда не увидим мир «глазами» животного +51

    • 127   97000

    Подтверждение ИТ-компетенций на ГосУслугах, стоит ли доверять? +56

    • 117   28000

    В айти нет денег и повышений -16

    • 115   6000

    Польза от «качалок» — любительского бодибилдинга +12

    • 72   13000

    Анджелина Джоли была права насчёт компьютеров +21

    • 67   19000

    Почему тебя поймают списывающим на собеседовании (а ты об этом даже не узнаешь) +2

    • 64   9500

    Новый двигатель, способный работать на любом топливе, мог бы составить конкуренцию электромобилям +2

    • 55   7200

    Запускаем настоящую DeepSeek R1 671B на игровом ПК и смотрим вменяемая ли она на огромном контексте (160к) +115

    • 52   25000

    Я сплю на рабочем месте и вам советую +36

    • 49   19000

    Досмотр мемов на границе США, а также ипотека под залог фарткоина +14

    • 41   7600

    6 языков программирования, которые устареют к 2026 году (вы все еще ими пользуетесь?) +2

    • 40   13000

    Какое мрачное(?) будущее нас ждёт по версии Илона Маска +13

    • 38   3800
  • Главная
  • Контакты
© 2025. Все публикации принадлежат авторам.