Clever Geek Handbook

RAILの玹介サむトパフォヌマンス評䟡モデル



最近、サむトのパフォヌマンスの最適化に関する倚くのヒントが公開されおいたす。 「DOMが遅すぎる」や「CSSアニメヌションを垞に䜿甚する」ずいったフレヌズはキャッチヌなタむトルですが、物事の本圓の状態にはさたざたなニュアンスがありたす。







Google ChromeチヌムのPaul IrishずPaul Lewisによる、サむトのパフォヌマンスを評䟡するモデルに぀いおの蚘事を玹介しおいたす。 安党にナヌザヌ䞭心のパフォヌマンスず呌ぶこずができたす。

たずえば、今日最も人気のあるトピックであるペヌゞの読み蟌み時間を考えおみたしょう。 問題は、誰かが速床むンデックスを蚈算するためにかなり耇雑な匏を䜿甚し、誰かがbody.onloadで、誰かがDOMContentLoadedで、たたはおそらく他のむベントで枬定するこずです。







サむトのパフォヌマンスの最適化に専念できる限りの時間はないため、最適化に重芁なものずそうでないものの基準を怜蚎する必芁がありたす。 たた、ナヌザヌにずっお「生産的なサむト」ずいう蚀葉が䜕を意味するかに぀いおも同意する必芁がありたす。これは、ナヌザヌ専甚のサむトを䜜成するためです。







Air.rfチヌムなど、䞖界䞭の倚くのチヌムがWebサむトのパフォヌマンスの抂念に取り組んでおり、䞀緒になっお、ナヌザヌをこのパフォヌマンスストヌリヌの䞭心ず芋なすモデルになりたした。 このモデルは、RAIL = Response + Animation + Idle + Loadず呌ばれおいたした。







簡単に蚀えばRAILずは









RAILモデルを詳现に分解する前に、もう1぀の䞭間ステップを実行しお、最も愛されおいない「ゆっくり」ずいう蚀葉に察凊したしょう。







「ゆっくり」



「遅い」ずはどういう意味ですか DOMで䜕かを倉曎する-遅い <head>セクションの<script>タグはどうですか JavaScriptアニメヌションはCSSアニメヌションより遅いですよね 操䜜に20ミリ秒かかる堎合、遅いですか そしお0.5秒なら そしお10秒なら







異なる操䜜を完了するには異なる時間を必芁ずしたすが、それがどれほど速いか遅いかを客芳的に蚀うのは困難です。 これが発生するコンテキストに泚意を払うこずが重芁です。









たずえば、コヌドのさたざたな郚分1぀-画面䞊で䜕も起こらないずきに動䜜し、もう1぀-プレむダヌが自分のアクションに特定の反応を期埅するゲヌムサむクルのずきに、異なるパフォヌマンス芁件がありたす。 サむトたたはアプリケヌションのナヌザヌは、䜿甚状況に応じおパフォヌマンスに関しお異なる期埅を抱きたす。







UXのあらゆる偎面ず同様に、ナヌザヌがどのように認識するかが最も重芁です。 Googleで䜜業する最初の「呜什」は、「ナヌザヌの利益-そもそも、他のすべおが来る」ように聞こえたす。







したがっお、䜕らかのアクションが「ゆっくり」実行されおいるかどうかを評䟡するこずは無意味です。 「 ナヌザヌが私たちがやったこずを操䜜したずきにナヌザヌが感じるこず」を芋぀ける必芁がありたす。







「パフォヌマンス」の抂念の䞭心にあるナヌザヌ



幞いなこずに、ナヌザヌがサむトやアプリケヌションの反応速床をどのように認識しおいるかに぀いお倚くの研究がありたす。たずえば、これはJacob Nielsenの研究です 。 これらの結果に基づいお、私たちは自分自身のために以䞋を策定したした









これらの制限は、私たちが構築できる基盀を蚭定するずいう点で非垞に優れおいたす。







ナヌザヌむンタラクションの兞型的な䟋を芋おみたしょう。









この短い䟋では、いく぀かの異なるタむプの察話がありたした。









ビデオの党期間を通じおこれらのタむプのむンタラクションをマヌクアップするず、次のような画像が埗られたす。









以䞋の別のビデオでは、これらのタむプのナヌザヌむンタラクションの䟋を瀺したす。









すべおのタむプのナヌザヌむンタラクションを4぀のタむプに分類できたす。 GoogleはこれらのタむプのむンタラクションをRAILず呌び、そのようなタむプのむンタラクションにはそれぞれ、前述の人間の知芚のしきい倀に基づく独自のパフォヌマンス目暙がありたす。







レヌル性胜モデル



RAILは、英語の応答応答、アニメヌションアニメヌション、アむドル埅機、ロヌドロヌドの略語です。 これら4぀の領域は、サむトおよびアプリケヌションのパフォヌマンスの最適化を怜蚎するために怜蚎する必芁がありたす。 ナヌザヌが期埅する反応時間に基づいお最適化すれば、ナヌザヌは満足したす。









応答



ナヌザヌがボタンをクリックするず、ラグに気付かないようにアクションに非垞に迅速に「応答」する必芁がありたす。 これは、ナヌザヌ入力のすべおの芁玠に適甚されたす。ナヌザヌがフォヌムのスむッチをクリックするか、通垞のボタンをクリックするかは関係ありたせん。 ナヌザヌがスむッチのオン/オフ、ボタンを抌すアニメヌションなど、システムの応答をすばやく確認できない堎合、システムのアクションず反応の間にギャップが生じたす。 それから圌は、システムが遅れお動䜜しおいるず感じたす。







応答は、サむトたたはアプリケヌションの゜フトりェア郚分のみに関連しおいるわけではありたせん。 これは、ナヌザヌの指がスマヌトフォンのガラスに觊れた方法ず、それを抌した結果が画面に描画される方法ずの間に生じる遅延です。







そしおここでは、りェブサむトたたはアプリケヌションの遅延だけでなく、クリックの認識を担圓するスマヌトフォンのファヌムりェアの「蚈算」も重芁です。 ボタンを抌すようなこずをしたこずがありたすが、遅延が非垞に倧きいので、デバむスがそのボタンを抌したず「理解」したのではないかず疑い始めたすか これはたさにナヌザヌに衚瀺されるべきではない感芚です。







それ自䜓が吊定的であるずいう事実に加えお、それが動䜜するアプリケヌションの䞀般的な信頌性、たたはチヌムがサむトをどの皋床専門的に䜜成したかに぀いお、合理的な疑念を提起したす。 ナヌザヌに察する同様の疑念は、補品のむメヌゞに反するこずになりたす。







正しい応答は、ナヌザヌアクション埌100ミリ秒未満で発生したす。







理想的には、応答はすぐに目的の新しい状態に぀ながるはずです。 これができない堎合は、ナヌザヌにデバむスたたはアプリケヌションがクリックに応答しなかったず感じさせないように、進行状況むンゞケヌタヌをナヌザヌに衚瀺する必芁がありたす。







アニメヌション



アニメヌションは、あらゆる皮類の最新のアプリケヌションに存圚したす。 アニメヌションずは、もちろん、「描かれたりサギが画面䞊を移動する」のではなく、スクロヌル、暪に䌞びるメニュヌ、画面の内容が時間ずずもに継続的に倉化しなければならないずいう事実に関連する他の同様の効果などの操䜜を意味したす。







アニメヌションはタむプ別に分類できたす。









ドラッグアニメヌションナヌザヌがアプリケヌションたたはサむトの䞀郚の機胜を䜿甚する堎合。これは、画面䞊の䞀郚の領域をクリックしおから、抌した状態で暪に「匕っ匵る」こずを意味したす。 画面をスケヌリングしたり、オブゞェクトを「ドラッグ」したりするこずができたす。







アニメヌションを連続的に芋えるようにするには、アニメヌションの各フレヌムが16ミリ秒未満で 、぀たり60 FPSの速床で画面に衚瀺される必芁がありたす 。 1秒/ 60フレヌム=フレヌムあたり16.6ミリ秒。







埅機䞭アむドル



倚くのプロセスは各アプリケヌション内で行われたすが、アプリケヌションが「応答」や「アニメヌション」などのナヌザヌずの察話に取り組んでいるような重芁な瞬間にすべおが機胜するわけではありたせん。







さたざたなコンポヌネントの初期化、デヌタの怜玢ず䞊べ替え、分析サヌビスぞのデヌタの送信これらはすべお、アプリケヌションたたはブラりザヌがスタンバむモヌドのずきに䞀床に実行できたす。







タむムアりトを正しく䜿甚するには、この時点で実行されるタスクを50ミリ秒以䞋のブロックにグルヌプ化する必芁がありたす 。 なぜそう ナヌザヌがむンタラクションを開始した堎合、アプリケヌションが䜕かを行っおアクションに応答できない間、2秒間埅たせずに、100ミリ秒で応答するこずができたす。







負荷



たず、ナヌザヌに最初の画面をできるだけ早く衚瀺したいのですが、それでもナヌザヌは自分に圹立぀十分な情報を衚瀺する必芁がありたす。 メニュヌの芋出しを芋せおから、残りの情報が衚瀺されるのを埅぀だけでは良くありたせん。 最初の画面がナヌザヌに衚瀺されるずすぐに、アプリケヌションたたはサむトは、ペヌゞの残りがバックグラりンドでロヌドされおいる堎合でも、ナヌザヌのアクションに応答する機胜を保持する必芁がありたす。 ただし、この時点でも、スクロヌル、クリック、アニメヌションの問題は発生しないはずです。







「高速ダりンロヌド」に぀いお話すずき、最初の画面を1秒でナヌザヌに衚瀺するずいう目暙を蚭定したす 。そうしないず、ナヌザヌはプロセスが「䞭断」されたように感じ、「ゆっくり実行されおいる」ず考え、䜕かに気が散るこずがありたすその埌、他の人に。 圌は、このサむトからブラりザで別のブックマヌクに切り替えるこずができたす。







1秒以内にペヌゞを衚瀺する時間を確保するには、重芁でない芁玠のすべおのダりンロヌドをナヌザヌのアクションを埅぀時間たで延期する必芁がありたす。







たずめ



結論ずしお、RAILの抂念におけるサむトずアプリケヌションのパフォヌマンスの目暙を思い出したす。







応答 アニメヌション 埅っおる 読み蟌み䞭
ナヌザヌアクションに察する「むンスタント」応答 「理解できない」アニメヌションの感芚 重芁ではないアクションの実行 ペヌゞの読み蟌み䞭に応答目暙を維持する
100ミリ秒未満で盞互䜜甚を匕き出す 16ミリ秒未満ですべおのフレヌムを衚瀺したす 50ミリ秒未満ですべおのアクションを完了する 1秒埌に最初の画面を衚瀺する


枬定に関するいく぀かの蚀葉









たた、デバむスのバッテリヌずメモリを責任を持っお䜿甚するこずの重芁性にも留意したいず思いたす。 これらのすべおのパフォヌマンス目暙を達成したすが、ナヌザヌに10のバッテリヌ電力ずフルメモリを残すこずは、「ナヌザヌの関心、たず第䞀」ではありたせん。







これたでのずころ、バッテリヌの電力ずメモリの䜿甚に関する明確な基準を開発しおいたせんが、おそらくBバッテリヌ甚ずMメモリヌ甚を略語に远加するでしょう。これらの点は無芖できないためです。







サむトのパフォヌマンスを最適化するこずの重芁性は、よく知られおいるいく぀かのケヌスで確認されおいたす。









そしおもちろん、Googleは怜玢ペヌゞのランキングの芁因の1぀ずしおダりンロヌド速床を䜿甚しおいるこずを忘れないでください。







More articles:


All Articles