フロントエンドの魔法のトリックでウェブサイトを高速化しました-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-07 05:06:15

オリジナル

570 人が閲覧しました

I Made My Website Faster With These Frontend Magic Tricks

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

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

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

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

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

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

遅延読み込みの実装

<img src="image.jpg" 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 をインライン化し、重要でないスタイルを延期します:

<head>
  <!-- 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'">
</head>

ログイン後にコピー

未使用の 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. パフォーマンスの監視

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

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="A fallback image">
</picture>

ログイン後にコピー