登录  /  注册

面向 Web 开发人员的高级内容优先级技术

DDD
发布: 2023-11-23 11:17:37
转载
1207人浏览过

创建高性能和响应式网站是 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();
}
登录后复制

图像优化和响应式图像

使用 ImageOptim ( https://imageoptim.com/ ) 或 Squoosh ( https://squoosh.app/ ) 等工具优化图像。使用srcset属性和现代图像格式(例如 WebP 或 AVIF)实现响应式图像,以提高性能。

例子

<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 实施 Service Worker

使用 Google 的 Workbox ( https://developers.google.com/web/tools/workbox ) 设置服务工作线程来缓存关键资源并在后续页面加载时立即为其提供服务,从而提高性能。

例子

// 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
登录后复制

结论

通过利用先进的内容优先级技术和工具,Web 开发人员可以显着提高其网站的性能和用户体验。首先专注于提供关键内容并推迟非关键内容可以让用户快速访问他们需要的信息。在您的 Web 项目中实施这些先进技术将提高感知性能、降低跳出率并提高用户参与度。

以上就是面向 Web 开发人员的高级内容优先级技术的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:dzone网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号