Advanced content prioritization technology for web developers

Creating high-performance and responsive websites is a top priority for web developers. One way to achieve this is through content prioritization, which involves loading critical content before non-critical content. In this article, we’ll explore advanced techniques and tools to help web developers optimize their projects using content prioritization.

Advanced content prioritization techniques and tools

Extract critical CSS using PurgeCSS and Critical

Use PurgeCSS ( https: //purgecss.com/ ) and Critical ( https://github.com/addyosmani/ritic ) extract only the necessary CSS rules required to render above-the-fold content. PurgeCSS removes unused CSS, while Critical extracts and inlines critical CSS, improving the rendering of critical content.

Example

Install PurgeCSS and Critical:

npm install purgecss critical

Create a configuration file for PurgeCSS:

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

Extract and inline critical 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'));
  });

Use Webpack for code splitting and dynamic import

Use code splitting and dynamic import in Webpack ( https://webpack.js.org/guides/code-splitting/ ) Split JavaScript into smaller chunks. This ensures that only critical scripts are loaded initially and non-critical scripts are loaded when needed.

Example

##

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

Image optimization and responsive images

Optimize images using tools like ImageOptim ( https://imageoptim.com/ ) or Squoosh ( https://squoosh.app/ ). Implement responsive images using srcset attributes and modern image formats such as WebP or AVIF to improve performance.

Example

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

Resource tips: preloading, prefetching and preconnection

rel="preload"Use, , rel="prefetch" and other resource hints rel="preconnect" to prioritize the loading of critical resources and prefetch non-critical resources for future navigation.

Example

##

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

Implementing Service Worker using Google Workbox

Improve performance by using Google's Workbox ( https://developers.google.com/web/tools/workbox ) to set up service workers to cache critical resources and serve them immediately on subsequent page loads.

Examples

##

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

Conclusion

By leveraging advanced content Prioritizing technologies and tools, web developers can significantly improve the performance and user experience of their websites. Focusing on delivering critical content first and deferring non-critical content allows users to quickly access the information they need. Implementing these advanced techniques into your web projects will improve perceived performance, reduce bounce rates, and increase user engagement.

The above is the detailed content of Advanced content prioritization technology for web developers. For more information, please follow other related articles on the PHP Chinese website!