BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース 高速なWebのためのAdaptive Loading

高速なWebのためのAdaptive Loading

原文(投稿日:2020/03/19)へのリンク

Google Chromeチームは、ネットワーク速度、CPU、メモリ、その他ウェブプラットフォームシグナルに基づいて、コンポーネントの最適なバージョンをロード・レンダリングするためのAdaptive Loadingを発表した。

Network Information API待望の機能だ。Chrome for Android、Firefox for Android、Chrome、Chromiumベースのデスクトップブラウザなどでサポートが始まっている。これは現在検討中の各種Adaptive Loadingパターンの1つにすぎない。他にも、バッテリーレベル、使用可能メモリ、デバイスの能力、ハードウェアの同時実行性などがある。

こうしたアプローチをReactコンポーネントで試してみたい人のために、Adaptive LoadingプロジェクトにはReact Adaptive Loading Hooks and Utilitiesも含まれている。

Chromeのチームがこうしたコンセプトを実験するのは初めてではない。たとえば、ソフトウェアエンジニアのTheodore Vorillas氏は、2019年はじめにAdaptive Component提供のためにNetwork Information APIの実験を始めているし、ソフトウェアエンジニアのNetanel Basal氏は、2018年後半にConnection-Aware Angularコンポーネントの検討を始めていた。

それぞれ、能力に基づいてエクスペリエンス提供のオプションを調べている。たとえば、Network-Aware Adaptiveメディアローダーは、コネクション速度(slow-2g、2g、3g、4g、default)を調べて、低速なコネクションに適した解像度の画像をロードするか、4G以上で動画をロードするかを判断できる。

 let media; switch (effectiveConnectionType) { case 'slow-2g': media = <img className='responsive' src={minResImage} alt='low resolution' />; break; case '2g': media = <img className='responsive' src={mediumResImage} alt='medium resolution' />; break; case '3g': media = <img className='responsive' src={maxResImage} alt='high resolution' />; break; case '4g': media = <video className='responsive' src={video} controls />; break; default: media = <video className='responsive' src={video} controls />; break; }

 

Network Connection APIやBattery Status APIなどのパフォーマンスAPIが採用されるようになれば、パフォーマンスに適したエクスペリエンスを提供するアプリケーションがもっと作れるようになるはずだ。

2019 Chrome Developer SummitにおけるAdaptive-Loadingプロジェクトの紹介ビデオも公開されている。

Adaptive-Loadingプロジェクトはオープンソースソフトウェアであり、Apache 2ライセンスで利用可能だ。

特集コンテンツ一覧

BT