Издательская компания Nikkei , имеющая более чем 140-летнюю историю, является одним из самых авторитетных медиа-предприятий в Японии. Помимо печатной газеты, её цифровые ресурсы ежемесячно посещают более 450 миллионов человек. Для улучшения пользовательского опыта и ускорения развития бизнеса в интернете, в ноябре 2017 года Nikkei успешно запустила прогрессивное веб-приложение (PWA) — https://r.nikkei.com . Сейчас компания наблюдает потрясающие результаты от новой платформы.
Повышение производительности: - Индекс скорости в 2 раза выше - Время до взаимодействия сокращается на 14 секунд - Загрузка с предварительной выборкой ускоряется на 75%
Влияние на бизнес: - в 2,3 раза больше органического трафика - на 58% больше конверсий (подписок) - на 49% больше ежедневных активных пользователей - в 2 раза больше просмотров страниц за сессию
Скачать PDF Пример из практики
Обзор бизнеса
Испытание
Компания Nikkei зафиксировала резкий рост мобильного трафика на своем старом веб-сайте, поскольку смартфоны стали основным средством доступа в интернет для многих пользователей. Однако, используя Lighthouse — инструмент аудита, который сканирует веб-страницу и дает рекомендации по улучшению в различных категориях, — они поняли, что их сайт не был полностью оптимизирован для мобильных устройств по многим параметрам и загружался очень медленно.
Для стабильной работы их веб-сайта требовалось около 20 секунд, а по индексу скорости — в среднем 10 секунд. Зная, что 53% пользователей мобильных устройств отказываются от использования сайта, если загрузка занимает более 3 секунд, Nikkei хотела сократить время загрузки, чтобы улучшить пользовательский опыт и ускорить развитие своего бизнеса в интернете.
Значение скорости неоспоримо, особенно для финансовых новостей. Мы сделали скорость одним из наших ключевых показателей, и наши клиенты оценили это изменение.
Тайхэй Сигэмори, менеджер по цифровой стратегии
Результаты
Компания Nikkei продемонстрировала впечатляющий рост показателей. Их рейтинг Lighthouse вырос с 23 до 82. Время до взаимодействия улучшилось на 14 секунд. Органический трафик, скорость загрузки, коэффициент конверсии и количество активных пользователей в день также выросли.
PWA — это многостраничное приложение (MPA), которое упрощает разработку фронтенда и создано на чистом JavaScript. Пять ведущих фронтенд-разработчиков работали над достижением таких результатов в течение года.
Фронтенд-инженеры Nikkei доказали, что отличный пользовательский опыт способствует повышению эффективности бизнеса. Мы полны решимости продолжать наш путь к достижению нового уровня качества в веб-разработке.
Хироюки Хигаси. Менеджер по продукту, Никкей
Решение
Компания Nikkei создала и запустила прогрессивное веб-приложение (PWA), используя адаптивный дизайн, чистый JavaScript и многостраничную архитектуру, сосредоточившись на создании удобного пользовательского интерфейса. Благодаря добавлению сервис-воркера, им удалось обеспечить предсказуемую производительность независимо от сети. Это также гарантирует постоянную доступность и практически мгновенную загрузку лучших статей, поскольку они хранятся в кэш-хранилище. Они добавили манифест веб-приложения, и вместе с сервис-воркером это позволяет пользователям устанавливать PWA, обеспечивая легкий доступ к нему. А чтобы гарантировать полную контроль над производительностью, они оптимизировали сторонний JavaScript.
Передовые методы
- Повысьте скорость загрузки и интерактивность, используя современные веб-API, сжатие данных и методы оптимизации кода.
- Постепенно улучшайте пользовательский опыт, добавляя функции PWA, такие как поддержка работы в автономном режиме и добавление на главный экран.
- Включите бюджеты, ориентированные на результат, в стратегию повышения эффективности.
Технический подробный анализ
Скорость имеет значение
Скорость важнее, чем когда-либо. Поскольку смартфоны стали основным устройством для просмотра веб-страниц для многих пользователей, Nikkei зафиксировала резкий рост мобильного трафика на своем сервисе. Но, используя Lighthouse , они поняли, что их устаревший веб-сайт не был полностью оптимизирован для мобильных устройств: индекс скорости в среднем составлял 10 секунд, начальная загрузка была очень медленной, а размер JavaScript-пакета — большим. Для Nikkei настало время перестроить свой веб-сайт и внедрить лучшие практики повышения производительности веб-сайтов. Вот результаты и ключевые оптимизации производительности в новом PWA.
Использование веб-API и передовых методов для ускорения загрузки.
Запросы на предварительную загрузку ключей
Важно расставить приоритеты при загрузке критически важных файлов . Используя HTTP/2 Server Push, они могут расставлять приоритеты для критически важных пакетов JavaScript и CSS, которые, как известно, понадобятся пользователю.
Избегайте многочисленных и дорогостоящих поездок туда и обратно в любой пункт отправления.
Веб-сайту требовалось загружать сторонние ресурсы для отслеживания, рекламы и многих других целей. Они использовали <link rel=preconnect> для предварительного разрешения DNS/TCP/SSL-соединений и согласования для этих ключевых сторонних источников.
Динамическая предварительная загрузка следующей страницы
Когда разработчики были уверены, что пользователь перейдет на определенную страницу, они не просто ждали, пока это произойдет. Nikkei динамически добавляет <link rel=prefetch> в ` <head> и предварительно загружает следующую страницу до того, как пользователь фактически щелкнет по ссылке. Это обеспечивает мгновенную навигацию по страницам.
Встроенный критический путь CSS
Сокращение количества блокирующих отрисовку CSS-стилей — один из лучших способов ускорения загрузки сайта. На сайте все критически важные CSS-стили встраиваются без каких-либо блокирующих отрисовку таблиц стилей . Эта оптимизация сократила время первой значимой отрисовки более чем на 1 секунду.
Оптимизация пакетов JavaScript
В ходе предыдущего исследования выяснилось, что JavaScript-пакеты Nikkei были слишком большими и весили более 300 КБ. Благодаря переработке кода на чистом JavaScript и современным оптимизациям сборки, таким как сегментирование на основе маршрутов и оптимизация кода с помощью tree-shaking, им удалось уменьшить этот избыток. Размер JavaScript-пакета сократился на 80%, до 60 КБ с помощью RollUp.
Внедрены и другие передовые методы.
- Сжатие : Gzip/Brotli для всех сжимаемых ресурсов с использованием CDN Fastly.
- Кэширование : Включить HTTP-кэширование, кэширование на стороне сервера.
- Оптимизация изображений : используйте imgix для оптимизации и определения формата изображений.
- Ленивая загрузка некритических ресурсов : используйте API наблюдателя пересечений для загрузки фрагментов, находящихся ниже видимой части экрана.
- Разработайте стратегию загрузки веб-шрифтов : отдавайте приоритет использованию системных шрифтов.
- Оптимизация первой значимой отрисовки : рендеринг контента на стороне сервера.
- Внедрите ограничения производительности : поддерживайте низкие показатели времени передачи и компиляции JavaScript-кода.
Оптимизация стороннего JavaScript
Хотя оптимизировать сторонние JavaScript-скрипты сложнее, чем собственные, Nikkei успешно минимизировала и объединила все скрипты, связанные с рекламой, которые теперь загружаются из собственной сети доставки контента (CDN). Обычно теги, связанные с рекламой, содержат фрагмент кода для запуска и загрузки других необходимых скриптов, что часто блокирует отрисовку страницы и требует дополнительного времени отклика сети для каждого из загружаемых скриптов. Nikkei применила следующий подход и улучшила время инициализации на 100 мс, а также уменьшила размер JS-файлов на 30%:
- Соберите все необходимые скрипты с помощью сборщика JavaScript (например, Webpack).
- Асинхронная загрузка встроенного скрипта предотвращает блокировку отрисовки страницы.
- Прикрепите рекламный баннер, созданный с помощью функции автоматического расчета, к теневому DOM (вместо iframe).
- Постепенно загружайте рекламу при прокрутке пользователем с помощью API Intersection Observer.
Постепенное улучшение веб-сайта
В дополнение к этим базовым оптимизациям, Nikkei использовал Web App Manifest и сервис-воркеры , чтобы сделать свой веб-сайт устанавливаемым и даже работающим в автономном режиме. Благодаря стратегии кэширования в сервис-воркере, все основные ресурсы и самые популярные статьи хранятся в кэш-хранилище и повторно используются даже в непредвиденных ситуациях, таких как нестабильная или отключенная сеть, обеспечивая стабильную и оптимизированную производительность.
Взломать Nikkei
Традиционная ежедневная газетная компания с более чем 140-летней историей успешно ускорила свою цифровизацию благодаря возможностям веб-технологий и PWA. Фронтенд-инженеры Nikkei доказали, что отличный UX обеспечивает высокие бизнес-показатели. Компания продолжит свой путь к повышению качества веб-сайтов.