웹 개발자를 위한 고급 콘텐츠 우선순위 지정 기술

고성능 및 반응형 웹사이트를 만드는 것은 웹 개발자의 최우선 과제입니다. 이를 달성하는 한 가지 방법은 중요하지 않은 콘텐츠보다 중요한 콘텐츠를 먼저 로드하는 콘텐츠 우선 순위를 지정하는 것입니다. 이 기사에서는 웹 개발자가 콘텐츠 우선 순위를 사용하여 프로젝트를 최적화하는 데 도움이 되는 고급 기술과 도구를 살펴보겠습니다.

고급 콘텐츠 우선순위 지정 기술 및 도구

PurgeCSS 및 Critical을 사용하여 중요한 CSS 추출

PurgeCSS( https://purgecss.com/ ) 및 Critical( https://github.com/addyosmani/ critic ) 사용 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 필수 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와 같은 최신 이미지 형식을 사용하여 반응형 이미지를 구현하여 성능을 향상시킵니다.

Example

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

리소스 팁: 사전 로드, 프리페칭 및 사전 연결

rel="preload" , , 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를 사용하여 서비스 워커 구현

Google Workbox(https://developers.google.com/web/tools/workbox)를 사용하여 서비스 워커를 설정합니다. 키 리소스를 캐시하고 후속 페이지 로드 시 즉시 제공하여 성능을 향상시킵니다.

예

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

결론

웹 개발자는 고급 콘텐츠 우선 순위 지정 기술과 도구를 활용하여 웹 사이트의 성능과 사용자 경험을 크게 향상시킬 수 있습니다. 중요한 콘텐츠를 먼저 전달하고 중요하지 않은 콘텐츠를 연기하는 데 집중하면 사용자가 필요한 정보에 빠르게 액세스할 수 있습니다. 이러한 고급 기술을 웹 프로젝트에 구현하면 인지 성능이 향상되고 이탈률이 감소하며 사용자 참여가 증가합니다.

위 내용은 웹 개발자를 위한 고급 콘텐츠 우선순위 지정 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!