ホームページ >ウェブフロントエンド >htmlチュートリアル >Web 開発者向けの高度なコンテンツ優先順位付けテクノロジー
高パフォーマンスで応答性の高い Web サイトを作成することは、Web 開発者にとって最優先事項です。これを実現する 1 つの方法は、コンテンツの優先順位付けです。これには、重要でないコンテンツの前に重要なコンテンツを読み込む必要があります。この記事では、Web 開発者がコンテンツの優先順位付けを使用してプロジェクトを最適化するのに役立つ高度なテクニックとツールについて説明します。
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 でコード分割と動的インポートを使用する ( 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(); }
例
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.avif" type="image/avif"> <img src="image.jpg" alt="Sample image"> </picture>
例
##<!-- 预加载关键资源 -->
<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">
#例
##
// 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 サイトの他の関連記事を参照してください。