レスポンシブWebサイトの設計は、モバイルデバイスのアスペクト比と画面解像度の多様性の問題に対する基本的なソリューションの1つです。 しかし同時に、多くのサイトには大きなパフォーマンスの問題があります。 時々、最も強力なスマートフォン以外では通常見ることができないという事実に至ります。 サイトのオーディエンスを拡大するように設計されたレスポンシブデザイン自体が、これに対する一種の障害になったときに、逆説的な状況が発生します。
この状況の主な理由の1つは、主にデスクトップユーザーとラップトップユーザーに焦点が当てられていることです。 デザインを作成するとき、優先順位を変更し、モバイルユーザーに焦点を合わせるだけで十分だと思われます。 しかし、これはまだ良いパフォーマンスを保証するものではありません。 段階的な劣化（グレースフル劣化）、欠落している機能を補うためのあらゆる種類のシムライブラリとポリフィルの使用という考えに夢中になっているようです。 開発を高速化し、ブラウザの互換性を確保するために、あらゆる種類のライブラリに頼りすぎています。
おそらく多くの人が尋ねるでしょう：「そして、問題は何ですか？ 私のサイトへのほとんどの訪問者は、現在のOSバージョンの通常のスマートフォンを使用しています。 私のサイトは彼らにとって問題なく機能し、分析はそれを教えてくれます。」 しかし、分析がサイトを使用できる人について正確に伝えることは非常に明白です。 また、Android 2.3のユーザーが言及されていない場合、これはユーザーがそこにいない、または無視できるという意味ではありません。 または、あなたのサイトは単に彼らに何も提供できないのですか？ 驚くことではありませんが、今日でも古いバージョンのOSを実行しているデバイスを販売しています。 そして、あまりにも新しいデバイスやOSのすべてのユーザーを破棄することはほとんどお勧めできません。
したがって、Web開発の理想的なケースと現在の目標についてお話ししたいと思います。 また、これらのまさに目標を達成するのに役立つテクニックと概念についても話します。
廃止されたモデルに焦点を当てる
これまで、年間売上のかなりの部分が従来の押しボタン式携帯電話にかかっていました。 ほとんどの購入者は、新しいモデルを追い求めることなく、数年に一度新しい電話を購入します。 それはそうかもしれないが、人口に利用可能なデバイスの特定の部分は、ウェブサーフィンに非常に適しています。 WAPデバイス、テレビなど、あらゆる種類のリーダーや、人々がサイトを閲覧できる他のデバイスを忘れないでください。
この雑多なオーディエンスの最も可能性の高いユースケースは何ですか？ デバイス上のこれらの人々は、長い記事を読んだり、ウェブ上で積極的に情報を探したりすることはほとんどありません。 しかし、キーパッドでWebアドレスを入力するか、カーソルキーを使用してページをスクロールして電話番号と会社の住所を検索するか、ダブルクリックしようとするだけで、実際の苦痛を経験できます。
このような「セミモバイル」デバイス向けに設計されたエントリーレベルとして実装するのは、Web開発者にとってどれほど難しいでしょうか。 特定のパフォーマンス制限を考慮して情報が表示されるレベルは？
段階的なパフォーマンスの改善
漸進的劣化の概念を一種の基本的なアプローチとして使用することで、他のことについて考えるのをやめるようになりました。 徐々に悪化していることに気付いたので、落ち着いて作業を検討します。 ますます多くのフレームワークとライブラリがこのアプローチに従って作業を提供するため、私たちはそれについてますます考えていません。 最後に、ポリフィルライブラリとシムライブラリは、場合によっては、パフォーマンスを徐々に低下させる必要性から完全に救いました。
言い換えれば、この機能にアクセスしやすくなればなるほど、その使用の特徴について考えることは少なくなります。 たとえば、次の3つの形式を取ることができます。
- パフォーマンスの急激な低下：一部の機能をトリックなしで使用できない場合は、実装が非常に不十分であるため、まったく使用できなくなるか、制限される可能性があります。
- 段階的な劣化：トリックなしで一部の機能を使用できない場合、満足のいくレベルで実装されます。
- パフォーマンスの大幅な改善：トリックなしで一部の機能を使用できない場合、polyfillおよびshimライブラリを使用してエミュレートされます。
すべて、問題は解決しましたか？
ええ、そうです、低価格セグメントのデバイスのパフォーマンスに注意を払わない場合。
プロセッサは弱く、メモリは少ないですが、負荷は増加するだけです。 ポリフィルを使用すると、あらゆるデバイスで最新のすべての機能の多様性が利用できるという錯覚が生まれます。 そして、このツールを制限なしで使用する誘惑があります。 その結果、最も効率の悪いデバイスが非常に重いコンピューティングタスクを処理することを余儀なくされます。 そして、ユーザーに「最高の」ユーザーエクスペリエンスを提供できると確信しています。
「段階的な低下」ではなく「段階的なパフォーマンス改善」の概念を使用するとどうなりますか？ つまり、パフォーマンス要件が最も低いバージョンのサイトから開始し、使いやすさとパフォーマンスのバランスがとれるまで追加機能をロードします。 したがって、トラフィック量と処理能力の要件は、より弱いデバイスを使用するように調整されます。
もちろん、現時点では、ほとんどのフレームワークとライブラリでサポートされていないため、同様のWebサイト開発の概念を取り入れることはできません。 そして、この問題を議論し、このアプローチを実装しようとする開発者はほとんどいません。 基本的に、この方向の実験は、微小機能の適応に限定されます。 しかし、一度他のすべての概念がこれを通過した。
彼はできますが、そうすべきですか？
別の優れたアプローチは、デバイスをアクティブ化する前に、デバイスの一部の機能を使用する可能性を事前にテストすることです。
ただし、これは両刃の剣です。 たとえば、古いバージョンのAndroidスマートフォンに最新バージョンのGoogle Chromeをインストールできます。 ただし、 CSSアニメーション 、 WebGL 、背景視差効果などを実行できます。 古いスマートフォンは、それをすべて引き出せるわけではありません。 ブラウザは落下し、デバイスは通常、ユーザーが再起動するか、落下したタスクに対処するまで、ユーザーアクションへの応答を停止します。
同様の問題は、さまざまなAndroidアプリケーションでますます頻繁に発生し始めました。 顕著なパフォーマンス低下の鮮明な例の1つは、Googleトーク/ハングアウトアプリケーションのアップグレードです。 ある時点で、ほとんどすべてのデバイスで動作する非常に軽いメッセンジャーから、古いスマートフォンにはほとんど適さない不器用なモンスターに変わりました。
繰り返しになりますが、これらの「古い」デバイスはまだ店舗で購入できます。
YouTubeアプリケーション 、モバイルTwitter、および他の多くのアプリケーションでも同様のことが起こりました 。
そのため、サイトやアプリケーションの開発を計画するときは、あらゆる種類のファッショナブルな工夫と比較して、主要な機能を使用する際の高性能の重要性を評価してください。 または、少なくともレガシーユーザー向けのクールなアプリケーション/サービス/サイト用に別個のバージョンを作成します。
ユーザーに最先端の機能をオプトアウトするオプションを残す
かなり古いデバイスでGmailを使用したことがありますか？ そのような場合、「 基本的なHTMLインターフェースのロード 」は非常に便利です。
他のすべての開発者が、タッチインターフェイスの適応性のあるアニメーション化されたウィンドウドレッシングの分野で同様の機会を提供するのはなぜですか？ 結局、私たちはできるだけ多くのユーザーを獲得したいと考えています。そして、このために、これらすべての技術で洗練されています。 結果として、潜在的な消費者は、当社の製品に関する少なくとも基本的な情報を入手できなくなります。 「段階的改善」の概念が高すぎる場合、「スーパーバージョン」が恥知らずにデバイスの速度を低下させている場合、単純なテキストバージョンをダウンロードするオプションをユーザーに提供しないのはなぜですか。
ライブラリ全体が本当に必要ですか？
パフォーマンス状況を改善するための別のプラクティス。 製品で実際に使用されているライブラリとモジュールを追跡し、それらだけを含めるのに時間がかかりすぎる場合があります。 ただし、各ページでツールのセット全体を突き出すべきではありません。
使用するライブラリの数を自動的に分析および調整するツールを使用して、サイト構造とそのコードをクリーンにすることができます。
多くのライブラリとアプリケーションは、それらを使用する前に「ペイロード」を設定する機能を提供します。 おそらく、「使用するか失うか」というアーキテクチャを構築する原則を標準化して自動化するときが来たのでしょう。 たとえば、使用されるすべての関数を追跡し、依存関係の数、または少なくとも使用の程度を減らすことができる開発者向けに、特別なバージョンのライブラリを使用します。 これは、製品のかさばりを減らし、パフォーマンス要件を減らすのに役立ちます。
「何ができますか？」
まず、一般的に古いデバイスのパフォーマンスのトピックに対処する必要があります。 さまざまなアプローチを検討し、同僚と話し合い、フォーラムで、具体的な実用的な解決策を見つけてください。
試してみてください 。 古い電話を調べてサイトをアップロードし、何でも表示できるかどうかを確認します。 ハイテクとはほど遠い親relativeを訪ね、テクノエバンジェリストの役割を試してみてください。 最新のテクノロジーの使用における遅れが、サイトおよび結果としての情報へのアクセシビリティの問題の結果であるかどうかを観察します。
Webサイトの開発を注文する場合は、少なくとも古いデバイスの最小限のサポートを依頼してください。 弱いガジェットであらゆる種類の機能を実行する必要はないことを覚えておいてください。 主なことは、ユーザーがデバイスをぶら下げずに連絡先情報をすばやく見つけられることです。 この問題の解決には、事前に考え直して、1〜2日以上かかることはありません。 そのようなウェブサイトを作成する主な理由を忘れないでください。
ライブラリ、フレームワーク、バンドル、またはその他の組み込みソフトウェアを開発している場合は、他のどのデバイスよりも弱いデバイスのパフォーマンス状況の改善に影響を与えることができます。 上記の概念のサポートを製品に統合できる場合、Web開発の開発に影響を与えることができます。
そして最後に、あなたが通常の開発者またはデザイナーである場合 、あなたの仕事の「ベストプラクティス」に自分自身を制限しないでください。 常に地平線の向こうに見えるようにしてください。 これまで誰も主張しておらず、何にも支えられておらず、文書化されていない概念の広がりは、あなたの勤勉さに依存します。 しかし、これは顧客とユーザーにのみ利益をもたらします。