インスタント モバイル ウェブアプリ

クリティカル レンダリング パスは、ブラウザがページの描画を開始するために必要なすべての要素（JavaScript、HTML、CSS、画像）を指します。特にモバイル ネットワーク上でスマートフォンなど、ネットワークが制限されたデバイスを使用するユーザーには、クリティカル レンダリング パスでアセットを配信するようにする必要があります。Bryan は、Google のチームが PageSpeed Insights ウェブサイトのアセットを識別して優先順位を付けるプロセスを経て、20 秒かかっていたコンテンツを 1 秒強にすることができました。

スライド

• レンダリングをブロックする JavaScript と CSS を排除する
• 表示されるコンテンツを優先します。
• スクリプトを非同期で読み込む
• 最初のビューのサーバー側を HTML としてレンダリングし、JavaScript で拡張します。
• レンダリングをブロックする CSS は最小限に抑え、最初のビューポートの表示に必要なスタイルのみを配信します。
• レンダリング ブロック CSS にインライン化された大きなデータ URI は、レンダリング パフォーマンスに悪影響を及ぼします。画像の URL が非ブロッキングであるリソースをブロックします。