۵ اشتباه رایج در بین توسعه دهندگان که بر روی زمان بارگذاری صفحه تاثیرگذار می‌باشد

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

چرا زمان بارگذاری صفحه اهمیت دارد؟

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

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

- تبدیل: هر چه صفحه‌ی شما سریع‌تر بارگذاری شود، تعامل بیشتری نیز با کاربر خواهید داشت. با آهسته شدن سایت، تبدیل‌ها نیز از بین می‌روند. اگر صفحه‌ی وب شما برای بارگذاری به زمان زیادی نیاز داشته باشد، کاربران تمایلی به استفاده از سایت و انجام فراخوان عمل (Call-To-Action) نخواهند داشت. این موضوع موجب ناامیدی کاربر شده و باعث می‌شود تا آن‌ها سایت را بدون خرید محصول یا استفاده از خدمات شما ترک کنند.

- قابلیت استفاده: هر چه زمان بارگذاری وبسایت شما بهتر باشد، رضایت کاربر نیز بیشتر خواهد بود. به همین دلیل مشتری‌های بیشتری را حفظ خواهید کرد.

بیایید این مسئله را براساس تحقیقات انجام شده توسط HubSpot بررسی کنیم:

- اگر یاهو زمان بارگذاری صفحه خود را ۰.۴ ثانیه کاهش دهد، ممکن است میزان بازدید آن ۹ درصد افزایش پیدا کند.

- کاهش ۱ ثانیه‌ای سرعت صفحه آمازون می‌تواند بهایی معادل ۱.۶ میلیارد دلار را در فروش سالانه آن‌ها به همراه داشته باشد.

- وجود تاخیر ۲ ثانیه‌ای در جستجوی Bing منجر به از دست دادن درآمد ۴.۳ درصدی از هر بازدیدکننده، کاهش ۳.۷۵ درصدی کلیک‌ها و غیره می‌شود.

با توجه به مواردی که در بالا گفته شد، می‌توانید بفهمید که زمان بارگذاری صفحه چه اهمیتی برای وبسایت شما خواهد داشت.

عوامل تاثیرگذار بر زمان بارگذاری صفحه و نکاتی جهت بهینه‌سازی

عوامل زیادی بر زمان بارگذاری صفحه تاثیر می‌گذارند. با این حال من از بین آن‌ها ۵ اشتباه برتری را لیست کرده‌ام که هنگام ساخت وبسایت با آن‌ها روبرو شده بودم.

۱. وجود تعداد زیادی از درخواست‌های HTTP

درخواست‌های HTTP زمانی انجام می‌شوند که مرورگر به دریافت یک فایل، صفحه یا تصویر از سرور احتیاج داشته باشد. شما می‌توانید از طریق بخش Network در Developer Tools از نحوه درخواست‌های انجام شده توسط برنامه‌های خود مطلع شده و بر آن‌ها نظارت داشته باشید.

معمولاً مرورگر تعداد درخواست‌های همزمان را به ۴ تا ۸ مورد محدود می‌کند. بنابراین شما نمی‌توانید تعداد زیادی درخواست را انجام دهید.

تحقیقات انجام شده توسط یاهو نشان می‌دهد که ۸۰ درصد از زمان بارگذاری برنامه شما به درخواست HTTP بستگی دارد. کاهش درخواست‌های HTTP سبب افزایش زمان بارگذاری صفحه خواهد شد. برای اینکه تعداد درخواست‌های HTTP را کاهش دهید، می‌توانید کارهای زیر را انجام دهید:

- ادغام فایل‌های JS/CSS : به جای دریافت چندین فایل از سرور می‌توانید فایل‌های CSS و JS را با یکدیگر ترکیب کنید. از آنجایی که تمام فایل‌های CSS به نوعی render-blocking هستند، کاهش چنین فایل‌هایی زمان بارگذاری صفحه را به شدت بهبود می‌بخشد.

- تنها موارد لازم را بارگیری کنید: به جای بارگیری کردن همزمان تمام تصاویر موجود در برنامه، می‌توانید هر کدام را در صورت لزوم بارگیری کنید. به این روش بارگیری تنبل یا بارگیری دستوری گفته می‌شود. به جای اینکه یک تصویر موجود در پایین صفحه را بارگیری کنید، هنگام ورود کاربر به وبسایت می‌توانید متناسب با پیمایش او تصاویر موجود در بخش‌های خاص را بارگیری کنید.

- فعال کردن حافظه‌ی پنهان مرورگر: شما می‌توانید تصاویر استاتیک یا محتوای سایت خود را ذخیره کنید. وقتی یک کاربر برای بار دوم از سایت بازدید کند، حافظه‌ی پنهان می‌تواند این محتوا را بدون نیاز به ارسال درخواست HTTP جدید به سرور بارگیری کند. همین موضوع سبب بارگذاری سریعتر محتوا می‌شود.

- از HTTP/2 در سرور خود پشتیبانی کنید: با کمک HTTP/2، برای بارگذاری وبسایت تنها یک اتصال از مرورگر به سرور برقرار می‌شود. در اینجا چندین درخواست به صورت همزمان نیز مجاز است. این کار خیلی کارآمدتر از ایجاد یک اتصال جدید برای هر منبع می‌باشد.

عدم وجود CDN

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

استفاده کردن از CDN این امکان را به کاربران می‌دهد تا منابع مورد نیاز صفحه‌ی وب خود را از نزدیکترین سرور به محل سکونت خود دریافت کنند. سرورها در CDN در نقاط مختلف جغرافیایی توزیع می‌شوند. شاید این روش کمی گران باشد اما روشی موثر برای بهبود زمان بارگذاری برنامه‌ی شما خواهد بود.

به عنوان مثال اگر سرور اصلی شما در کالیفرنیا باشد، ممکن است شبکه‌ی تحویل محتوا به این شکل باشد.

با این حال تنظیم کردن صحیح CDN برای ذخیره سازی محتوا با مقادیر مناسب، جهت استفاده‌ی کارآمد اهمیت دارد.

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

به یاد داشته باشید که بیشتر خدمات CDN دارای شبکه‌ی اصلی خودشان هستند. این همان بخشی است که می‌توانند در آن خدمات با کیفیت بالایی را نسبت به اینترنت ارائه دهند. این موضوع باعث از بین رفتن بسته شده و در نتیجه بارگذاری سریعتر می‌شود.

نکته: مولفه‌های چند بار مصرف خود را با استفاده از Bit (گیت هاب) بین پروژه‌ها به اشتراک بگذارید.

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

Bit از Angular، Vue، React، TypeScript، Node و موارد دیگر پشتیانی می‌کند.

۳. اندازه‌های بزرگ فایل و صفحه

بازیابی یک فایل بزرگ یا یک صفحه از وب به زمان زیادی احتیاج دارد. دریافت چنین فایل‌های بزرگی، اندازه صفحه را بزرگ کرده و باعث افزایش زمان بارگذاری صفحه می‌شود.

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

Brotli هم یک مورد دیگر در زمینه فشرده‌سازی است که بسته به نوع فایل‌های خود می‌توانید آن را نیز در نظر داشته باشید.

 فشرده کردن فایل‌های HTML یا CSS شما معمولاً حدود ۵۰ تا ۷۰ درصد از اندازه فایل را ذخیره می‌کند. به همین خاطر زمان بارگذاری صفحه کمتر شده و از پهنای باند کمتری نیز استفاده می‌شود. با کاهش اندازه‌ی تصاویر موجود در برنامه‌ی خود می‌توانید زمان بارگذاری صفحه را خیلی کاهش دهید.

۴. بارگیری همزمان تمام منابع

بارگیری همزمان تمام فایل‌های CSS، HTML و JS باعث افزایش زمان بارگذاری صفحه می‌شود چون تا زمانی که تمام این منابع به طور کامل بارگیری نشده باشند، رندرینگ مسدود خواهد شد. بارگیری کردن فایل‌های JS بعد از بقیه المان‌ها می‌تواند سبب بهبود زمان بارگذاری صفحه شود.

"Defer JavaScript loading" یک مکانیزم برای بارگیری فایل‌های بزرگ JS شما پس از بارگیری سایر المان‌هاست. این روش تضمین می‌کند که بقیه مطالب شما بدون هیچگونه دخالتی از طرف فایل‌های بزرگ JS بارگیری می‌شوند.

اگر یک سایت HTML دارید، باید قبل از تگ </body> خود یک فایل JS خارجی (defer.js) را به کار بگیرید.

<script type="text/javascript">
  function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

کد بالا می‌گوید که ابتدا باید صبر کنید تا کل مطالب بارگیری شود، سپس می‌توانید فایل‌های defer.js خارجی را بارگیری کنید.

۵. تعداد بسیاری از ریدایرکت‌ها

بیشتر اوقات از ریدایرکت‌ها برای مدیریت کردن صفحات جا به جا شده یا حذف شده استفاده می‌کنیم تا از روبرو شدن با لینک‌های خراب جلوگیری کنیم. با این حال ریدایرکت‌های بیشتر به معنای درخواست‌های HTTP بیشتر است. این موضوع زمان بارگذاری صفحه را به شدت افزایش می‌دهد. گوگل به صاحبان سایت توصیه می‌کند تا به منظور بهبود زمان بارگذاری، ریدایرکت‌ها را حذف کنند. این مسئله برای سایت‌های "موبایل فرست" بسیار موضوع مهمی است.

می‌توانید برای شناسایی تمام ریدایرکت‌های موجود در برنامه خود از ابزاری مثل Screaming Frog استفاده کنید. با تجزیه و تحلیل کردن آن می‌توانید هرگونه ریدایرکت غیرضروری را پاک کنید. وقتی در مورد ریدایرکت‌ها صحبت می‌کنیم، آن‌ها به دو دسته تقسیم خواهند شد:

ریدایرکت‌های سرور ساید : سریع و قابل ذخیره است.

ریدایرکت‌های کلاینت ساید : کند بوده و قابل ذخیره نیست.

بهترین کار، دوری از ریدایرکت‌های کلاینت ساید است. شما برای بهینه‌سازی زمان بارگذاری صفحه‌ی وب می‌توانید کمی از ریدایرکت‌های سرور ساید استفاده کنید.

نتیجه‌گیری

همه وبسایتی سریع را دوست دارند. امیدوارم این مقاله توانسته باشد شما را به اندازه کافی در مورد اهمیت زمان بارگذاری صفحه متقاعد کرده باشد. اگر می‌خواهید عملکرد وبسایت خود را ارزیابی کنید، ابزارهای زیادی وجود دارد که می‌توانید از آن‌ها استفاده کنید. مثلاً Google Pagespeed Insights، Pingdom، YSlow و غیره.

هدف اصلی در اینجا مطلع شدن از مهمترین مشکلات است؛ نه اینکه به دنبال حل کردن مشکلاتی باشید که ابزار ارزیابی مشخص کرده است. پس از شناسایی بخش‌

های تاثیرگذار، باید اقدامات مربوطه را انجام دهید تا زمان بارگذاری صفحه خود را برای یک تجربه کاربری بهتر بهبود بخشید.

منبع