۲ نکته برای افزایش سرعت لود و رِندرینگ وب‌سایت‌‌های بوت‌استرپی

در این مقاله به ترفند‌هایی ساده اما کاربردی برای بالا بردن سرعت لود و رِندرینگ وب‌سایت‌هایی که از فریمورک محبوب بوت استرپ (Bootstrap) استفاده می‌کنند، خواهیم پرداخت.

(برای آشنایی بیشتر با این فریمورک محبوب و کاربردی، می توانید به دوره ی آموزش سریع بوت استرپ 5 در سایت سکان آکادمی مراجعه کنید)

لزوم بهینه کردن سایت

بهینه‌سازی وب‌سایت شامل مجموعه‌ای از ترفند‌ها است، هم در سمت‌‌‌ کاربر و هم سمت سرور، که هدف‌ آن‌ها بالا بردن سرعت لود و رِندرینگ وب‌سایت برای بهبود #تجربهٔ کاربری می‌باشد. امروزه، مخاطبین وب‌سایت‌های مختلف به سرعت بالای اپ‌‌‌های به اصطلاح Native عادت کرده‌اند. در واقع، ‌آن‌ها انتظار دارند که یک وب‌پیج نیز در زمانی در حدود یک ثانیه لود شود و اگر هم بیش از این طول بکشد، این احتمال وجود خواهد داشت که وب‌سایت مذکور را ترک‌ کنند.

موتور‌های جست‌وجو‌ نیز از این روند جا نمانده‌‌‌اند و به طُرق مختلف لود سایت را مد نظر قرار داده‌اند. به طور مثال، گوگل مدت طولانی است که سرعت لود صفحات وب را به عنوان یک عامل مؤثر در رتبه‌بندی وب‌سایت‌ها در جست‌وجو‌های انجام شده در دسکتاپ لحاظ می‌کند (همچنین گوگل اعلام کرده‌ است که از جولای ۲۰۱۸، جست‌وجو‌های موبایل نیز در این رتبه‌بندی بسیار مؤثر خواهد بود.)

‌Bootstrap (بوت‌استرپ) به دلیل اضافه کردن حجم غیر‌ضروری به وب‌سایت، همواره مورد انتقاد قرار گرفته است. به طور مثال، فایل زیپ بوت استرپ ۴ حدوداً ۲.۵ مگابایت حجم دارد؛ پس اگر شما از این لایبرری محبوب سمت کاربر استفاده می‌کنید، مطمئن شوید که به حجم وب‌پیج و سرعت لود آن توجه کافی داشته‌اید. در همین راستا، در ادامه قصد داریم دو ترفندی را معرفی کنیم که منجر به بالاتر رفتن سرعت لود سایت‌های بوت‌استرپی می‌شود که عبارتند از:

1. فقط پکیج‌هایی را از بوت‌استرپ دانلود کنید که واقعاً لازم دارید

اگر تصمیم دارید که از پکیج‌های از پیش کامپایل شدهٔ بوت‌استرپ استفاده کنید، لازم است که دقت کنید به کدام بخش‌های لایبرری واقعاً احتیاج دارید. پوشهٔ دانلودی با نام dist شامل لایبرری CSS به طور کامل (bootstrap.css و bootstrap.min.css) و لایبرری اجزاء مورد‌ نیاز JavaScript به همراه تمام وابستگی‌ها به جز jQuery می‌باشد (bootstrap.bundle.js و bootstrap.bundle.min.js ). همچنین در این فولدر تعدادی فایل مستقل CSS شامل کدهای لازم برای استفاده در بخش‌های به‌خصوص وجود دارد.

اگر فقط به یک اصطلاحاً CSS Reset در پروژهٔ خود نیاز دارید، کافی است به سادگی از ‌bootstrap-reboot.min.css استفاده کنید، اگر به یک سیستم grid انعطاف‌پذیر و کاربردی احتیاج دارید، فقط کافی است از bootstrap-grid.min.css استفاده کنید. در یک کلام، اصلاً نیازی نیست همه‌ٔ فریمورک‌ بوت‌استرپ را دانلود کنید؛ بلکه فقط بخش‌های مورد‌ نیازتان را استفاده‌ کنید.

از سوی دیگر، اگر به تمام لایبرری احتیاج دارید، حداقل از نسخهٔ اصطلاحاً Minified فایل‌های مورد نظر استفاده کنید (به طور مشابه، هنگام استفاده از جاوااسکریپت، اگر قرار نیست از منو یا ویجت Dropdown و یا Popovers در پروژهٔ خود استفاده کنید، به جای bootstrap.bundle.min.js از bootstrap.min.js استفاده کنید.)

2. به‌جای پکیج‌ کامپایل شده، از سورس‌کد استفاده کنید

با وجود اینکه بوت‌استرپ به شما اجازه می‌‌دهد که فقط بخش‌‌های مورد نیاز را در پروژه استفاده کنید، باز هم ممکن است فایل‌های کامپایل شده، حاوی کد‌هایی باشند که شما اصلاً نیازی به آن‌ها نداشته باشید. ایدهٔ بهتر این‌ است که سورس‌کد بوت‌استرپ را دانلود کنید زیرا:
- قادر خواهید بود تا دقیقاً اجزاء مورد نیاز را در پروژه قرار دهید و نگران کد‌های اضافی در فایل‌های خود نباشید. 
- سفارشی کردن هر بخش از لایبرری روشن‌تر و مؤثر‌تر خواهد بود.
- فایل‌‌های نهایی CSS معمولاً سبک‌تر و کم‌‌حجم‌تر خواهند بود.

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