آشنایی با استراتژی‌هایی به منظور کوتاه‌تر کردن زمان لود سایت

آشنایی با استراتژی‌هایی به منظور کوتاه‌تر کردن زمان لود سایت

سرعت یکی از کلیدهای موفقیت در دنیای وب است به طوری که در فضای آنلاین این ثانیه‌ها هستد که پیروزی و شکست شما را رقم می‌زنند و این در حالی است که تأخیری حتی در حد یک ثانیه در بارگذاری صفحه می‌تواند بازدید سایت را از یکسو و همچنین تجربهٔ کاربری را از سوی دیگر تحت‌تأثیر خود قرار دهد.

جالب است بدانید شرکت آمازون پا را از این هم فراتر گذاشته و گزارش کرده که به ازای هر یکصد میلی‌ثانیه افزایش سرعت سایت خود، ۱٪ افزایش بازدهی داشته است! این مثال و مثال‌های متعدد دیگر حاکی از آنند که سرعت سایت نوعی سرمایه‌گذاری روی کسب‌وکار‌های آنلاین است. در همین راستا، در ادامه راه‌کارهایی را مطرح نموده‌ایم که استفاده از آن‌ها به شما کمک می‌کند تا زمان بارگذاری سایت خود را تا حد خوبی کاهش داده و پرفورمنس (عملکرد) آن‌ را بهبود ببخشید.

بهینه‌سازی تصاویر
آمارها نشان می‌دهند که اغلب کاربران سایتی که زیر ۳ ثانیه لود نشود را بلافاصله ترک می‌کنند و نیاز خود را از طریق دیگر سایت‌هایی که محتوای مد نظرشان را دارند تأمین می‌کنند! از سوی دیگر، از آنجا که تصاویر بخش عمده‌ای از حجم صفحات وب را به خود اختصاص می‌دهند،‌ بهینه نمودن آن‌ها می‌تواند تأثیر مستقیمی بر سرعت لود صفحه داشته باشد (به‌ طور مثال، حجم تصویر این مقاله چیزی در حدود ۵۰ الی 60 کیلوبایت است که چنین حجمی قابل‌قبول در نظر گرفته می‌شود.)

انتخاب اندازه و فرمت مناسب (JPG ،GIF و یا PNG) یکی از مواردی است که در بهینه‌سازی تصاویر اهمیت دارد و این در حالی است که هدف از بهینه‌‌سازی تصاویر این می‌باشد که بدون از دست رفتن بیش از حد کیفیت، حجم فایل تصویری تا حد امکان کاهش پیدا کند (برای کسب اطلاعات بیشتر در این باره، توصیه می‌کنیم به مقالهٔ چگونه تصاویر وب‌سایت را به‌ منظور بهبود پرفورمنس بهینه کنیم؟ مراجعه نمایید.)

استفاده از شبکهٔ توزیع محتوا
Content Delivery Network یا به اختصار CDN می‌تواند فایل‌های استاتیک وب‌سایت همچون فایل‌های سی‌اس‌اس، جاوااسکریپت و تصاویر را دریافت نموده و آن‌ها را به سرورهایی منتقل کند که از نظر مکانی و فیزیکی فاصلهٔ کمتری با کاربر دارند (برای کسب اطلاعات بیشتر، به مقالهٔ CDN (شبکه‌ٔ توزیع محتوا) چیست و چگونه کار می‌کند؟ مراجعه نمایید.)

استفاده از سرویس کَشینگ
Caching مکانیسمی است که در طی آن به‌ منظور کم کردن حجم اشغال‌شدهٔ پهنای باند و بهبود عملکرد سایت، صفحات وب به‌ طور موقت در دیوایس مورد استفادهٔ کاربر ذخیره شده و بدین ترتیب در بازدید‌های بعدی، به جای لود صفحه از سرور اصلی، نسخهٔ ذخیره شدهٔ صفحه از روی دیوایس نمایش داده می‌شود (البته اگر پس از آخرین بازدید کاربر تغییری در آن صفحه ایجاد شده باشد، در این صورت نیاز است تا نسخهٔ جدید صفحه مجدداً بارگذاری شود.) اساساً این نوع کَش کردن محتوا در دست کاربر است و وب‌مسترها خیلی کنترلی رو آن ندارد اما خبر خوب اینکه ما در سمت سرور هم می‌توانیم دست به کَش کردن محتوای سایت‌مان بزنیم.

در واقع، حالت دیگری از Cache وجود دارد که در سمت سرور انجام می‌شود بدین صورت که به جای ارسال کوئری به دیتابیس برای فِچ (فراخوانی) کردن دیتایی خاص، صفحهٔ مد نظر کاربر از روی سرویس کَش وب‌سایت بارگزاری می‌شود که این مسئله منجر به کاهش بار روی دیتابیس خواهد شد که بالتبع بهبود پرفورمنس را در پی خواهد داشت. 

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

بهینه‌سازی سورس‌کد وب اپلیکیشن
بسیار مهم است که کدها را تا حد امکان بهینه نمایید؛ بدین معنا که تعداد و حجم فایل‌های اچ‌تی‌ام‌ال، سی‌اس‌اس و جاوااسکریپت سایت خود را کاهش داده، در کمترین تعداد خط فانکشن مد نظر را پیاده نموده و از معماری و الگوهای کدنویسی مورد تأیید در توسعهٔ وب اپلیکیشن استفاده نمایید.

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

البته به‌ خاطر داشته باشیم که با عرضهٔ HTTP2،‌ این محدودیت دیگر از بین رفته و سرورهایی که نسخهٔ دوم پروتکل اچ‌تی‌تی‌پی را ساپورت می‌کنند، این امکان را فراهم می‌سازند تا به هر تعداد ریکوئست که بخواهیم به‌ صورت موازی برای دریافت فایل‌ها به‌ سمت سرور ارسال کنیم که توصیه می‌کنیم برای آشنایی بیشتر با فیچرهای این پروتکل، به مقالهٔ HTTP/2 چیست و چه تفاوت‌هایی با HTTP/1 دارا است؟ مراجعه نمایید. در عین حال، به خاطر داشته باشید که مهاجرت به HTTP2 دارای یکسری چالش‌هایی هم هست که آشنایی با آن‌ها خالی از لطف نیست که در همین راستا، می‌توانید به مقالهٔ آشنایی با برخی چالش‌های مرتبط با پروتکل HTTP/2 مراجعه نمایید.

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

دقت در انتخاب سرویس هاستینگ
یکی از راه‌های کاهش زمان لود صفحات این است که هر چند وقت یک‌بار، خدمات هاستینگ خود را بررسی نموده و در صورت لزوم در مورد سرویس، و گاهی هم شرکت، انتخابی خود تجدیدنظر کنید! در هاست‌های اشتراکی، وب‌سایت‌های متعددی از فضای سرور به‌ طور مشترک استفاده می‌کنند و در نتیجه سرعت سرور تحت‌تأثیر مجموع تعداد کاربران این وب‌سایت‌ها قرار می‌گیرد که در این‌گونه موارد باید دربارهٔ شرکت هاستینگ خود تجدیدنظر نموده و برای افزایش سرعت سایت به فکر تهیه‌ٔ یک سرور اختصاصی باشید.

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

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


online-support-icon