بررسی performance سایت در chrome developer tools

بررسی performance سایت در chrome developer tools

نخستین گام در بهینه‌سازی بارگذاری و لود (Performance)  یک وب‌سایت، یافتن مواردی است که دارای اولویت بیشتری برای انجام تغییرات می‌باشند. ابزارهای زیادی برای بررسی و افزایش میزان کارایی و بهینه‌سازی یک وب‌سایت‌ در دسترس است، اما یکی از بهترین ابزارها Chrome Developer Tools است که با استفاده از آن می‌توان بهترین نتایج را به‌ ساده‌ترین شکل ممکن کسب نمود.

امروز اکثر مرورگرها دارای امکانات مخصوص برای توسعه دهنده ها و دولوپرهای وب و به‌ خصوص دولوپرهای فرانت‌اند می‌باشند؛ این بخش از امکانات اغلب با استفاده از کلید F12 کیبورد قابل‌دسترسی می‌باشد، اما به‌ نظر می‌رسد که گوگل کروم با توجه بیشتری به نحوه ارائه امکانات و تجربه‌کاربری، با ابزار Chrome Developer Tools گزینه مناسب‌تری از دیگر مرورگرها در این زمینه باشد.

برای مشاهده گزارش کارایی و بهینه سازی (performance) یک وب‌سایت در گوگل کروم، و استفاده از کلید F12 کیبورد، پنجره‌ای در مرورگر باز می‌شود (همچنین از ترکیب کلیدهای Ctrl+Shift+I در سیستم‌عامل‌های ویندوز و گنو/لینوکس و Cmd+Opt+I در سیستم‌عامل مک نیز می‌توان به این قسمت دسترسی داشت.) 

از تب‌هایی که در این پنجره قرار دارند، گزینه Network را انتخاب کرده و همچنین قسمت Disable Cache را نیز فعال نمایید که با این‌ کار مطمئن شوید که گزارش‌های ارائه شده کاملا مشابه با تجربه‌ کاربری فردی است که برای اولین بار از وب‌سایت شما دیدن می‌کند.) سپس صفحه را مجددا لود (بارگذاری) نمایید. در این مرحله، نتایج گزارش‌ها و نمودارهای وب‌سایت به شما نشان داده خواهند شد

بررسی کارایی و بهینه سازی وبسایت با chrome developer tools

گزارش عملکرد وب‌سایت در قالب یک جدول است ارائه می‌شود و نتایج آن نشان‌دهنده اسامی منابعی هستند که برای بارگذاری کامل صفحه فراخوانی و به‌ ترتیب زمان درخواست، لیست شده‌اند.

تغییر ترتیب این نتایج با استفاده از گزینه Size می‌تواند راه‌حل مناسبی برای تشخیص اولویت در مواردی باشد که نیاز به بهینه‌سازی و اصلاح دارند چرا‌ که کسب رتبه اول جدول در این حالت نشان‌دهنده قسمتی از وب‌سایت است که بیشترین زمان مورد نیاز برای اجرای صفحه را به‌ خود اختصاص داده است و به‌ نوعی بزرگترین مانع در افزایش سرعت آن می‌باشد!

از جمله امکاناتی که گوگل کروم در این قسمت برای توسعه دهنده های خود در نظر گرفته، قابلیت فیلتر کردن نتایج بر اساس نوع آن‌ها است. برای مثال، با انتخاب گزینه Img به جای All، می‌توان تاثیر تصاویر موجود در صفحه را بر اساس عملکرد و سرعت بارگذاری صفحه مشاهده نمود.

اگر از نمایش نمودارها و آمارهای این گزارش‌ها قدری نگران شده‌اید، بهتر است ابتدا نتایج کلی را بررسی نمایید؛ در قسمت پایین صفحه به‌ صورت خلاصه مقدار سه پارامتری که برای بارگذاری کامل صفحه محاسبه شده‌اند نشان داده می‌شود و نیاز به توضیح نمی‌‌باشد که نتیجه اقدامات بهینه‌سازی وب‌سایت معادل است با کاهش این سه مقدار معرفی شده که به‌ ترتیب عبارتند از:

- تعداد کلی درخواست های ارسال شده به سمت سرور 
- حجم کلی فایل‌های دانلود شده 
- و زمان کلی بارگذاری صفحه

به‌ طور مثال، در تصویر فوق 7/93 ثانیه طول می‌کشد تا کل صفحه لود شود.

درآمدی بر ابزار Google PageSpeed برای ارزیابی سرعت وب‌سایت

Google PageSpeed را به‌ سادگی قابلیت استفاده دارد و تنها کافی است آدرس وب‌سایت خود را وارد کرده و بر روی گزینه Analyze کلیک نمایید که در نهایت نتایج بررسی در دو حالت نسخه موبایل و دسکتاپ در قالب عددی از 100 ارائه می‌شود که با بررسی آن‌ها می‌توان به بخش‌هایی از سایت که نیاز به بهینه‌سازی دارند را آشنا شد.

شما چه راهکارهای دیگری را برای بهبود عملکرد و کارایی وب‌سایت پیشنهاد می‌کنید؟

مطالب مشابه