面向 Web 開發人員的高階內容優先技術

建立高效能和響應式網站是 Web 開發人員的首要任務。實現此目的的一種方法是透過內容優先級，這涉及在非關鍵內容之前加載關鍵內容。在本文中，我們將探索先進的技術和工具，幫助 Web 開發人員使用內容優先順序來優化他們的專案。

先進的內容優先技術和工具

使用PurgeCSS 和Critical 提取關鍵CSS

使用PurgeCSS ( https: //purgecss.com/ ) 與Critical ( https://github.com/addyosmani/ritic )僅擷取渲染首屏內容所需的必要CSS規則。 PurgeCSS 刪除未使用的 CSS，而 Critical 提取並內聯關鍵 CSS，從而改進關鍵內容的渲染。

範例

安裝PurgeCSS 與Critical：

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();
}

映像最佳化與響應式影像

##

<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>

影像最佳化與響應式影像

使用ImageOptim ( https://imageoptim.com/ ) 或Squoosh ( https://squoosh.app/ ) 等工具來最佳化影像。使用srcset屬性和現代影像格式（例如 WebP 或 AVIF）實現響應式影像，以提高效能。

範例

<!-- 预加载关键资源 -->
<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">

資源提示：預先載入、預取與預先連線

rel="preload"使用、 、rel="prefetch"和等資源提示rel="preconnect"來決定關鍵資源載入的優先級，並預取非關鍵資源以供將來導覽。

範例

// 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

使用Google Workbox 實作Service Worker

使用Google 的Workbox ( https://developers.google.com/web/tools/workbox ) 設定服務工作執行緒來快取關鍵資源並在後續頁面載入時立即為其提供服務，從而提高效能。

範例

rrreee

###結論#########透過利用先進的內容優先技術和工具，Web 開發人員可以顯著提高其網站的效能和使用者體驗。首先專注於提供關鍵內容並推遲非關鍵內容可以讓用戶快速存取他們需要的資訊。在您的 Web 專案中實施這些先進技術將提高感知效能、降低跳出率並提高使用者參與度。 ###

以上是面向 Web 開發人員的高階內容優先技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！