Web 開発者向けの高度なコンテンツ優先順位付けテクノロジー

高パフォーマンスで応答性の高い Web サイトを作成することは、Web 開発者にとって最優先事項です。これを実現する 1 つの方法は、コンテンツの優先順位付けです。これには、重要でないコンテンツの前に重要なコンテンツを読み込む必要があります。この記事では、Web 開発者がコンテンツの優先順位付けを使用してプロジェクトを最適化するのに役立つ高度なテクニックとツールについて説明します。

高度なコンテンツ優先順位付け手法とツール

PurgeCSS と Critical を使用して重要な CSS を抽出する

PurgeCSS を使用する ( https:/// purgecss.com/ ) と Critical ( https://github.com/addyosmani/ritic ) は、スクロールせずに見える範囲のコンテンツをレンダリングするために必要な CSS ルールのみを抽出します。 PurgeCSS は未使用の CSS を削除し、Critical は重要な CSS を抽出してインライン化し、重要なコンテンツのレンダリングを向上させます。

例

PurgeCSS とクリティカルをインストールする:

npm install purgecss critical

PurgeCSS の構成ファイルを作成する:

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html'],
  css: ['./src/css/main.css'],
  output: './dist/css/',
};

クリティカル CSS を抽出してインライン化する：

const critical = require('critical').stream;
const purgecss = require('@fullhuman/postcss-purgecss');
const postcss = require('postcss');
// 使用 PurgeCSS 处理 CSS 文件
postcss([
  purgecss(require('./purgecss.config.js')),
])
  .process(cssContent, { from: 'src/css/main.css', to: 'dist/css/main.min.css' })
  .then((result) => {
    // 使用 Critical 内联关键 CSS
    gulp.src('src/*.html')
      .pipe(critical({ base: 'dist/', inline: true, css: ['dist/css/main.min.css'] }))
      .pipe(gulp.dest('dist'));
  });

コード分割と動的インポートに Webpack を使用する

Webpack でコード分割と動的インポートを使用する ( https ://webpack.js.org/guides/code-splitting/ ) JavaScript をより小さなチャンクに分割します。これにより、最初は重要なスクリプトのみがロードされ、必要に応じて重要でないスクリプトがロードされるようになります。

例

##

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
// 动态导入的使用
async function loadNonCriticalModule() {
  const nonCriticalModule = await import('./nonCriticalModule.js');
  nonCriticalModule.run();
}

画像の最適化とレスポンシブ画像

画像の最適化ImageOptim ( https://imageoptim.com/ ) や Squoosh ( https://squoosh.app/ ) などのツールを使用します。 srcset 属性と WebP や AVIF などの最新の画像形式を使用して応答性の高い画像を実装し、パフォーマンスを向上させます。

例

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

リソースのヒント: プリロード、プリフェッチ、および事前接続

rel="preload"Use, , rel= 「prefetch」およびその他のリソース ヒント rel="preconnect" を使用して、重要なリソースの読み込みに優先順位を付け、今後のナビゲーションのために重要ではないリソースをプリフェッチします。

例

##

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<!-- 预取非关键资源 -->
<link rel="prefetch" href="non-critical-image.jpg" as="image">
<!-- 预连接到重要的第三方来源 -->
<link rel="preconnect" href="https://fonts.gstatic.com">

Google Workbox を使用した Service Worker の実装

改善Google の Workbox ( https://developers.google.com/web/tools/workbox ) を使用して、重要なリソースをキャッシュし、後続のページ読み込み時にすぐにサービスを提供するように Service Worker を設定することで、パフォーマンスを向上させます。

#例

##

// workbox.config.js
module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{html,js,css,woff2}'],
  swDest: 'dist/sw.js',
};
// 使用 Workbox CLI 生成 Service Worker
npx workbox generateSW workbox.config.js

#結論

高度なコンテンツを活用する テクノロジーの優先順位付けおよびツールを使用すると、Web 開発者は Web サイトのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。重要なコンテンツを最初に配信することに重点を置き、重要でないコンテンツは後回しにすることで、ユーザーは必要な情報に迅速にアクセスできます。これらの高度なテクニックを Web プロジェクトに実装すると、知覚されるパフォーマンスが向上し、直帰率が減少し、ユーザー エンゲージメントが向上します。

以上がWeb 開発者向けの高度なコンテンツ優先順位付けテクノロジーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。