あなたのウェブサイトをスピードアップ

目次

Web Safe Fonts

Font Display

Unicode Ranges

Preloading

Google Fonts

Images

Using Alternative Packages

Unused Dependencies

Staying Up To Date With Dependencies

Conclusion

今日は、自分のウェブサイトをスピードアップするために使ったテクニックについてお話します.私は、人々が彼らの最適化するためにどんなトリックを使っていたかについて、全く好奇心がありました
ブログ、ポートフォリオのユーザーエクスペリエンスを向上させる.そして、それが最適化に来るとき、私はひどく夢中です.だから私はさらに最適化する方法があるかどうかを見て
バンドルのサイズを削減、Googleのフォントを最適化、開発環境や生産環境のためのさまざまなバンドルを使用して、トリックカスタムフォントを利用する.
最後に、ここでは、最適化されたウェブサイトを参照してくださいhttp://ogzhanolguncu.com/ . まず最初にGTMETRIXスコアを見ましょう.

見られるように、パフォーマンスに関しては、スクイズアウトすることはあまりない.さて、これらのプロセスを段階的に分析し、このようなスコアを達成する方法を見てみましょう.

フォント

Webセーフフォント

あなたが得ることができる最善を目指している場合は、ブラウザのWebセーフフォント以外の何も使用して検討しないでください.ウェブ安全フォントによって

アリール

ヴェルダナ

ヘルベチカ

タママ

Trebuchet MS ( San serif )

タイムズ・ニュー・ローマ

ジョージア

garamond(セリフ)

新しい宅配便

ブラシスクリプトMT

これらは非常にアクセス可能なフォントはかなりすべてのブラウザのため、彼らはすでにお使いのコンピュータにインストールされています.
それで、彼らを優先させてくださいGoogle Web Fonts or Adobe Fonts .

フォント表示

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot)
      format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0020-007F, U+0100-017F;
}

font-display 累積レイアウトシフト(CLS)ともちろん、パフォーマンスのための巨大な役割を果たしている.だから、最高のoptional パフォーマンスとswap をクリックします.

Supported by all modern browsers.

Unicode範囲

指定unicode-ranges あらかじめ、必要な文字をダウンロードするだけでブラウザに指示します.我々は文字を必要としないので
もちろんアラビア語、ギリシャ語、ヘブライ語など🙂.

Supported by all modern browsers. See the list for unicodes.

プリロード

<link
  href="/fonts/Avenir-Roman.ttf"
  as="font"
  type="font/ttf"
  rel="preload"
  crossorigin="anonymous"
/>

The preload ページの読み込み後にすぐにこのフォントを必要とすることを意味するので、ブラウザのメインレンダリングの前に、最初にそれらをロードして他のものに移動します
キックス.したがって、preload ページのレンダリングをブロックしないでください.

グーグルフォント

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Googleフォントを使用するときは常にpreconnect 最初に、ブラウザは、物事をより速くするために、起源とレシーバーの間の新しい接続を開始します.
したがって、当社のウェブサイトのユーザーエクスペリエンスとスピードを向上させる.そして、font-weights もっと必要だからfont-weight ダウンロードする大きなファイルを意味するので、賢明に選択します.

イメージ

多くの画像についての話はありませんが、常に得ることができる小さな画像を目指しています.例えば、私の着陸ページのイメージは50 KB
それが得ることができる最小.

Use TinyPng to compress your images without losing quality.

代替パッケージの使用

このウェブサイトは、バンドルサイズを減少させる唯一の方法で動作しているので、使用することでしたPreact 反応のための3 KB代替.
あなたが私のようなバンドルとしてWebpackを使用しているならば、あなたはこれを実行するために手順に従うことができます.ところで、私は生産版のためにpreactを使用しています.

まず、インストールするyarn add preact

次に、次のように、Webパックバンドルを設定します.

webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }
    return config;
  },

その例とは別に、また、Googleの灯台を介してパッケージを分析し、これは現在のものの代替パッケージを提供しています.

未使用の依存

あなたの依存関係を見てくださいpackage.json , 見つけて、未使用のものを削除します.パッケージを使用しなくてもpackage.json 彼らはまだ
あなたの最終的な束の中にあるので、あなたの束をより大きくするので、それはロードを遅くします.

依存関係を最新に保つ

最新の依存関係で最新の状態にとどまることは最初に不必要に思えるかもしれません、しかし、時々、開発者は速度とサイズに関して彼らのパッケージを改善します.例えば、次に.JS 10のコアパッケージは16 %削減されました.コード分割戦略を導入した.これらはすべて追加されたので
CodeBaseへの組み込みコンポーネント.このイメージコンポーネントを導入する前に、私はイメージを使用するために外部パッケージを使用していました.私はすぐに私は次にアップグレードかつてこの1つを省略しました.JS 10 .

結論

Webセーフフォントを使用します.

Preload あなたのフォントファイル.

Googleのフォントにプリ接続します.

用途font-display: optional or font-display: swap パフォーマンスとCLSのために.

利用のみunicode-range 必要です.

含まれないfont-weight あなたはGoogleのフォントを必要としない.

画像を圧縮します.

あなたの生産バンドルのためのより小さな代替パッケージを使用してください.

未使用の依存関係を削除します.

滞在の依存関係を最新の状態に.

読書ありがとう🥳🥳🥳.