سه نکته برای افزایش سرعت وب سایت طراحی شده با بوت استرپ
بهینه سازی وب سایت جزو آن دسته از تکنیک هایی است که هم در سمت سرور و هم در سمت کلاینت به منظور افزایش سرعت بارگذاری وب سایت و به وجود آوردن تجربه کاربری بهتر مورد استفاده قرار می گیرد. امروزه بازدیدکنندگان شما از برنامه های بومی استفاده می کنند و انتظار دارند صفحات وب در کمتر از یک ثانیه برای آنها بارگذاری شود و اگر از این میزان مدت بیشتری معطل بمانند، به راحتی وب سایت شما را ترک می کنند.
موتورهای جستجو قطعاً با این روند دست و پنجه نرم می کنند و از بسیاری جهات به افزایش سرعت وبسایت ها کمک کرده‌اند. برای مثال گوگل در حال حاضر از سرعت صفحه به عنوان عامل رتبه بندی وب سایت ها در جستجوهای خود استفاده می کند.
در ژانویه سال ۲۰۱۸ شرکت گوگل اعلام کرده است که سایت های بهینه سازی شده برای تلفن همراه برای دستیابی به موقعیت های برتر در فهرست نتایج بسیار اثرگذار است. بوت استرپ اغلب به خاطر افزودن موارد اضافی به وب سایت ها مورد انتقاد قرار گرفته است. بنابراین اگر از این فریمورک محبوب در پروژه خود استفاده می کنید به وزن و سرعت صفحه خود توجه بیشتری داشته باشید.
در این مقاله من سه گام مهم برای بهینه سازی صفحاتی که از بوت استرپ استفاده می‌کنند را عنوان کرده ام. با استفاده از این س گام می توانید صفحات خود را سریعتر بارگذاری کنید.
تنها بسته هایی از بوت استرپ که به آن نیاز دارید را دانلود کنید
اگر تصمیم دارید با پکیجهای از قبل کامپایل شده بوت استرپ کار کنید، باید جداً در مورد قسمت هایی از این کتابخانه که به آن نیاز دارید فکر کنید. فولدر دانلود شده شامل کتابخانه های css مورد نیاز و کتابخانه های جاوا اسکریپتی برای کامپوننت هایی است که می توانید در صفحات وب از آن استفاده کنید.
اگر شما به کدهای از css برای ریست کردن استایل پروژه خود نیاز دارید می توانید به سادگی از bootstrap-reboot.min.css استفاده کنید.
اگر به یک سیستم شبکه بندی فوق العاده آسان نیاز دارید، می توانید از bootstrap-grid.min.css استفاده کنید. نیاز نیست همه این فایل های این کتابخانه را دانلود کنیم. به عبارتی دیگر شما باید بدانید که قرار است از چه چیزی در این کتابخانه استفاده کنید و حداقل مطمئن شوید از نسخه های فشرده سازی شده فایل های این کتابخانه استفاده می کنید.
به طور مشابه در کدهای جاوا اسکریپتی این کتابخانه از کامپوننت هایی که به آنها نیاز دارید، استفاده کنید. برای مثال اگر می خواهید از dropdowns ،popover و tooltip در پروژه خود استفاده کنید، به جای استفاده از فایل bootstrap.min.js می توانید از bootstrap.bundle.min.js استفاده کنید.
از سورس ها به جای بسته‌های دانلودی از پیش کامپایل شده استفاده کنید
همان‌طور که آخرین نسخه های منتشر شده از بوت استرپ به شما اجازه می‌دهند، از قسمتی از این کتابخانه در پروژه خود استفاده کنید، حتی فایل های از پیش کامپایل شده هم قسمت هایی دارند که ممکن است در پروژه شما هیچگاه استفاده نشوند. پس می توانید از آنها هم صرف نظر کنید.
مرورگر ها همچنان کد هایی که استفاده نمی شوند را دانلود می کنند که می تواند بر روی کارایی وبسایت شما تاثیر بگذارد. به خصوص اگر کاربران شما از اتصال شبکه ضعیفی برخوردار باشند. یک ایده بهتر دانلود سورس کد بوت استرپ است زیرا شما را قادر خواهد کرد دقیقا کامپوننت هایی که به آن نیاز دارید را به پروژه خود اضافه کنید. می توانید هر قسمت از کتابخانه را که مد نظر شماست سفارشی سازی کنید، بدون اینکه نیاز داشته باشید استایل ها را override کنید.
از تکنیک‌های بهینه سازی اثبات شده در سمت کلاینت استفاده کنید
صرف نظر از مواردی که در بالا ذکر شد بهینه سازی وب سایتی که با استفاده از بوت استرپ ساخته شده است، هنوز نیاز به ملاحظاتی در قسمت جلوی وب سایت دارد. در زیر به برخی از موارد مهمی که می توانید برای بهینه سازی قسمت front-end از وبسایت خود استفاده کنید اشاره شده است :
از کدهای کمتری در css و جاوا اسکریپت استفاده کنید
هر کاراکتری که در کدهای خود اضافه می‌کنید میتواند بر وزن صفحه شما تاثیر گذار باشد، بنابراین نوشتن کدهای مختصر و واضح در css و جاوا اسکریپت که همچنان خوانایی کد حفظ شده باشد می تواند تاثیر زیادی در بهینه سازی صفحات شما داشته باشد.
از کد های تکراری و غیر قابل استفاده در css و جاوا اسکریپت پرهیز کنید. خیلی خوب است که کدهای خود را در ابتدای پروژه سازماندهی کنید. برای مثال استفاده از راهنماهای استایل میتواند به پروسه توسعه شما کمک کند و بر کیفیت بهتر کد های شما تاثیر بگذارد. ابزارهای مختلفی وجود دارد که می تواند در پاکسازی کد ها به شما کمک کند با استفاده از Lint و JSLint می توانید سند خود را برای خطاهای نوشتاری و کدهای غیرقابل استفاده بررسی کنید.
فشرده سازی و الحاق کد های css و جاوا اسکریپت
یک گام بهینه‌سازی مهم برای یک وب سایت محدود کردن تعداد درخواست های HTTP است که برای رندر شدن محتوا انجام می دهد. هر درخواستی که به سمت سرور ارسال شده و پاسخی دریافت میشود، مدت زمانی را طلب خواهد کرد. در نتیجه می تواند تاثیر منفی بر روی تجربه کاربری وب سایت شما بگذارد.
کوچک سازی که به معنای حذف کامنت ها و فضاهای سفید از سند شماست و همین طور الحاق چندین فایل css و جاوا اسکریپت در یک فایل می تواند تعداد درخواست هایی که به سمت یک سرور ارسال می شود را کاهش دهد. در نتیجه تاثیری مثبت در بهینه سازی وب سایت شما خواهد داشت.
در استفاده از تصاویری که حجم زیادی را اشغال می کنند مراقب باشید
مهمترین قسمت از یک صفحه وب اغلب فایل های تصاویر آن است. البته فایل های ویدیویی و صوتی نیز در این روند تاثیر گذار هستند. بهینه سازی این فایل ها می تواند تأثیری خوبی بر سرعت وب سایت شما داشته باشند. بنابراین در این مورد به نکات زیر توجه کنید :
- مطمئن شوید از فرمتی درست برای تصاویر خود در صفحات وب استفاده می کنید
- اکثر تصاویری که بر روی کامپیوتر شما موجود است برای وب سایت شما بهینه نیستند. میتوانید از ابزارهایی برای بهینه سازی این تصاویر استفاده کنید. برای مثال یک ابزار آنلاین مناسب برای بهینه سازی تصاویر سایت TinyPNG است که تصاویر را تا جای ممکن برای شما بهینه سازی می کند.
نتیجه
سرعت بارگذاری یک وب سایت یکی از عوامل اصلی در تعیین تجربه کاربری برای وب سایت هاست. این امر حتی در مواردی که کاربر از تلفن همراه خود استفاده می کند از اهمیت بیشتری برخوردار است. در این مقاله به گام هایی که برای بهینه سازی وب سایت خود در زمان استفاده از کتابخانه بوت استرپ نیاز دارید اشاره کردم. گام‌ها به شما کمک می‌کند وبسایتی سریعتر را راه اندازی کنید.
#بهینه سازی #افزایش سرعت سایت #بوت استرپ