Teknologi keutamaan kandungan lanjutan untuk pembangun web

Mencipta tapak web berprestasi tinggi dan responsif adalah keutamaan utama untuk pembangun web. Satu cara untuk mencapai matlamat ini ialah melalui keutamaan kandungan, yang melibatkan pemuatan kandungan kritikal sebelum kandungan tidak kritikal. Dalam artikel ini, kami akan meneroka teknik dan alatan lanjutan untuk membantu pembangun web mengoptimumkan projek mereka menggunakan keutamaan kandungan.

Teknik dan alatan keutamaan kandungan lanjutan

Ekstrak CSS kritikal menggunakan PurgeCSS dan Critical

Gunakan PurgeCSS ( https://purgecss.com/ ) dan Kritikal ( https://githubmani/com/criticos ) mengekstrak hanya peraturan CSS yang diperlukan untuk memaparkan kandungan di bahagian atas. PurgeCSS mengalih keluar CSS yang tidak digunakan, manakala Ekstrak Kritikal dan menyelaraskan CSS kritikal, meningkatkan pemaparan kandungan kritikal.

Contoh

Pasang PurgeCSS dan Kritikal:

npm install purgecss critical

Buat fail konfigurasi untuk PurgeCSS:

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

Ekstrak dan CSS kritikal sebaris:

pek kod dan pemisahan Web

import dinamik

Leverage pemisahan kod dan import dinamik dalam Webpack ( https://webpack.js.org/guides/code-splitting/ ) untuk memecahkan JavaScript kepada bahagian yang lebih kecil. Ini memastikan bahawa hanya skrip kritikal dimuatkan pada mulanya dan skrip bukan kritikal dimuatkan apabila diperlukan.

Contoh

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

Pengoptimuman Imej dan Imej Responsif

Optimumkan imej menggunakan alatan seperti ImageOptim ( https://imageoptim.com/ ) atau Squoosh.com Laksanakan imej responsif menggunakan atribut srcset dan format imej moden seperti WebP atau AVIF untuk meningkatkan prestasi. . praambil sumber bukan kritikal untuk navigasi masa hadapan.

Contoh

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

Menggunakan Google Workbox untuk melaksanakan Service Worker

Gunakan Google's Workbox ( https://developers.google.com/web/tools/workbox ) untuk menyediakan/workbox cache kunci sumber dan berkhidmat dengan segera pada pemuatan halaman berikutnya, meningkatkan prestasi.

Contoh

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.avif" type="image/avif">
  <img src="image.jpg" alt="Sample image">
</picture>

Kesimpulan

Dengan memanfaatkan teknik dan alatan keutamaan kandungan lanjutan, pembangun web boleh meningkatkan prestasi dan pengalaman pengguna tapak web mereka dengan ketara. Memfokuskan pada menyampaikan kandungan kritikal terlebih dahulu dan menangguhkan kandungan tidak kritikal membolehkan pengguna mengakses maklumat yang mereka perlukan dengan cepat. Melaksanakan teknik lanjutan ini ke dalam projek web anda akan meningkatkan prestasi yang dilihat, mengurangkan kadar lantunan dan meningkatkan penglibatan pengguna.

Atas ialah kandungan terperinci Teknologi keutamaan kandungan lanjutan untuk pembangun web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!