آموزش در حال توسعه برای عملکرد وب

مقدمه Introduction

• عملکرد چیست و چرا اینقدر مهم است؟ What is performance and why is it so important?

1. عملکرد وب: یک مقدمه 1. Web Performance: An Introduction

• عملکرد و بهینه سازی وب چیست؟ What is web performance and optimization?

• چگونه عملکرد را اندازه گیری کنیم؟ How do we measure performance?

• چرا عملکرد مهم است؟ Why does performance matter?

2. مبانی عملکرد وب 2. Web Performance Basics

• نحوه ارائه محتوا توسط مرورگرها How browsers render content

• HTTP/2 و مالتی پلکس HTTP/2 and multiplexing

• گلوگاه Bottlenecks

• ذخیره سازی Caching

• الگوی PRPL The PRPL pattern

3. ایجاد بودجه عملکرد 3. Creating a Performance Budget

• بودجه عملکرد چیست؟ What is a performance budget?

• ایجاد بودجه عملکرد واقع بینانه Creating a realistic performance budget

• مجرمان مشترک و گرازهای عملکرد Common culprits and performance hogs

4. بهینه سازی تصاویر 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. علامت گذاری و محتوا 5. Markup and Content

• بهینه سازی خودکار جاوا اسکریپت و CSS Automated optimization of JavaScript and CSS

• بسته JavaScript در مقابل ماژول ها JavaScript bundling vs. modules

• بارگیری JavaScript: همگام سازی و به تعویق انداختن JavaScript loading: Async and defer

• ماژول های جاوا اسکریپت با تنبل بارگیری با وارد کردن () Lazy-loading JavaScript modules with import()

• کوچک کردن و زشت کردن JavaScript Minifying and uglifying JavaScript

• CSS انتقادی Critical CSS

• به تعویق انداختن CSS غیر انتقادی Deferring noncritical CSS

• بارگذاری CSS مبتنی بر کامپوننت Component-based CSS loading

6. فونت های وب 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. بهینه سازی تحویل 7. Optimizing Delivery

• داده ها را با Gzip و Brotli فشرده کنید Compress data with Gzip and Brotli

• فشار سرور Server push

• پیش بارگیری در مقابل پیش‌فرض Preloading vs. prefetch

• ذخیره مرورگر Browser caching

• CDN ها CDNs

نتیجه Conclusion

• متشکرم Thank you