フロントエンドの魔法のトリックでウェブサイトを高速化しました

開発者の皆さん、こんにちは！ ?

あなたのウェブサイトが遅いとユーザーから苦情を受けたことはありますか?それとも、新しい機能が追加されるたびに、Lighthouse のパフォーマンス スコアが徐々に低下するのを恐怖の目で見たことがあるのでしょうか?信じてください、私はそこに行ったことがあります。今日は、ウェブサイトを超高速化するフロントエンドの最適化テクニックについて詳しく見ていきましょう。

なぜパフォーマンスを気にする必要があるのでしょうか?

ちょっと本題に入りましょう。 Google によると、モバイル ユーザーの 53% は、読み込みに 3 秒以上かかるサイトを放棄します。それはすごいですね！さらに、2021 年以降、Google は Core Web Vitals をランキング要素として使用しています。したがって、サイトのランクを上げてユーザーを満足させたい場合、パフォーマンスはオプションではなく、不可欠です。

1. 画像の最適化: 最初の大きな成功

多くの場合、画像は Web ページ上で最も重い資産です。プロのようにそれらを扱う方法は次のとおりです:

最新の画像形式を使用する

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

画像は必ず圧縮してください。 Sharp、ImageOptim、Squoosh などのツールを使用すると、品質を顕著に低下させることなくこれを実現できます。

遅延読み込みの実装

<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Lazy loaded image">

2. JavaScript の最適化手法

JavaScript はサイトのパフォーマンスを左右します。ここでは、実戦で実証された戦略をいくつか紹介します:

コード分​​割

1 つの巨大なバンドルを送信する代わりに、コードをより小さなチャンクに分割します。

// Before
import { heavyFeature } from './heavyFeature';

// After
const heavyFeature = () => import('./heavyFeature');

パフォーマンス バジェットを使用する

これを Webpack 構成に追加します:

module.exports = {
  performance: {
    maxAssetSize: 244000, // bytes
    maxEntrypointSize: 244000,
    hints: 'error'
  }
};

3. CSSの最適化

クリティカルCSS

重要な CSS をインライン化し、重要でないスタイルを延期します:

  <!-- Critical CSS inline -->
  <style>
    /* Your critical styles here */
  </style>

  <!-- Non-critical CSS deferred -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

未使用の CSS をパージする

PurgeCSS を使用して未使用のスタイルを削除します:

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js']
    })
  ]
};

4. 最新の読み込み技術

リソースのヒント

<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="critical-font.woff2" as="font" crossorigin>

交差点オブザーバーを使用する

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load your content
      loadContent();
    }
  });
});

observer.observe(document.querySelector('.lazy-section'));

5. パフォーマンスの監視

最適化するだけで忘れてしまうのはやめましょう!モニタリングを設定します:

1. デプロイメントパイプラインで Lighthouse CI を使用する
2. Google Search Console を通じてコア ウェブ バイタルを監視
3. web-vitals などのツールを使用してリアル ユーザー モニタリング (RUM) を設定します。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

すぐに成功するチェックリスト

• [ ] Gzip/Brotli 圧縮を有効にする
• [ ] 適切なキャッシュ ヘッダーを設定します
• [ ] HTML、CSS、JavaScript を縮小します
• [ ] Web フォントの読み込みを最適化します
• [ ] 未使用の依存関係を削除します
• [ ] フレームワークの実稼働ビルドを使用します

結論

パフォーマンスの最適化は 1 回限りのタスクではなく、継続的なプロセスであることに注意してください。画像の最適化や適切な読み込みテクニックなど、簡単に実現できることから始めて、必要に応じてより複雑な最適化に進みます。

どのようなパフォーマンス最適化手法が最も効果的でしたか?以下のコメント欄であなたの経験を共有してください!

コーディングを楽しんでください! ?

以上がフロントエンドの魔法のトリックでウェブサイトを高速化しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。