سرعت بارگذاری وبسایت یکی از مهم ترین ویژگی های یک وبسایت محسوب میشه. طی تحقیقاتی که اخیرا انجام شده، ۴۷ درصد بازدیدکنندگان سایت انتظار دارند سایت شما در ۲ ثانیه یا کمتر بارگذاری شود. اگر مدت زمان بارگذاری سایت بیش از ۳ ثانیه شود، ۴۰ درصد از کاربران، سایت شما را ترک میکنند. همچنین وبسایت هایی که سرعت بارگذاری بهتری دارند مورد توجه موتور های جستجو قرار میگیرند و طبق الگوریتم کافئینِ گوگل احتمال اینکه در صفحه اول جستجوها قرار بگیرند بیشتر میشه. بهترین زمان بارگذاری سایت کمتر از ۳ ثانیه است و بر اساس گزارش های دریافتی گوگل اکثر وبسایت ها نزدیک به این معیار نیستند. بهبود عملکرد بارگذاری سایت به دو قسمت عمده تقسیم میشه.
فرانت-اند و بک-اند. در این سری، میخوام درباره بهبود عملکرد فرانت-اند صحبت کنم.
? کاهش درخواست های HTTP
تا جایی که میتونید درخواست های HTTP سایتتون رو کم کنید. برای مثال اگر ۳تا فایل CSS و 5تا فایلJS دارید. تمام فایل های CSS رو به یک فایل و تمام فایل های SJ رو در یک فایل دیگه مینیفای کنید. مینیفای کردن یعنی فشرده کردن و کم کردن حجم فایل که معمولا شامل حذف اسپیس های کد، خطوط جدید و کامنت ها میشه. هر اسپیس یک بیت فضا میگیره و اگه در یک فایل HTMLیا CSS بخواید حساب کنید مقدار زیادی اسپیس دارید که فضای الکی میگیره. سایت های زیادی هستن که به صورت رایگان مینیفای میکنند. فقط لازمه سرچ کنید CSS Minifier. در اسلاید بعد نحوه استفاده از ابزار توسعه دهندگانِ مرورگرِ فایرفاکس برای مدیریت HTTP Request هارو آموزش میدم. البته اینم بگم مرورگر کروم هم این امکانات رو داره ولی من با فایرفاکس راحت ترم.
?استفاده از ابزار توسعه دهندگان
همونطور که در عکس بالا میبینید، بیشترین مدت زمان باگذاری المنت های یک وبسایت، به عکس هاش تعلق داره. پس سعی کنید عکس های خودتونو فشرده سازی کنید که حجم زیادی نگیرن. برای همین منظور ابزارهای زیادی هستش که میتونید استفاده کنید. اولیش ابزار آنلاین هستش مثل سایت های Compressjpeg.com و Compressor.io که عکستونو اونجا آپلود میکنید و فشردشو دریافت میکنید. یکی دیگه از ابزار مفید، همین فتوشاپ هستش. محصول قدرتمند ادوبی که عکستونو باهاش ویرایش و برای استفاده در وبسایتتون بهینش میکنید.یک فوت استادی هم بهتون بگم. برای آیکون و لوگوی وبسایتتون از عکس با فرمت SVG، برای عکس های معمولی از فرمتJPG و برای عکس های متحرک از GIF استفاده کنید.
? استفاده از CSS Critical
حتما از این ابزار استفاده کنید. ولی قبلش باید مفهوم above-the-fold رو متوجه شید.
above-the-fold یا above-the-scroll content به بخشی از سایت میگن که وقتی یک یوزر وارد سایت میشه اولین چیزی هست که میبینه و باید تکمیل شه تا به کاربر القا کنه سایت لود شده. حالا css ای که وظیفش استایل دادن همین بخش مهم هست اسمش critical CSS هست. این ابزارم استفادش اینه که بیاد اون بخش از سایتو تشخصی بده و اولویت رو اونا قرار بده. بعدش بیاد css اون قسمتو لود کنه تا کاربر حس کنه سایت بالا اومده.
? استفاده از کتابخانه های فرانت-اند
این موضوع رو همیشه به برنامه نویسای دیگه پیشنهاد میکنم که اگر میخواید سرعت سایتتون واقعا عالی باشه از کتابخونه و فریمورکی استفاده نکنید. شاید این ابزار سرعت توسعه رو بالا ببرند و هزینه رو پایین بیارند ولی تاثیر روی پرفُرمنس سایت دارن. هر عاملی بین کد خام شما و مرورگر باشه سرعت رو کم میکنه. کد خام چیه؟ مرورگر ها کلا سه زبان بیشتر نمیفهمند. CSS , JS و HTML به کدی که به این زبونا نوشته شده باشه میگن خام. پس اگه از جیکوئری استفاده میکنید شما دارین یک لایه بین خودتون و کد خام ایجاد میکنید و هزینه اینکار، کاهش پرفورمنس سایت هستش. برای اثبات حرفم، یکسری به سایت Vanilla-js.com بزنید. اونجا اومده سرعت جاوا اسکریپت(vanilla JS) رو با چندتا فریمورک و کتابخونه دیگه مقایسه کرده نتایج جالبه. من یکیشو با اجازه کپی کردم تو عکس پایینی :)
? ختم کلام
فرانت و بک-اند هر دو به‌طور برابری تاثیر بر سرعت بارگذاری سایت دارن. ولی من تو این پست سعی کردم درباره مهم ترین راهکار های افزایش سرعت بارگذاری سایت در فرانت-اند صحبت کنم. چون خیلی‌ها اونو نادیده میگیرند در حالی که بعضی موقع‌ها واقعا سرعت بارگذاری رو بین 3 تا 5 ثانیه کندتر میکنه پس حتما جدیش بگیرید. من قطعا در پست های بعدی درباره راهکار های بک-اند مثل کش کردن سایت، استفاده از پرتوکل های مختلف، پیکربندی سرور، استفاده از CDN ها و... صحبت میکنم. تا اون موقع فعلا این نکات رو روی سایتتون اعمال کنید و ببینید سرعت بارگذاری سایتتون چقدر تغییر میکنه. بدرود
? اگر دوست دارید مطالب نوشتاری اینجارو به صورت تصویری و یک هفته زود‌تر دریافت کنید، میتونید پیج آکولاد باز رو در اینستاگرام را دنبال کنید.
