lynda Developing for Web Performance

Video Introducing this tutorial


Introduction :
What is performance and why is it so important?

1. Web Performance: An Introduction :
What is web performance and optimization?
How do we measure performance?
Why does performance matter?

2. Web Performance Basics :
How browsers render content
HTTP/2 and multiplexing
Bottlenecks
Caching
The PRPL pattern

3. Creating a Performance Budget :
What is a performance budget?
Creating a realistic performance budget
Common culprits and performance hogs

4. Optimizing Images :
Images are the leading cause of the slow web
Image quality matters
The image scaling hack
Image format options
Manual image optimization
Automated image optimization
Responsive images
Lazy-loading images

5. Markup and Content :
Automated optimization of JavaScript and CSS
JavaScript bundling vs. modules
JavaScript loading: Async and defer
Lazy-loading JavaScript modules with import()
Minifying and uglifying JavaScript
Critical CSS
Deferring noncritical CSS
Component-based CSS loading

6. Web Fonts :
Web fonts can be major performance hogs
Optimizing third-party web font delivery
Optimizing self-hosted web font delivery
Variable fonts to the rescue?
Web fonts on a performance budget

7. Optimizing Delivery :
Compress data with Gzip and Brotli
Server push
Preloading vs. prefetch
Browser caching
CDNs

Conclusion :
Thank you

©2021 | All rights reserved.