با ابزار Performance در کروم سرعت سایت خود را بهینه کنید!
آیا تا به حال فکر کردهاید که چرا بعضی وبسایتها سریع لود میشوند و بعضی دیگر شما را منتظر میگذارند؟ سرعت یک سایت میتواند تجربه کاربری را حسابی بهتر کند یا خراب! خوشبختانه، ابزار Performance در Chrome DevTools به شما کمک میکند تا بفهمید سایتتان کجاها لنگ میزند و چطور میتوانید آن را سریعتر کنید. در این مقاله، به زبان ساده توضیح میدهیم که این ابزار چیست، چطور کار میکند و چگونه میتوانید از آن برای بهبود عملکرد سایتتان استفاده کنید.
ابزار Performance چیست؟
ابزار Performance در Chrome DevTools مثل یک میکروسکوپ قدرتمند برای سایت شماست. این ابزار به شما اجازه میدهد عملکرد سایتتان را ضبط و تحلیل کنید تا ببینید کجاها میتوانید سرعت و کارایی را بهبود دهید. با این ابزار میتوانید:
- عملکرد سایت را در لحظه بررسی کنید.
- مشکلات کندی را پیدا کنید.
- راهکارهایی برای بهینهسازی منابع سایت پیدا کنید.
چطور پنل Performance را باز کنیم؟
باز کردن این ابزار خیلی ساده است! دو راه دارید:
- از منوی DevTools:
- مرورگر کروم را باز کنید و به سایتی که میخواهید بررسی کنید بروید.
- با کلیک راست روی صفحه و انتخاب Inspect یا زدن کلیدهای Ctrl+Shift+I (در ویندوز/لینوکس) یا Cmd+Shift+I (در مک)، DevTools را باز کنید.
-
از تبهای بالای صفحه، Performance را انتخاب کنید.
-
از منوی دستورات:
- DevTools را باز کنید.
- کلیدهای Ctrl+Shift+P (ویندوز/لینوکس) یا Cmd+Shift+P (مک) را بزنید تا منوی دستورات باز شود.
- عبارت Performance panel را تایپ کنید، گزینه Show Performance panel را انتخاب کنید و Enter بزنید.
بررسی معیارهای مهم وب در لحظه
وقتی پنل Performance را باز میکنید، این ابزار فوراً چند معیار کلیدی (Core Web Vitals) را برای سایت شما بررسی میکند:
- Largest Contentful Paint (LCP): نشان میدهد چقدر طول میکشد تا محتوای اصلی صفحه لود شود.
- Cumulative Layout Shift (CLS): بررسی میکند که آیا المانهای صفحه در حین لود شدن جابهجا میشوند یا نه.
- Interaction to Next Paint (INP): سرعت پاسخگویی سایت به تعاملات کاربر (مثل کلیک یا تایپ) را نشان میدهد.
این معیارها به شما میگویند که تجربه کاربری سایتتان «خوب»، «نیاز به بهبود» یا «ضعیف» است. اگر با صفحه تعامل کنید (مثلاً کلیک کنید یا اسکرول کنید)، ابزار INP را هم محاسبه میکند.
برای جزئیات بیشتر، میتوانید روی تبهای Interactions و Layout shifts کلیک کنید تا جدولهایی از تعاملات و جابهجاییهای صفحه ببینید. اگر بخواهید این دادهها را پاک کنید، کافی است روی دکمه Clear کلیک کنید.
مقایسه تجربه شما با کاربران واقعی
شاید سرعت سایت روی سیستم شما خوب باشد، اما کاربران با دستگاهها و اینترنتهای مختلف چطور؟ ابزار Performance به شما امکان میدهد دادههای واقعی کاربران (از طریق Chrome UX Report) را با معیارهای محلی خودتان مقایسه کنید.
چطور دادههای واقعی را اضافه کنیم؟
- در پنل Performance، به بخش Next steps و سپس Field data بروید و روی Set up کلیک کنید.
- در پنجره بازشده، Privacy disclosure را بخوانید و روی Ok کلیک کنید.
- (اختیاری) اگر میخواهید دادههای دقیقتری بگیرید، در بخش Advanced میتوانید آدرسهای محیط توسعه (مثل localhost) و محیط واقعی (مثل example.com) را تنظیم کنید.
بعد از تنظیم، ابزار دادههای کاربران واقعی را در کنار معیارهای محلی شما نشان میدهد. این کمک میکند بفهمید تجربه کاربرانتان چقدر با چیزی که شما میبینید فرق دارد.
تنظیم محیط برای شبیهسازی تجربه کاربران
برای اینکه نتایج شما به تجربه واقعی کاربران نزدیکتر باشد، میتوانید تنظیمات محیط را تغییر دهید. مثلاً:
- در کارتهای معیارها، بخش Consider your local test conditions را باز کنید و پیشنهادات را بخوانید.
- برای شبیهسازی:
- اندازه صفحهنمایش: از Device mode در پنل Elements استفاده کنید تا رزولوشنهای رایج (مثل 720p یا 1080p) را تنظیم کنید.
- دستگاه کاربران: در بخش Field data، گزینه Desktop یا Mobile را انتخاب کنید.
- سرعت اینترنت و CPU: در بخش Environment settings، شبکه را روی Fast 4G و CPU را روی 20x slowdown تنظیم کنید. همچنین میتوانید Disable network cache را فعال کنید.
بعد از این تنظیمات، صفحه را دوباره لود کنید و معیارها را بررسی کنید. حالا نتایج شما به تجربه واقعی کاربران نزدیکتر است!
ضبط و تحلیل گزارش عملکرد
برای بررسی دقیقتر، میتوانید یک گزارش عملکرد ضبط کنید. این گزارشها مثل یک فیلم از اتفاقاتی هستند که در سایت شما میافتند.
چطور گزارش ضبط کنیم؟
- در پنل Performance، گزینههای مختلفی دارید:
- ضبط عملکرد در زمان اجرا (مثل کلیکها و اسکرولها).
- ضبط عملکرد لود صفحه (برای بررسی سرعت بارگذاری).
- گرفتن اسکرینشات در حین ضبط.
- اجبار به جمعآوری زباله (برای بررسی حافظه).
- ذخیره یا بارگذاری گزارشها.
- روی دکمه Record کلیک کنید، با صفحه تعامل کنید (مثلاً کلیک یا اسکرول) و بعد ضبط را متوقف کنید.
تنظیمات ضبط
برای اطلاعات دقیقتر، میتوانید تنظیمات ضبط را تغییر دهید:
- Disable JavaScript samples: برای کاهش بار پردازشی، نمونههای جاوااسکریپت را خاموش کنید.
- Enable advanced paint instrumentation: برای بررسی دقیقتر رندر صفحه (کندتر است).
- Enable CSS selector stats: برای تحلیل عملکرد سلکتورهای CSS (کندتر است).
- CPU/Network throttling: برای شبیهسازی سرعتهای پایینتر CPU یا شبکه.
تحلیل گزارش
بعد از ضبط، میتوانید گزارش را بررسی کنید:
- نوارهای زمانی: فعالیتهای اصلی (مثل اجرای جاوااسکریپت یا رندر) را ببینید.
- فلیم چارت: نشان میدهد کدام بخشهای کد بیشترین زمان را میگیرند.
- اسکرینشاتها: ببینید صفحه در هر لحظه چه شکلی بوده.
- حافظه: مصرف حافظه سایت را بررسی کنید.
- FPS: نرخ فریم در ثانیه را برای انیمیشنها تحلیل کنید.
ابزارهای دیگر برای بهبود عملکرد
علاوه بر پنل Performance، این ابزارهای DevTools هم به شما کمک میکنند:
- Lighthouse: برای بهینهسازی سرعت سایت.
- Memory: برای بررسی مشکلات حافظه.
- Rendering: برای پیدا کردن مشکلات رندر.
- Issues: برای یافتن و رفع خطاها.
جمعبندی
پنل Performance در Chrome DevTools مثل یک مربی حرفهای برای سایت شماست! با این ابزار میتوانید سرعت سایتتان را بررسی کنید، مشکلات را پیدا کنید و تجربهای سریعتر و بهتر برای کاربرانتان بسازید. از بررسی معیارهای زنده گرفته تا ضبط گزارشهای دقیق، این ابزار همه چیز را برای بهینهسازی سایت در اختیارتان میگذارد. پس همین حالا DevTools را باز کنید و شروع کنید به سریعتر کردن سایتتان!