راهنمای عملی و کاربردی برای افزایش سرعت وب‌سایت

راهنمای عملی و کاربردی برای افزایش سرعت وب‌سایت

نخستین گام در بهینه‌سازی پرفورمنس یک وب‌سایت، یافتن مواردی است که دارای اولویت بیشتری برای انجام تغییرات می‌باشند؛ اگرچه ابزارهای زیادی برای بررسی و افزایش میزان کارایی و بهینه‌سازی وب‌سایت‌ در دسترس است، اما بااستفاده از مواردی که در ادامه به معرفی آن‌ها می‌پردازیم، می‌توان بهترین نتایج را به‌ ساده‌ترین شکل ممکن کسب نمود.

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

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

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

سپس صفحه را مجدداً بارگذاری نمایید؛ در این مرحله از کار نتایج مربوط به گزارش‌ها و نمودارهای وب‌سایت به شما نشان داده خواهند شد (البته بررسی تمامی جزئیات نتایج ارائه شده در سربرگ Network بسیار زمان‌بر می‌باشد و در این نوشته تنها گزینه‌های کاربردی و مهم آن‌را معرفی می‌کنیم.)

 راهنمای عملی و کاربردی برای افزایش سرعت وب‌سایت

گزارش عملکرد وب‌سایت در قالب یک جدول که به صورت پیش‌فرض دارای 6 ستون می‌باشد، ارائه می‌شود؛ نتایج جدول نشان‌دهندهٔ اسامی منابعی هستند که برای بارگذاری کامل صفحه فراخوانی و به‌ترتیب زمان درخواست، لیست شده‌اند. تغییر ترتیب این نتایج با استفاده از گزینه Size می‌تواند راه‌حل مناسبی برای تشخیص اولویت در مواردی باشد که نیاز به بهینه‌سازی و اصلاح دارند، چرا‌که کسب رتبهٔ اول جدول در این حالت نشان‌دهنده قسمتی از وب‌سایت است که بیشترین زمان مورد نیاز برای اجرای صفحه را به‌خود اختصاص داده است و به‌نوعی بزرگترین مانع در افزایش سرعت آن می‌باشد!

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

اگر از نمایش نمودارها و آمارهای این گزارش‌ها قدری نگران شده‌اید، بهتر است ابتدا نتایج کلی را بررسی نمایید؛ در قسمت پایین صفحه به‌صورت خلاصه مقدار ۳ پارامتری که برای بارگذاری کامل صفحه محاسبه شده‌اند نشان داده می‌شود و نیاز به توضیح نمی‌‌باشد که نتیجهٔ اقدامات بهینه‌سازی وب‌سایت معادل است با کاهش این ۳ مقدار معرفی شده که به‌ترتیب عبارتند از تعداد کلی درخواست‌های ارسال شده، حجم کلی فایل‌های جابه‌جا شده و زمان کلی بارگذاری صفحه (به‌طور مثال، در تصویر فوق ۱/۷۷ ثانیه طول می‌کشد تا کل صفحه لود شود).

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

به‌طور کلی، هر گزارش شامل ۳ بخش می‌باشد که عبارتند از: مواردی که می‌بایست حتماً اصلاح شوند (با رنگ قرمز)، مواردی که باید توجه بیشتری به آن‌ها نمود (با رنگ زرد) و همچنین مواردی که با موفقیت، پیش از این به‌انجام رسیده‌اند (با رنگ سبز).

شما چه راه‌کارهای دیگری را برای بهبود پرفورمنس وب‌سایت پیشنهاد می‌کنید؟ نظرات و پیشنهادات خود را با ما و سایر کاربران سکان آکادمی به اشتراگ بگذارید.

منبع


علی فلاحی