معرفی و تعریف
بهینهسازی عملکرد وب، توانایی اندازهگیری، تشخیص و کاهش عواملی است که باعث کندی بارگذاری یا پاسخگویی صفحات وب میشوند. این مهارت هزینه دانلود و اجرای JavaScript، حجم تصاویر و فایلهای CSS، تعداد درخواستهای شبکه، زمان رندر و رفتار صفحه روی دستگاهها و شبکههای ضعیفتر را بررسی میکند.
هدف فقط رسیدن به یک امتیاز بالا در ابزارهای سنجش نیست. توسعهدهنده باید بفهمد کاربر چه زمانی محتوای اصلی را میبیند، چه زمانی میتواند با صفحه تعامل کند و چه چیزی هنگام پیمایش یا کلیک باعث مکث میشود. شاخصهای Core Web Vitals مجموعهای از معیارهای تجربه کاربر هستند که گوگل آنها را برای سنجش بارگذاری، تعامل و پایداری بصری توضیح میدهد. مستندات web.dev درباره Core Web Vitals
داده آزمایشگاهی، نتیجه سنجش صفحه در شرایط کنترلشده است. داده واقعی کاربران، رفتار ثبتشده از بازدیدکنندگان واقعی با دستگاه و شبکههای متفاوت را نشان میدهد. Lighthouse نیز ابزاری برای ارزیابی آزمایشگاهی کیفیت صفحه، از جمله عملکرد وب، است. مستندات رسمی Lighthouse
برای فردی که به HTML و CSS و JavaScript مسلط است و هفتهای ۸ تا ۱۰ ساعت تمرین میکند، رسیدن به سطح کاربردی معمولاً حدود ۶۰ تا ۱۰۰ ساعت زمان میخواهد. در این سطح، شما باید بتوانید یک صفحه کند را پروفایل کنید، گلوگاه را از روی شواهد تشخیص دهید، چند اصلاح کمخطر انجام دهید و نتیجه پیش و پس از تغییر را مستند کنید.
توسعهدهندگان فرانتاند بیشترین استفاده را از این مهارت دارند، اما توسعهدهندگان فولاستک، تیمهای محصول و مهندسان بکاند نیز هنگام طراحی API، ارسال فایلها و پایش تجربه کاربر با آن درگیر میشوند.
اهمیت و کاربردها
چرا این مهارت مهم است؟
کندی وبسایت به طور مستقیم تجربه کاربر را تحت تأثیر میگذارد. بهویژه در فروشگاهها، سامانههای محتوایی و محصولات وبی که کاربران با اینترنت یا گوشیهای متنوع به آنها دسترسی دارند. صفحهای که محتوای اصلی را دیر نمایش میدهد یا هنگام تعامل مکث میکند، حتی با طراحی خوب نیز تجربه رضایتبخشی ایجاد نمیکند. راهنمای «web.dev» تاکید میکند که سنجش عملکرد باید به تجربه واقعی کاربر و مسیرهای مهم استفاده از محصول متصل باشد. آموزش عملکرد وب در web.dev
در فرصتهای شغلی با عنوانهایی مانند «Front-end Developer»، توسعهدهنده فرانتاند یا توسعهدهنده فولاستک، توانایی تحلیل عملکرد میتواند برای پروژههایی با کاربران زیاد، صفحات رسانهای یا رابطهای پیچیده یک مزیت عملی باشد. میزان اهمیت آن به محصول، سطح شغلی و فناوری مورد استفاده تیم بستگی دارد. برای سطح میانی به بالا، این مهارت اهمیت بیشتری پیدا میکند، زیرا فرد باید میان سرعت، قابلیت نگهداری کد، نیازهای محصول و هزینه پیادهسازی تصمیم بگیرد.
بهینهسازی عملکرد جایگزین توسعه درست رابط کاربری نیست. ابتدا باید صفحهای درست، واکنشگرا و قابلدسترس ساخت. سپس با داده اندازهگیری شده، گلوگاه واقعی را برطرف کرد. حذف کورکورانه کتابخانهها یا کوچککردن افراطی تصاویر ممکن است کیفیت یا قابلیتهای محصول را کاهش دهد.
کاربردها
-
کاهش زمان نمایش محتوای اصلی صفحه
بررسی منابع مسدودکننده رندر، فونتها، تصاویر اصلی و پاسخ سرور برای نمایش سریعتر بخش قابلمشاهده صفحه.
-
کاهش هزینه JavaScript
تحلیل بسته کد، حذف کدهای بلااستفاده، بارگذاری تنبل بخشهای غیرضروری و کاهش کار پردازنده هنگام شروع صفحه.
-
بهینهسازی تصاویر و رسانهها
انتخاب اندازه، قالب و زمان بارگذاری مناسب برای تصویرهای محصول، بنرها، گالریها و ویدئوهای صفحه.
-
رفع کندی تعامل و پیمایش
پیدا کردن وظایف طولانی «JavaScript» و رندرهای پرهزینه که کلیک، تایپ، اسکرول یا باز شدن پنجرهها را کند میکنند.
-
بهبود صفحات فهرست و فروشگاه
کنترل حجم کارتها، تصویرهای متعدد، فیلترها و بارگذاری داده در صفحاتی که فهرست بزرگی از محتوا یا کالا دارند.
-
پایش افت عملکرد پس از انتشار
مقایسه گزارشهای پیش و پس از انتشار و بررسی دادههای واقعی کاربران برای تشخیص افت ناشی از قابلیتهای جدید.
ابزارهای مرتبط
پیشنیازها
پیش از شروع، بهتر است با موارد زیر آشنا باشید.
- مهارت توسعه وب فرانتاند Frontend Web Development
- مهارت توسعه رابط وب با HTML و CSS HTML and CSS Web Interface Development
- مهارت برنامهنویسی جاوا اسکریپت JavaScript Programming
- توانایی کار با مرورگر و ابزارهای توسعهدهنده آن
- آشنایی مقدماتی با درخواست HTTP و بارگذاری منابع در مرورگر
مسیر یادگیری بهینهسازی عملکرد وب
-
۱۲ ساعت
شاخصهای عملکرد و تجربه کاربر را تفسیر کنید
مفاهیم زمان بارگذاری، مسیر رندر بحرانی و شاخصهای Core Web Vitals را یاد بگیرید. تفاوت داده آزمایشگاهی، یعنی سنجش کنترلشده، با داده واقعی کاربران را درک کنید و بدانید هر شاخص چه بخش از تجربه کاربر را نشان میدهد. راهنمای Core Web Vitals در web.dev
-
۱۲ ساعت
گلوگاهها را با ابزارهای مرورگر پیدا کنید
با تبهای Network و Performance و Coverage در Chrome DevTools کار کنید. یک صفحه کند را ضبط کنید، آبشار درخواستها را بخوانید و مشخص کنید تأخیر از شبکه، JavaScript، رندر یا فایلهای رسانهای ناشی میشود. راهنمای تحلیل عملکرد در Chrome DevTools
-
۱۴ ساعت
بارگذاری منابع و تصاویر را بهینه کنید
اندازهگذاری تصویر، انتخاب قالب مناسب، بارگذاری تنبل و اولویتدهی به منابع مهم را تمرین کنید. اثر فونتها، فایلهای CSS و اسکریپتهای شخص ثالث را بر اولین نمایش محتوا بررسی کنید. آموزش عملکرد وب در web.dev
-
۱۶ ساعت
هزینه اجرای JavaScript و رندر را کاهش دهید
تحلیل حجم بسته کد، تقسیم کد، بارگذاری پویا و حذف وابستگیهای غیرضروری را تمرین کنید. در یک رابط تعاملی، وظایف طولانی، محاسبات تکراری و رندرهای اضافی را پیدا و اصلاح کنید. راهنمای بهینهسازی عملکرد وب در web.dev
-
۱۴ ساعت
بهبودها را با اندازهگیری معتبر تأیید کنید
پیش از تغییر، معیار پایه ثبت کنید و پس از هر تغییر همان سناریو را دوباره بسنجید. یاد بگیرید نتایج Lighthouse را همراه با بررسی دستی و شرایط شبکه و دستگاه متفاوت تفسیر کنید. مستندات رسمی Lighthouse
-
۱۲ ساعت
عملکرد را به بخشی از فرایند توسعه تبدیل کنید
برای قابلیتهای جدید بودجه عملکرد تعریف کنید و بررسی عملکرد را در بازبینی کد و فرایند انتشار وارد کنید. گزارش کوتاهی بنویسید که گلوگاه، تغییر اعمالشده، نتیجه اندازهگیری و مصالحه احتمالی را روشن کند.
زمان تقریبی یادگیری
برآورد مجموع زمان آموزش، مطالعه و تمرین تا رسیدن به سطح کاربردی؛ بسته به پیشزمینه شما میتواند کمتر یا بیشتر باشد.
پروژههای تمرینی
در ادامه، مهمترین موارد این بخش به تفکیک معرفی شدهاند.
-
بازسازی یک صفحه محصول کند
توضیح پروژه: صفحه محصول با تصاویر بزرگ، اسکریپتهای متعدد و بخشهای پیشنهادی بسازید. سپس با DevTools گلوگاهها را ثبت و دستکم سه بهبود قابلاندازهگیری اعمال کنید.
-
بهینهسازی فهرست مقاله با تصویرهای زیاد
توضیح پروژه: صفحهای شامل کارتهای مقاله و تصویرهای متعدد بسازید. اندازه تصویرها، بارگذاری تنبل و اولویت تصویرهای بالای صفحه را تنظیم و نتایج پیش و پس از تغییر را مقایسه کنید.
-
کاهش هزینه یک رابط JavaScript
توضیح پروژه: در داشبورد یا صفحه جستوجو، بخشی سنگین را با بارگذاری پویا و کاهش رندرهای غیرضروری بهینه کنید. فایل گزارش شامل پروفایل اولیه و نهایی ارائه دهید.
-
گزارش عملکرد برای یک پروژه موجود
توضیح پروژه: پروژه شخصی یا متنباز را بررسی کنید و گزارش کوتاهی از درخواستهای پرهزینه، اسکریپتهای شخص ثالث، مشکلات رندر و اولویت اصلاحها بنویسید.
پرسشهای رایج درباره بهینهسازی عملکرد وب
اگر درباره این مهارت پرسشی دارید، ممکن است پاسخ آن را در میان موارد زیر پیدا کنید.
آیا بهینهسازی عملکرد وب فقط افزایش امتیاز Lighthouse است؟
خیر. Lighthouse ابزار مفیدی برای یافتن مسئله است، اما هدف اصلی بهبود تجربه واقعی کاربر است. نتیجه آن باید با بررسی صفحه، شرایط شبکه متفاوت و در صورت دسترسی دادههای واقعی کاربران تفسیر شود.
برای یادگیری این مهارت باید React یا Next.js بدانم؟
خیر. اصول عملکرد وب به مرورگر، شبکه، HTML و CSS و JavaScript مربوطاند. React و Next.js فقط موقعیتهای رایجی هستند که در آنها باید این اصول را برای تقسیم کد، رندر و بارگذاری داده به کار ببرید.
مهمترین ابزار شروع برای بهینهسازی عملکرد وب چیست؟
Chrome DevTools نقطه شروع مناسبی است، چون درخواستهای شبکه، اجرای JavaScript و زمان رندر را در همان مرورگر نشان میدهد. ابتدا باید بتوانید گلوگاه را تشخیص دهید، نه اینکه فقط پیشنهادهای خودکار را اجرا کنید.
آیا حذف کتابخانهها همیشه عملکرد را بهتر میکند؟
نه لزوما، حذف یک وابستگی ممکن است حجم کد را کم کند، اما هزینه توسعه، خطا یا افت قابلیت نگهداری ایجاد کند. تصمیم درست به اندازه اثر واقعی آن وابستگی، مسیر استفاده کاربر و جایگزین موجود بستگی دارد.
چگونه مهارت خود را در رزومه نشان دهم؟
یک پروژه قبل و بعد از بهینهسازی ارائه کنید. مسئله، ابزار اندازهگیری، تغییرهای اعمالشده و نتیجه هر معیار را مستند کنید. توضیح دلیل انتخابها از صرف نمایش یک امتیاز بهتر ارزشمندتر است.
