Nikkei с более чем 140-летней издательской историей является одним из самых авторитетных медиа-предприятий в Японии. Помимо печатной газеты, их цифровые ресурсы ежемесячно посещают более 450 миллионов человек. Чтобы обеспечить лучший пользовательский опыт и ускорить свой бизнес в Интернете, Nikkei успешно запустила Progressive Web App (PWA) — https://r.nikkei.com — в ноябре 2017 года. Сейчас они видят потрясающие результаты от новой платформы. .
Прирост производительности — индекс скорости в 2 раза выше — время взаимодействия с пользователем сокращается на 14 секунд — ускорение загрузки на 75 % с помощью предварительной выборки
Влияние на бизнес – органический трафик увеличился в 2,3 раза – на 58 % больше конверсий (подписок) – на 49 % больше активных пользователей в день – 2 раза больше просмотров страниц за сеанс
Обзор бизнеса
Испытание
Nikkei отметила быстрый рост мобильного трафика на свой устаревший веб-сайт, поскольку смартфоны стали основной точкой входа в Интернет для многих пользователей. Однако, используя Lighthouse , инструмент аудита, который сканирует веб-страницу и дает рекомендации по улучшению нескольких категорий, они поняли, что их сайт не полностью оптимизирован для мобильных устройств во многих областях и очень медленно загружается.
Их веб-сайту требовалось около 20 секунд, чтобы стать постоянно интерактивным, а индекс скорости составлял в среднем 10 секунд. Зная, что 53% мобильных пользователей отказываются от взаимодействия, если загрузка занимает более 3 секунд, Nikkei хотела сократить время загрузки, чтобы обеспечить лучший опыт и ускорить свой бизнес в Интернете.
Ценность скорости неоспорима, особенно для финансовых новостей. Мы сделали скорость одним из наших основных показателей, и наши клиенты оценили это изменение.
Тайхэй Сигэмори, менеджер по цифровой стратегии
Результаты
Nikkei добился впечатляющего прироста производительности. Их оценка Lighthouse выросла с 23 до 82. Их время взаимодействия улучшилось на 14 секунд. Органический трафик, скорость, коэффициент конверсии и количество активных ежедневных пользователей также выросли.
PWA — это многостраничное приложение (MPA), которое упрощает интерфейс, созданное с использованием Vanilla JavaScript. Пять основных интерфейсных инженеров работали над достижением этой производительности в течение года.
Фронтенд-инженеры Nikkei доказали, что отличный UX обеспечивает хорошие результаты бизнеса. Мы полностью инвестируем в продолжение нашего пути по обеспечению нового уровня качества в Интернете.
Хироюки Хигаси. Менеджер по продукту, Nikkei
Решение
Nikkei создала и запустила прогрессивное веб-приложение, используя адаптивный дизайн, стандартный JavaScript и многостраничную архитектуру. Они сосредоточились на создании приятного пользовательского опыта. Добавив сервис-воркера, они смогли обеспечить предсказуемую производительность независимо от сети. Это также гарантирует, что самые популярные статьи всегда будут доступны и загружены практически сразу, поскольку они хранятся с использованием кэша. Они добавили манифест веб-приложения, и вместе со своим сервисным работником это позволяет пользователям устанавливать PWA, поэтому к нему легко получить доступ. А чтобы производительность была полностью под их контролем, они оптимизировали сторонний JavaScript.
Лучшие практики
- Улучшите скорость загрузки и интерактивность, используя современные веб-API, методы сжатия и оптимизации кода.
- Постепенно улучшайте UX, добавляя функции 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 и современным оптимизациям связывания, таким как разбиение на фрагменты на основе маршрутов и встряхивание деревьев, им удалось сократить это раздувание. Они уменьшили размер пакета JavaScript на 80%, уменьшив его до 60 КБ с помощью RollUp.
Другие лучшие практики реализованы
- Сжатие : Gzip/Brotli все сжимаемые ресурсы с использованием Fastly CDN.
- Кэширование : включить кэширование HTTP, кэширование на стороне периферии.
- Оптимизация изображения : используйте imgix для оптимизации и определения формата изображения.
- Ленивая загрузка некритических ресурсов : используйте API-интерфейс наблюдателя пересечений для загрузки фрагментов ниже сгиба.
- Разработайте стратегию загрузки веб-шрифтов : отдайте приоритет использованию системных шрифтов.
- Оптимизация первой значимой отрисовки : рендеринг стороны сервера контента.
- Принятие бюджетов производительности : сокращение времени передачи JavaScript и анализа/компиляции.
Оптимизация стороннего JavaScript
Хотя оптимизировать сторонние сценарии JavaScript не так просто по сравнению с вашими собственными сценариями, Nikkei успешно минимизировал и объединил все сценарии, связанные с рекламой, которые теперь обслуживаются из его собственной сети доставки контента (CDN). Теги, связанные с рекламой, обычно предоставляют фрагмент для запуска и загрузки других необходимых сценариев, которые часто блокируют рендеринг страницы, а также требуют дополнительного времени обработки сети для каждого из загруженных сценариев. Nikkei применил следующий подход и сократил время инициализации на 100 мс, а также уменьшил размер JS на 30 %:
- Объедините все необходимые скрипты с помощью JS-упаковщика (например, Webpack).
- Асинхронно загружайте прилагаемый скрипт, чтобы он не блокировал рендеринг страницы.
- Прикрепите рассчитанный рекламный баннер к Shadow DOM (а не iframe)
- Постепенно загружайте рекламу при прокрутке пользователем с помощью Intersection Observer API.
Постепенное улучшение сайта
В дополнение к этим базовым оптимизациям Nikkei использовала Web App Manifest и сервис-воркеров , чтобы сделать свой веб-сайт доступным для установки и даже работать в автономном режиме. Благодаря использованию стратегии кэширования в сервис-воркере все основные ресурсы и популярные статьи сохраняются в хранилище кэша и повторно используются даже в непредвиденных ситуациях, таких как нестабильная или автономная сеть, обеспечивая стабильную оптимизированную производительность.
Взломать Никкей
Традиционная ежедневная газетная компания с более чем 140-летней историей успешно ускорила цифровизацию благодаря возможностям Интернета и PWA. Интерфейсные инженеры Nikkei доказали, что отличный UX обеспечивает высокую эффективность бизнеса. Компания продолжит свой путь по выведению нового уровня качества в Интернет.