|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/boost-your-website-performance-the-practical-guide/
课程评论：没有评论
**课程总结：提升网站性能 - 开发者实用指南** 本课程专为希望提升网站加载速度和响应能力的开发者设计。讲师拥有超过20年的高科技行业软件开发经验和丰富的教学经验，将通过三个实际的网页案例，一步步指导您解决网站性能低下问题，并最终达到99%-100%的性能得分。 课程重点关注影响网页加载速度的前端文件，包括 HTML, JavaScript, CSS, 字体和图片。与许多侧重理论的课程不同，本课程聚焦于实际操作，帮助您解答以下关键问题： * **如何直接测量性能？** * **如何分析性能问题？** * **如何通过清晰的流程修复性能问题并达到100%得分？** 通过课程学习，您将成为网站性能优化专家，掌握以下核心概念和技术： * **核心 Web 指标：** LCP (最大内容绘制)、CLS (累加位移量)、TBT (首次输入延迟)。 * **性能测量工具：** 使用 PageSpeed Insights 和 Lighthouse 进行准确的性能测量。 * **性能分析工具：** 运用 WebPageTest 进行深入的网页性能分析。 * **优化流程：** 学习一套标准化的流程，系统地提升网页性能得分。 * **图片优化：** * 将图片格式转换为 WEBP。 * 使用 `sharp` 图片处理包裁剪图片。 * 利用 HTML 属性实现图片的延迟加载。 * 使用响应式图片和 `srcset` 属性根据视口智能加载图片。 * **CSS 优化：** * 使用 `purgeCSS` 减小 CSS 文件大小。 * 最小化 CSS 文件。 * **JavaScript 优化：** * 通过打包器 (bundler) 最小化 JavaScript 文件。 * 使用 Chrome 开发者工具跟踪未使用的 CSS 和 JavaScript。 * 通过 Tree Shaking 移除未使用的 JavaScript 函数。 * 利用 Chrome 开发者工具定位占用大量 CPU 的函数。 * **其他优化：** * 提升 SEO、无障碍性和最佳实践。 * 优化 Web 字体加载，使用自托管和 woff2 格式。 本课程将通过以上实操练习，帮助您彻底解决网站性能问题，实现流畅的用户体验。
You're here because you have a website with pages loading slowly and you don't know how to fix this.I am here because I can help you accomplish your mission. I have B.s.c + M.s.c in mechanical engineering. I have been making software applications for over 20 years in the Hi-Tec industry and have much teaching experience. You can trust me and my teaching methods. I have learned many technologies in the past (check my LinkedIn profile), and I know exactly what is needed to learn and how.In this course, I show you three practical examples, actually three web pages, and walk you step by step through how to improve their load time and responsiveness so that they will reach a performance score of 99-100Every website has a front-end side. The front end comprises files: HTML, JavaScript, CSS, Fonts, and Images. These files have a huge effect on how fast your web pages load and respond and this will be the focus of this course.There is a lot of theory behind web performance and most courses concentrate on theory, but not this course. This course concentrates on real life - you have a web page with bad performance and you want to improve its load time and responsiveness. When you come to handling web performance issues you need to answer all the following questions which most developers do not have answers to: - How to measure performance straightforwardly? - How to analyze performance? - How to fix the performance issues and reach a performance score of 100 using a clear procedure. All of these questions will be demonstrated and answered in this course using three web pages.To make you an expert on this issue we will learn the following concepts- Core Web Vitals, in particular: LCP, CLS, TBT- Measure performance correctly using Page Speed Insight and Lighthouse- Analyze web performance using WebPageTest- Learn a clear procedure that will lead you to improve the webpage performance score to 100 - Convert image format to WEBP format and how to crop image file using the image processing package - sharp- Lazy load images using HTML properties- Use responsive images and srcset for smart image loading per viewport- Reduce CSS file size using purgeCSS- Minimize JavaScript and CSS files using the bundler - Improve SEO, accessibility, and best practices- Track unused CSS and javascript using Chrome dev tools- Remove unused JavaScript function using Tree Shaking- Use Chrome Dev Tools to pinpoint functions that consume a lot of CPU - Optimizes load of web font using self-host and woff2 format
