創(chuàng)建高性能和響應(yīng)式網(wǎng)站是 Web 開發(fā)人員的首要任務(wù)。實現(xiàn)此目的的一種方法是通過內(nèi)容優(yōu)先級，這涉及在非關(guān)鍵內(nèi)容之前加載關(guān)鍵內(nèi)容。在本文中，我們將探索先進的技術(shù)和工具，幫助 Web 開發(fā)人員使用內(nèi)容優(yōu)先級優(yōu)化他們的項目。
先進的內(nèi)容優(yōu)先級技術(shù)和工具
使用 PurgeCSS 和 Critical 提取關(guān)鍵 CSS
使用 PurgeCSS ( https://purgecss.com/?) 和 Critical (?https://github.com/addyosmani/ritic?)僅提取渲染首屏內(nèi)容所需的必要CSS規(guī)則。PurgeCSS 刪除未使用的 CSS，而 Critical 提取并內(nèi)聯(lián)關(guān)鍵 CSS，從而改進關(guān)鍵內(nèi)容的渲染。
例子
安裝 PurgeCSS 和 Critical：
npm install purgecss critical
登錄后復制
為 PurgeCSS 創(chuàng)建配置文件：
// purgecss.config.js
module.exports = {
content: ['./src/**/*.html'],
css: ['./src/css/main.css'],
output: './dist/css/',
};
登錄后復制
提取并內(nèi)聯(lián)關(guān)鍵 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 內(nèi)聯(lián)關(guān)鍵 CSS
gulp.src('src/*.html')
.pipe(critical({ base: 'dist/', inline: true, css: ['dist/css/main.min.css'] }))
.pipe(gulp.dest('dist'));
});
登錄后復制
使用 Webpack 進行代碼分割和動態(tài)導入
利用Webpack 中的代碼分割和動態(tài)導入 ( https://webpack.js.org/guides/code-splitting/ ) 將 JavaScript 分解為更小的塊。這可確保最初僅加載關(guān)鍵腳本，而在需要時加載非關(guān)鍵腳本。
例子
// webpack.config.js
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
// 動態(tài)導入的使用
async function loadNonCriticalModule() {
const nonCriticalModule = await import('./nonCriticalModule.js');
nonCriticalModule.run();
}
登錄后復制
圖像優(yōu)化和響應(yīng)式圖像
使用 ImageOptim ( https://imageoptim.com/ ) 或 Squoosh ( https://squoosh.app/ ) 等工具優(yōu)化圖像。使用srcset屬性和現(xiàn)代圖像格式（例如 WebP 或 AVIF）實現(xiàn)響應(yīng)式圖像，以提高性能。
例子
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.avif" type="image/avif"> <img src="image.jpg" alt="Sample image"> </picture>
登錄后復制
資源提示：預(yù)加載、預(yù)取和預(yù)連接
rel="preload"使用、 、rel="prefetch"和等資源提示rel="preconnect"來確定關(guān)鍵資源加載的優(yōu)先級，并預(yù)取非關(guān)鍵資源以供將來導航。
例子
<!-- 預(yù)加載關(guān)鍵資源 --> <link rel="preload" href="critical.css" as="style"> <!-- 預(yù)取非關(guān)鍵資源 --> <link rel="prefetch" href="non-critical-image.jpg" as="image"> <!-- 預(yù)連接到重要的第三方來源 --> <link rel="preconnect" href="https://fonts.gstatic.com">
登錄后復制
使用 Google Workbox 實施 Service Worker
使用 Google 的 Workbox ( https://developers.google.com/web/tools/workbox ) 設(shè)置服務(wù)工作線程來緩存關(guān)鍵資源并在后續(xù)頁面加載時立即為其提供服務(wù)，從而提高性能。
例子
// 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
登錄后復制
結(jié)論
通過利用先進的內(nèi)容優(yōu)先級技術(shù)和工具，Web 開發(fā)人員可以顯著提高其網(wǎng)站的性能和用戶體驗。首先專注于提供關(guān)鍵內(nèi)容并推遲非關(guān)鍵內(nèi)容可以讓用戶快速訪問他們需要的信息。在您的 Web 項目中實施這些先進技術(shù)將提高感知性能、降低跳出率并提高用戶參與度。
