年に100 %のスコアに達するLighthouses パフォーマンス監査は、ちょうど始まりです.ほとんどの自動監査がチェックしていない側面については、さらにはるかに行くことができます.
私は私のロードとナビゲーション時間を大幅に改善するためにした7つの事はここにあります.

○○1成分及び結束

私は、コンポーネント束に私のウェブサイトを分割しました.そうすれば、必要な部分だけをロードすることができますhere's how that works ) また、非重要なJavaScriptを省略します.たった今、私のウェブサイトは以下の束を生成します.

BLOBディメンションはそれぞれのバンドルのファイルサイズに相当します.
束
サイズ
バンドル.js
8.41 KB
テキスト冒険.js
5.61 KB
記事.js
2.59 KB
回転木馬.js
2.37 KB
モーダルjs
1.52 KB
ギフィー.js
1.07 KB
埋め込む.js
1.03 KB
一番上のエントリーは、すべてのページで実行される必要があるJavaScriptを含みます.それは色スイッチ、画像怠惰なローディング、およびコンポーネントローダー自体のようなものを動かします.他のすべてのバンドルのみ必要なときにロードします.それは22.7 KBから私のJS束サイズをインデックスページの8.41 KBにカットします.
これらの個々のバンドルをできるだけ小さくしておくためには、できるだけランタイムノードモジュールをクリアします.それらのほとんどは私にとってあまりにも豊富です.私のサイトで使用しているLightboxモードはとても簡単です.私はNPMJsから完全に紹介されたものを使うことができました.しかし、私は以上の出荷を終了します10 times the code これを必要とすることなく.
Verlok's vanilla-lazyload and Quicklink 私が実際にそれらの機能のほとんどを利用するように、ここで唯一の例外はありません.(また、lazyloading画像は詳細に奇妙になることができます.
私は、コードメンテナンスのために3つの非常に役に立つツールに戻り続けます:

Bundlephobia 過剰なノードパッケージを追跡するのに優れています

未使用コードを識別するのは本当に簡単ですChrome's coverage tool .

webpack-bundle-analyzer これらの素晴らしいバンドルの可視化を行います.

画像2 :画像の最適化

イメージは、このサイトの巨大な部分を占めます.できるだけ効率的にそれらを提供することは重要です.それは右の形式、右のサイズを選択し、それらをロードする適切な時間を意味します.

△2.1形式

右の画像形式を選択するだけで右のカテゴリに画像を入れての問題です.ロゴ、図、およびラインアートのようなベクトルベースのグラフィックスは、SVGで最高の仕事、グラフィックのような写真はJPEGとアニメーションのものはGIFです.PNGsは半透過的なイメージのためによく働きます、しかし、私は本当にそれらを持っていません.

それから、Webp、ブロックの上の新しい子供.それは、従来のフォーマットよりピクセルベースのイメージをコード化するのにより効率的で、また、アルファチャンネルとアニメーションのような特徴のためにすべての箱をチェックする方法です.Webpは昨年のいくつかの非常に良いブラウザのサポートを得ているstill doesn't run everywhere (あなたを見て、サファリ).ありがたいことに、WebPがサポートされていない場合、JPEGとCoに戻る方法があります.

ソースセット

ソースセットを入力します.それがサポートされているが、それらの文脈に基づいて適切にサイズの画像ファイルを提供するならば、彼らは私に自動的にWebPを提供するだけであるのを許します.

<picture>
    <source
        type="image/webp"
        srcset="image_380x380.webp 380w,
                image_590x590.webp 590w,
                image_786x786.webp 786w,
                image_full.webp 1920w"
    >
    <source
        srcset="image_380x380.jpg 380w,
                image_590x590.jpg 590w,
                image_786x786.jpg 786w,
                image_full.jpg 1920w"
    >
    <img src="image_full.jpg" alt="A black cat playing the piano">
</picture>

これは、画面上のイメージの寸法に応じて4つの異なるサイズのファイルのいずれかをロードします.イメージが380 pxの広い容器(モバイルレイアウトのように)に表示されるならば、大きなデスクトップレイアウトが完全なHD変種を得る間、それは380 pxの広いファイルをロードするだけです.ブラウザdon't support source sets のリンクされた変異体に戻ってください<img> タグ.

あなたが望むならば、あなたもそうすることができましたsupport higher resolution images 高DPIディスプレイ用
ソースセットでは、転送されたファイルの最大の部分の1つをカットできます.これは読み込み時間に大きな影響を与え、それに応じて灯台のパフォーマンススコアで反映されます.

△2.3

怠惰な読み込みイメージは、ドキュメントロードの直後にイメージをロードすることの実行です、しかし、ちょうど彼らがviewportで見えるように.これは、多くのデータを節約(例えば、接続された接続)とページ読み込み時間を高速化します.
ブラウザがネイティブにそれを実行し始めたので、それは本当に使いやすいようになりました.ジャストスラップloading=lazy インサイド・ユア<img> そして、あなたは行くのがよいです.少なくとも、あなたがInternet Explorerを無視するならば、Safarifull stats here ). スクロール距離やデータセーバの認識など、ChromeとFirefoxの実装上の相違点がありますが、両方のブラウザが問題をうまく処理していると思います.
私の使用vanilla-lazyload . それはネイティブの怠惰なサポートをサポートしていますし、それをサポートしていないブラウザのフォールバックとしての行為.もっと重要なのが-私はすでにJavaScriptのスクロールトリガとしてそれを必要とする任意の要素を使用します.

角3：フォントとアイコン

フォントファイルは巨大で、内容を表示するのに不可欠です.彼らはあなたのサイトをユーザーに提供する際に大きな役割を果たすことができます.既に専用a whole article to that subject , それで、私はちょうどここでそれをリンクします.

△4 : CDNキャッシング

CDNがクライアントサーバー接続をスピードアップする方法は、世界中の複数のデータセンターを持つことです.私のウェブサイトはドイツでホストされているので、直接私のホストに接続すれば、私は米国の誰よりもヨーロッパでのより低い潜在性を持つでしょう.CDNは自動的にクライアントに対して最も近いデータセンターに要求を送ります.そして、送付者と受取人とこのような待ち時間の間の物理的な距離を減らします.
私はCloudFlareキャッシュを私のウェブサイトにさせて、私のホストさえ襲わずに直接CDNからクライアントにそれを届けます.それは本当に速いです、私のttfbを~ 0.8 sから~ 0.1 sまで減らします.

CloudFlareが速い間、それは若干の休止時間を持つことが知られていますevery now and then . 明らかに多くの人気サービスがCloudflareによって管理され、停電がインターネットの半分を降ろすようです.第三者にあなた自身のサイトに従い前にそれを心に留めておいてください.

菅5：資産を押し出す

通常、ブラウザはそれを見ると資産をロードします.しかし、彼らはお互いに依存し、非常に長い鎖を作ることができます:

プリローディングを使用すると、どのような資産が必要になるドキュメントのブラウザの権利を伝えることができます.このツールを使用すると、滝の図と速度の物事の形状を最適化することができます:

このテクニックの最終的な形はあなたの資産を押すことです.あなたはまだ資産が必要とされるものをブラウザに伝えることができます、しかし、ドキュメントが解析される前にさえ、あなたはそうします.資産プッシュは、最初の要求を右に来る.これは、要求されたチェーンがゼロになったときにどのように見えますか

プッシュすることは非常に巧みに実装することができます.サーバープッシュは常にサーバー側(DUH!)を開始します.ファイルがブラウザで既にキャッシュされているかどうかは気にしない.私はそれを回避するには、プッシュを使用してクッキーを設定することによって回避し、これ以上の再読み込みと次のページをプッシュします.私は静的サイトジェネレータを使用して、唯一のHTMLファイルを提供するので、私はそのロジックを私の中に入れて.htaccess :

# only do that with HTML files
<filesMatch "\.([hH][tT][mM][lL]?)">
    # don't push if cookie is set
    SetEnvIf Cookie "h2push=1" h2push
    # do the push!
    Header set Link "</fonts/share-v10-latin-700.woff2>;rel=preload;as=font;crossorigin,</css/styles.css>;rel=preload;as=style,</js/bundle.js>;rel=preload;as=script"
    # set cookie to prevent next pushes
    Header add Set-Cookie "h2push=1; Path=/; Secure; HttpOnly" env=!h2push
</filesMatch>

15.6 : URLプリロード

私は現在のページをできるだけ速くロードするので、将来のナビゲーションをスピードアップする時間です.すべてが現在のドキュメントのためにロードされるとき、なぜそれでそれを残しますか?ユーザーが次に訪れたいページをプリロードしましょう.いくつかのライブラリがあります.quicklink , Instant.page and Flying Pages . QuickLink私のニーズだけで罰金に合うので、それが行く私の方法です.
それらのすべてを動作させる原理は単純ですが賢いです:ViewPortの中でどんなリンクが利用可能であるかを見つけて、それらをロードしてください.それらは無視リストのようなオプションを提供します、あるいは、遅い接続とデータセーバーモードのチェックはユーザーが最も必要としないか、または必要としないURLをロードするのを防ぎます.
一旦次のURLがプリロードされるならば、それが必要とするすべてがすでにキャッシュされるので、文書はナビゲーション要素の後、ほぼ即座に塗られることができます.私は私のドキュメントのサイズを小さくしようとするので、戦略は結果として遅い3 G接続でも驚くほどsnappy経験になります.

菅7：性能予算

エーperformance budget は、特定のしきい値の下にあなたのウェブサイトを減速させるのを防ぐルールの自己強制セットです.その敷居はすべてのウェブサイトに、個々のページにもプロジェクト内の個々のページ(例えば、最適化された着陸ページ)です.その閾値は、重要なメトリックを評価することによって決定することができます.例は、最初のバイトへの時間のような時間ベースでありえましたTTFB ), 最初のcontentful塗料FCP ), 対話する時間TTI ), または監査スコアなどのPage Speed Insights , 灯台YSlow .
アイバリューProgressive Enhancement 多くのJavaScriptなしでも私の機能を動作させてください.それはTTIは私にとって重要ではないことを意味しますが、私はTTFB、FCPと私の灯台スコアに鋭い目を保つ.
私はそれらの値をGTmetrix . それらの値のいずれかが任意の値を超えて上昇する場合、それは私が問題を見つけて、それを修正するための時間です.それらの値は私のパフォーマンス予算です.そして、それは私が将来の配備で偶然私のウェブサイトを遅くしないことを確実とします.

ラッピング

結局、私は、高速接続で2番目の下で一貫してロードするウェブサイトを持っています.それはまだあまりにも3 G速度に絞りに悪い感じていない.ページ間のナビゲーションは、大部分のフロントエンドフレームワーク、サーバー側のレンダリング、水和などの負担なしで、シングページのアプリケーションとして、ほぼ驚くほどです.

カバー画像スロLillyCantabile )