• Главная
  • Контакты
Подписаться:
  • 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

Подписка


ЛУЧШЕЕ

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

Диаграмма классов (англ. Class diagram) +2

03:18

Как выжить в хаосе и стать продуктивным: тайм-менеджмент от топ-экспертов +2

13:12

Обратная разработка GID на Opel Astra H +52

09:01

Интернет на раскладушке, или Веб-сёрфинг с помощью оригинального Opera Mini +25

13:01

Единственная профессия, которую не заменит ИИ — это венчурный капиталист, — говорит Марк Андриссен, венчурный капиталист +21

12:31

Что такое энтропия +19

12:50

Летняя барахолка под Валенсией: от геймерского монитора до стенографической машинки +16

08:00

Кухонный компьютер Honeywell 1969 года: 45 кг футуризма, 4 Кб памяти и рецепты в двоичном коде +16

17:00

Взлом AI Assistant через… философию? +12

10:40

Как участие в акциях Ozon может обернуться убытками: реальный кейс продавца +11

06:36

Что будет, если заинлайнить всё +11

08:10

Не блокбастеры, не 10 из 10 но всё ещё отличные игры, про которые сейчас забыли +10

19:31

Почему не в каждом веществе есть молекулы? +9

10:22

Написание i2c контроллера для FPGA и подключение камер ov7670 и ov2640 +8

15:06

Еще один взгляд на LLM: рендеринг под другим соусом? +7

05:23

Моделирование сознания в ИИ +7

13:41

Containerlab, как альтернатива Cisco Packet Tracer / PNETLab +6

13:17

Игровая консоль «— планк'а Max», правильная “отечественная” консоль +6

20:12

Изучаем Kafka — Уровень 1 +5

17:21

Vertical Slice Architecture на примере C# — простая и удобная архитектура для небольших (и не только) пректов +5

16:07

Модуль VNC Remmina: тонкая настройка кодирования и других параметров +5

16:20

Cloud билд сервера Unreal Engine 5.5 за €0.5 +4

09:10

Русская Ардуино — опять приклеили шильдик на китайский девайс? +140

13:01

Про деревянные подшипники +63

05:03

Гонка вооружений: смертельно опасный тритон и (не)ядовитая змея +51

14:05

Апгрейд по реверс-инженерски: хакаем прошивку кнопочного телефона и пишем для него программы +46

09:01

ЭВМ и роботы на страницах советской научной фантастики. Часть 1: двадцатые и тридцатые годы +32

08:03

/e/OS 3.0: мобильная платформа для тех, кто ценит приватность +28

09:36

Как манул единорога в горы водил: запускаем PVS-Studio на российских процессорах Эльбрус +26

08:09

Одноклассовый энтерпрайз +24

16:54

От идеи до платформы: полгода разработки собственного AI радио +21

09:37

Когда Станислав Лем come true +20

14:07

Летний апдейт: что умеют новые мини-ПК на Arrow Lake, Strix Halo и RTX 50 +19

07:01

Отказаться от Postman, перейти на Bruno и жить счастливо +19

20:48

Почему (и по чему) мы испытываем ностальгию? +17

11:00

Великое возвращение в офисы… откладывается? +17

11:20

Жизнь после 30: поговорим о больных коленях +16

17:29

Technical Product Manager — кто это, а главное, зачем? +14

19:15

Мой первый AI агент: я пью чай, а Мила ищет вакансии (ожидания vs реальность) +12

14:13

100K юзеров за 3 дня — что сломалось после релиза +11

12:44

DIY проект: cистемная информация на LCD дисплее GC9A01 (часть 1) +11

07:05

Краткая история JavaScript +11

ОБСУЖДАЕМОЕ

  • Русская Ардуино — опять приклеили шильдик на китайский девайс? +140

    • 164   22000

    Великое возвращение в офисы… откладывается? +17

    • 69   17000

    Моделирование сознания в ИИ +7

    • 68   2400

    Open source Self-Hosted убийца убийц Notion. Как установить? +8

    • 66   10000

    Про деревянные подшипники +63

    • 52   11000

    Когда Станислав Лем come true +20

    • 41   2500

    Игровая консоль «— планк'а Max», правильная “отечественная” консоль +6

    • 30   1600

    О контроллере батареи ИБП (вопрос к читателям Хабра) +3

    • 28   1400

    Карьера системного администратора на заводе +9

    • 28   2200

    Мой первый AI агент: я пью чай, а Мила ищет вакансии (ожидания vs реальность) +12

    • 25   4500

    Взлом AI Assistant через… философию? +12

    • 24   2200

    100K юзеров за 3 дня — что сломалось после релиза +11

    • 21   5100

    Выгорел, месяц лгал, спасся с помощью AI: инструкция по выживанию в IT (нет) -10

    • 21   3800

    Почему типовая 1С не работает: взгляд бизнес-аналитика -3

    • 20   3700

    Technical Product Manager — кто это, а главное, зачем? +14

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