معرفی
یک برنامه وب سریع یک برنامه وب موفق است. کار شما به عنوان یک توسعه دهنده تا زمانی که عملکرد واقعی و درک شده برنامه خود را بهینه نکنید، انجام نمی شود. نه تنها کار درستی است که باید انجام دهید تا اطمینان حاصل شود که کاربران شما یک تجربه عالی دارند، بلکه دلایل تجاری بسیار کاربردی و مهمی برای بهینه سازی وجود دارد. آمازون به ازای هر 100 میلی‌ثانیه تأخیر سایت، 1 درصد کاهش فروش را اندازه‌گیری کرد، و Google به ازای هر 0.5 ثانیه تأخیر، 20 درصد کاهش در ترافیک را اندازه‌گیری کرد ( نقل به . این اعداد واقعی هستند که پیامدهای واقعی برای کسب و کار و برنامه وب شما دارند.
سرعت وب بسیار مهم است، گوگل حتی تمام تلاش خود را برای سریعتر کردن وب اختصاص داده است. اگر به دلیل دیگری برای بهینه سازی عملکرد برنامه خود نیاز دارید، گوگل اعلام کرد سرعت صفحه به الگوریتم رتبه بندی آنها اضافه شده است .
بهترین شیوه های منتشر شده بسیاری برای بهینه سازی عملکرد برنامه وب شما وجود دارد، از جمله دو کتاب عالی ( وب سایت های با کارایی بالا و وب سایت های حتی سریعتر ). تکنیک‌های روی سرور (اجرای هدرهای کنترل حافظه پنهان) و کلاینت (ارائه ویژگی‌های عرض و ارتفاع تصویر) در یک استراتژی نهایی برای بهینه‌سازی عملکرد ترکیب می‌شوند. با بسیاری از نکات و ترفندها، گاهی اوقات دشوار است که بسنجیم چگونه همه آنها به زندگی واقعی و برنامه وب واقعی شما نگاشت می شوند.
خوشبختانه، Chrome DevTools (که در هر نمونه از کروم موجود است)، ابزاری عالی ارائه می‌کند که برنامه وب شما را بازرسی می‌کند و توصیه‌های سفارشی‌شده را برای بهبود عملکرد و کاهش تأخیر ارائه می‌دهد. این مقاله پنل حسابرسی را که از نظر وسعت شبیه به ابزار بسیار محبوب YSlow است و نحوه استفاده از آن برای افزایش سرعت وب‌سایت، کاهش تأخیر و افزایش رضایت کاربر را پوشش می‌دهد.
توجه داشته باشید، ابزار Audits Panel در حال حاضر فقط در Chrome در دسترس است، اما ما انتظار داریم که سایر مرورگرهای WebKit در نهایت آن را یکپارچه کنند.
شروع شدن
برای نشان دادن اینکه چگونه پنل حسابرسی می تواند بهبود عملکرد برنامه وب را توصیه کند، ما این ابزار را به سمت www.html5rocks.com خودمان تغییر می دهیم. ما از پنل حسابرسی برای کمک به سریعتر کردن سایت خود استفاده خواهیم کرد.
راه اندازی DevTools به آسانی استفاده از نماد Chrome (سمت راست بالای پنجره Chrome) و انتخاب Tools > Developer Tools است.
برای اطلاعات بیشتر درباره نحوه شروع به کار با DevTools، لطفاً اسناد رسمی را بخوانید.
پنل حسابرسی در پانل دکمه ابزار اصلی قرار دارد. متوجه خواهید شد که پس از انتخاب، پنل حسابرسی هنوز تجزیه و تحلیل برنامه وب شما را انجام نداده است. اجرای تمام اکتشافی ها می تواند کند باشد، به خصوص برای یک برنامه وب بزرگ مانند GMail، بنابراین ابزار به طور پیش فرض غیرفعال است.
بیایید با کلیک کردن روی دکمه Run که برنامه وب را با فعال بودن اکتشافی عملکرد دوباره بارگیری می‌کند، وارد آن شویم. پس از بارگیری مجدد صفحه، فهرستی از توصیه ها را مشابه تصویر زیر مشاهده خواهید کرد.
متوجه خواهید شد که پنل ممیزی پیشنهادات را بر اساس شدت طبقه بندی می کند، که شدیدترین آنها با نقطه قرمز و پیشنهادات با شدت متوسط با نقطه زرد مشخص شده اند. این کدگذاری رنگی به شما کمک می کند تا پیشنهادات را اولویت بندی کنید و ابتدا روی مهمترین (و بزرگترین دستاوردها) تمرکز کنید.
عدد داخل پرانتز، به دنبال پیشنهاد، تعداد مواردی است که ابزار حسابرسی شناسایی کرده است. به عنوان مثال، 12 مورد از "Leverage caching مرورگر" وجود داشت. این به شما این حس را می دهد که هر چند وقت یکبار پیشنهاد را می توان اعمال کرد.
استراتژی های سرعت
همانطور که قبلا ذکر شد، راهبردهای شناخته شده و آزمایش شده زیادی برای بهینه سازی عملکرد اپلیکیشن وب وجود دارد. ما با این مقاله همه آنها را به طور عمیق پوشش نمی دهیم، اما یافتن اطلاعات و جزئیات بیشتر آسان است. منابع مفید برای یادگیری بیشتر در مورد ویژگی‌های بهینه‌سازی برنامه‌های وب عبارتند از آموزش‌های بیایید وب را سریعتر کنیم و تأخیر مقیاس‌پذیری بالا در همه جا است و برای شما هزینه دارد .
پنل حسابرسی پیشنهادات خود را به دو دسته، استفاده از شبکه و عملکرد صفحه وب گروه بندی می کند.
طبق پنل حسابرسی، برای بهبود استفاده از شبکه باید:
- از حافظه پنهان مرورگر استفاده کنید
- اهرم کش پروکسی
- اندازه کوکی را به حداقل برسانید
- محتوای ثابت را از یک دامنه بدون کوکی ارائه می دهد
- ابعاد تصویر را مشخص کنید
برای بهبود عملکرد صفحه وب، باید:
- بهینه سازی ترتیب سبک ها و اسکریپت ها
- قوانین استفاده نشده CSS را حذف کنید
بیایید به یکی از استراتژی هایی که می توانیم برای بهبود عملکرد htmlrocks.com روی آن تمرکز کنیم نگاه کنیم.
از حافظه پنهان مرورگر استفاده کنید
به عنوان مثال، اجازه دهید ابتدا به توصیه برای استفاده از حافظه پنهان مرورگر بپردازیم. این به طور خاص به چه معناست؟ با باز کردن گزینه در UI، جزئیات زیر به ما ارائه می شود:
- منابع زیر فاقد انقضای حافظه پنهان هستند. منابعی که تاریخ انقضا را مشخص نمی کنند ممکن است توسط مرورگرها ذخیره نشوند.
- منابع ذخیره‌سازی شده زیر دارای طول عمر کوتاهی هستند.
- منابع زیر به صراحت غیرقابل کش هستند. در صورت امکان آنها را در حافظه پنهان کنید.
ذخیره منابع یک راه عالی برای بهبود استفاده از شبکه است که منجر به کاهش صورت‌حساب پهنای باند برای توسعه‌دهنده و زمان پاسخ‌دهی سریعتر برای کاربر می‌شود. متأسفانه، این ابزار دقیقاً به شما نمی گوید که چه کاری باید انجام دهید، بنابراین ما باید کمی به توصیه ها بپردازیم و از دانش خود در مورد بهینه سازی عملکرد برنامه های وب برای اعمال این پیشنهادات استفاده کنیم.
ذخیره سازی
بدون غواصی در کش HTTP، مطمئناً می توانیم برخی از اصول اولیه را پوشش دهیم. پروتکل HTTP شامل دستورالعمل‌های کش است که به سرور و کلاینت اجازه می‌دهد تا مقدار داده‌هایی را که باید از طریق سیم منتقل شوند، کاهش دهند. به عنوان مثال، سرور می تواند به مشتری بگوید که منبع را به صورت محلی برای مدت زمان مشخصی ذخیره کند، بنابراین نیازی به درخواست مجدد منبع را از بین می برد. کلاینت همچنین می تواند بپرسد که آیا منبع سرور جدیدتر از منبعی است که به صورت محلی ذخیره شده است. در حالت ایده‌آل، اگر منبعی ثابت است، سرور باید به مشتری بگوید که منبع را به صورت محلی ذخیره کند و در آینده از درخواست منبع از سرور خودداری کند. همانطور که می توانید تصور کنید، جزئیات باورنکردنی در مورد حافظه پنهان HTTP وجود دارد، اما موضوع کلی این است که "میزان داده های ارسال شده از طریق سیم را با ذخیره منابع به صورت محلی در مشتری کاهش دهید".
رفع منابع غیر قابل ذخیره سازی
بیایید به یک توصیه عمیق نگاه کنیم و یاد بگیریم که چگونه توصیه حسابرسی را به ابزارهای دیگر داخل DevTools متصل کنیم. به طور خاص، بیایید به نحوه رفع «منابع زیر به صراحت غیرقابل کش هستند» نگاه کنیم.
از آنجا که کش از طریق پروتکل HTTP انجام می شود، باید به درخواست و پاسخ HTTP برای منبع http://www.html5rocks.com/ نگاه کنیم. به سادگی روی منبع کلیک کنید تا سرصفحه ها و جزئیات درخواست و پاسخ اصلی را مشاهده کنید.
سپس با اطلاعات بیشتر به پنل شبکه، منابع یا منابع (بسته به نوع منبعی که روی آن کلیک شده است) منتقل می شوید. در این صورت به پنل Network منتقل می شویم.
ما در تلاش هستیم تا تأیید کنیم که سرور به مشتری گفته است "صفحه اصلی html5rocks.com را کش نکنید". برای انجام این کار، ما روی منبع کلیک می کنیم تا سرصفحه های پاسخ را بررسی کنیم، زیرا این سرصفحه ها و دستورالعمل های ارسال شده توسط سرور هستند.
Cache-Control .مطمئناً سرور هدر "Cache-Control: no-cache" را برای مشتری ارسال کرد. همانطور که تصور می کنید، این به مشتری می گوید که همیشه منبع را بخواهد و آن را به صورت محلی ذخیره نکند. به طور خاص، مشخصات HTTP برای "بدون کش" به شرح زیر است:
"اگر دستورالعمل no-cache یک نام فیلد را مشخص نمی کند، یک کش نباید از پاسخ برای برآورده کردن یک درخواست بعدی بدون اعتبارسنجی مجدد موفقیت آمیز با سرور مبدا استفاده کند. این به سرور مبدا اجازه می دهد تا از کش کردن حتی توسط حافظه های پنهانی که قبلاً وجود داشته است جلوگیری کند. پیکربندی شده است تا پاسخ های قدیمی را به درخواست های مشتری برگرداند."
دقیقاً به همین دلیل است که پنل حسابرسی فعال کردن کش را توصیه می کند، زیرا در غیر این صورت سرور و کلاینت اطلاعات بالقوه اضافی را ارسال می کنند.
اکنون که علت اصلی پیشنهاد حسابرسی را تأیید کردیم، چگونه آن را برطرف کنیم؟ در این مورد، راه حل شامل پیکربندی یا کد سمت سرور است. بسته به تنظیمات خود، می توانید کش را از طریق پیکربندی وب سرور خود یا از طریق تنظیمات در چارچوب برنامه وب خود فعال کنید. به طور خاص، شما باید یک هدر Expires و یک Cache-Control: private با یک پارامتر max-age برای هر منبعی که می‌خواهید در حافظه پنهان ذخیره شود، اضافه کنید.
پیشنهادات فقط همین هستند، پیشنهادات
به یاد داشته باشید که پنل حسابرسی بهبودهایی را بر اساس اکتشافات عمومی توصیه می کند. بهترین روش‌ها را که طی سال‌ها آموخته‌اید، در برنامه وب خاص شما به‌کار می‌برد. در بیشتر مواقع، این توصیه ها به درستی انجام می شود و باید به آنها توجه شود.
با این حال، چند مورد وجود دارد که توصیه ممکن است درست باشد اما در واقع منجر به بهبودی نشود. به عنوان مثال، اگر صفحه شما فقط یک تصویر بزرگ دارد، پنل حسابرسی توصیه می کند که ویژگی های عرض و ارتفاع را به تگ <img> اضافه کنید (به طوری که موتور رندر بدون نیاز به دانلود و بررسی تصویر، ابعاد تصویر را بداند). در حالی که این به طور کلی توصیه خوبی است، اما اگر تصویر تنها عنصر موجود در صفحه باشد، کمک چندانی نخواهد کرد.
به یاد داشته باشید که این پیشنهادات را پس از درک آنها اعمال کنید. و فراموش نکنید که عملکرد را قبل و بعد از تغییرات اندازه گیری کنید تا مطمئن شوید که واقعاً بهبودی وجود دارد.
خلاصه
پنل حسابرسی یک ابزار عالی و آسان برای استفاده است که به سرعت به شما نشان می دهد چگونه عملکرد برنامه وب خود را بهینه کنید. سرعت یک ویژگی حیاتی برنامه وب است، زیرا بسیاری از شرکت ها ارتباط مستقیمی بین عملکرد و درآمد یا فعالیت پیدا کرده اند. بهینه سازی عملکرد برنامه شما نه تنها برای کاربران شما کار درستی نیست، بلکه برای کسب و کار شما نیز کار درستی است.