Home > Web Front-end > HTML Tutorial > Advanced content prioritization technology for web developers

Advanced content prioritization technology for web developers

DDD
Release: 2023-11-23 11:25:23
forward
1519 people have browsed it

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
Copy after login

Create a configuration file for PurgeCSS:

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

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

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

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="image.jpg" alt="Sample image">
</picture>
Copy after login

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">
Copy after login

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: &#39;dist/&#39;,
  globPatterns: [&#39;**/*.{html,js,css,woff2}&#39;],
  swDest: &#39;dist/sw.js&#39;,
};
// 使用 Workbox CLI 生成 Service Worker
npx workbox generateSW workbox.config.js
Copy after login
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!

Related labels:
source:dzone.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template