هفت راهکار بارگذاری سریع تر وبسایت برای بازدیدکنندگان — به زبان ساده

۲۰۸ بازدید
آخرین به‌روزرسانی: ۲۷ اردیبهشت ۱۴۰۲
زمان مطالعه: ۷ دقیقه
هفت راهکار بارگذاری سریع تر وبسایت برای بازدیدکنندگان — به زبان ساده

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

کاهش اندازه واقعی وب‌سایت

 Size of Your Website

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

بیش از 70 درصد صفحه‌های وب موبایل بالاتر از 1 مگابایت حجم دارند و 12 درصد نیز بالاتر از 4 مگابایت هستند. به خاطر داشته باشید که دانلود یک صفحه 1.5 مگابایتی در سرعت مناسب شبکه 3G به 7 ثانیه زمان نیاز دارد. بهترین رویه این است که حجم صفحه‌های خود را زیر 0.5 مگابایت حفظ کنید.

تفاوت بین فرمت‌های JPG ،PNG و GIF را بشناسید و مطمئن شوید که از مورد مناسب برای تصاویر وب‌سایت خود استفاده می‌کنید. بر اساس گزارش وب‌سایت GlobalStats، در سال 2018 بیشترین دقت صفحه نمایش‌هایی که کاربران استفاده کرده‌اند به صورت زیر بوده است:

  • 22.5% از دقت صفحه نمایش 360×640 (موبایل) استفاده کرده‌اند.
  • 11.73% از دقت صفحه نمایش 768×1366 استفاده کرده‌اند.
  • 8.26% از دقت صفحه نمایش 1080×1920 استفاده کرده‌اند.
  • 4.91% از دقت صفحه نمایش 667×357 (موبایل) استفاده کرده‌اند.
  • 2.94% از دقت صفحه نمایش 900×1440 استفاده کرده‌اند.

این تعداد بیش از 50% از همه کاربران وب را تشکیل می‌دهد، بنابراین باید این آمار را در هنگام افزودن تصاویر به وب‌سایت در نظر داشته باشید.

وب‌سایت خود را برای موبایل طراحی کنید

بر اساس تحقیقی که از سوی گوگل در سال گذشته در مورد سرعت موبایل صورت گرفته است:

میانگین زمان موردنیاز برای بارگذاری یک صفحه فرود موبایل 22 ثانیه بوده است. با این حال 23% از بازدیدکنندگان وب‌سایت‌های موبایل صفحه‌ای را که بارگذاری آن بیش از 3 ثانیه طول بکشد ترک می‌کنند. این یک مشکل عمده است.

بیش از 75% از وب‌سایت‌های موبایل روی یک اتصال 3G در مدتی بیش از 10 ثانیه بارگذاری می‌شوند. از آنجا که بیش از نیمی از ترافیک وب از منبع دستگاه‌های موبایل ناشی می‌شود، این وضعیت یک مشکل بزرگ است.

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

همچنین می‌توانید از ابزارهایی مانند bMobilized یا Duda Mobile برای تبدیل وب‌سایت دسکتاپ به نوع موبایل استفاده کنید. با این حال بهترین رویه این است که وب‌سایت موبایل را همیشه جدا نگه‌دارید تا مطمئن شوید که بهترین تجربه کاربری را در اختیار کاربران موبایل قرار می‌دهید.

همچنین باید یک نسخه ساده شده از وب‌سایت را با استفاده از پروژه Accelerated Mobile Pages گوگل که به اختصار AMP نامیده می‌شود طراحی کنید. با استفاده از AMP سرعت بارگذاری صفحه‌ها روی گوشی‌های موبایل افزایش می‌یابد. راهنمایی‌های صریحی در مورد جاوا اسکریپت و CSS وجود دارند؛ اما منافع آن‌ها ناچیز هستند.

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

وب‌سایت خود را minify کنید

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

اگر از نسخه HTTP/1.1 استفاده می‌کنید، باید فایل‌های CSS ،HTML و جاوا اسکریپت خود را minify کنید. اگر از یک CDN مانند Cloudflare استفاده می‌کنید، یک برگه خاص برای بهبود سرعت وجود دارد که در آن گزینه‌ای به نام Auto Minify قرار داده شده است. اگر از یک سرویس آنلاین وب‌سایت‌ساز مانند Squarespace یا Weebly استفاده کرده‌اید، این کار احتمالاً قبلاً صورت گرفته است.

Minify

اما پس از هرگونه ترکیب منابع یا minify کردن همه چیز وب‌سایت خود را تست کید تا از بارگذاری صحیح آن مطمئن شوید. گزینه‌های مختلف را تست کنید و ببینید کدام یک برای وب‌سایت شما بهتر است. در هر صورت دقت کنید که اگر از HTTP/2 استفاده می‌کنید، احتمالاً minify یا ترکیب کردن منابع کمکی به بهبود سرعت بارگذاری صفحه نمی‌کند.

اجتناب از بارگذاری اسکریپت‌هایی که لازم نیستند

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

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

شما می‌توانید از defer یا async برای به تأخیر انداختن بارگذاری فایل‌های جاوا اسکریپت خاص استفاده کرده و فشار روی دستگاه بازدیدکننده را کاهش و همچنین سرعت بارگذاری صفحه‌ها را افزایش دهید. همچنین در مورد اسکریپت‌های کوچک می‌توان آن‌ها را مستقیماً درون سندهای HTML به صورت inline آورد. البته این کار در صورت استفاده از HTTP/2 موجب افزایش سرعت نمی‌شود و شاید سرعت را کاهش نیز بدهد.

Async به مرورگر اعلام می‌کند که به تجزیه سند HTML در زمانی که فایل‌های جاوا اسکریپت همچنان در حال دانلود هستند ادامه بدهد. بدین ترتیب مکث موردنیاز در زمان دانلود شدن کامل فایل رخ می‌دهد.

در عین حال، defer به مرورگر اعلام می‌کند که فایل‌های جاوا اسکریپت را پس از این که مرورگر کار تجزیه کل سند را تمام کرد اجرا کند. مرورگر به طور پیش‌فرض تجزیه سندهای HTML را زمانی که فایل‌های جاوا اسکریپت واکشی شده اجرا شوند متوقف می‌کند.

Inline کردن کدهای جاوا اسکریپت در فایل‌های HTML موجب می‌شود که تعداد فایل‌های موردنیاز مرورگر برای دانلود پیش از نمایش صفحه کاهش یابد. شما می‌توانید کدهای جاوا اسکریپت را با افزودن محتوای هر فایل جاوا اسکریپت بین تگ‌های <script> به صورت inline در آورید. در این مورد توجه داشته باشید که در صورت استفاده از HTTP/2 این کار کمک چندانی به بهبود سرعت بارگذاری صفحه نمی‌کند.

شما می‌توانید بارگذاری ابزارهای Google Analytics ،Facebook Pixel و دیگر ابزارهای تحلیلی را بدون این که تأثیری روی کارکرد صفحه داشته باشد به تأخیر بیندازید. در نهایت باید گفت که می‌بایست بررسی کنید آیا کدهای ردگیری، ابزارهای تحلیلی، امکانات اضافی و تبلیغاتی که روی صفحه دارید واقعاً ضروری هستند یا نه. در حد امکان سعی کنید از گزینه‌های سبک‌تر استفاده کنید و اگر ارزشی برای بازدیدکنندگان شما ندارند حذف کنید.

استفاده از یک ابزار کَش و CDN

CDN

«شبکه تحویل محتوا» (Content Delivery Network) یا به اختصار CDN وب‌سایت شما را روی سرورهایی در سراسر جهان کپی می‌کند و بدین ترتیب زمان مورد نیاز برای انتقال داده‌ها را با عرضه وب‌سایت از محل جغرافیایی نزدیک‌تر به کاربر کاهش می‌دهد. محتوای استاتیک را نیز می‌توان از سوی سرورهای CDN کش کرده و تحویل داد.

کلودفلیر یکی از بزرگ‌ترین CDN های موجود است؛ اما Akamai و Amazon CloudFront نیز جایگزین‌های مناسبی محسوب می‌شوند. باید اطمینان حاصل کنید که از کش کردن در مرورگر نیز برای بهبود سرعت بارگذاری وب‌سایت خود برای بازدیدکنندگان تکراری بهره می‌گیرید. کش کردن مرورگر با دانلود کردن فایل‌های وب‌سایت روی دستگاه محلی کاربر انجام می‌پذیرد.

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

از شر افزونه‌های غیرضروری خلاص شوید

افزونه‌ها تنها در موارد ضرورت باید استفاده شوند. این وضعیت در هر حالت باید در نظر شما باشد. در مورد هر ویژگی که می‌توان با افزودن کد یا CSS اضافه کرد، نباید از افزونه استفاده شود. برای نمونه می‌توانید از روش‌های تزریق کد و همچنین سفارشی‌سازی CSS در پلتفرم‌های مختلف استفاده کنید.

افزونه‌ها می‌توانند موجب مصرف بالای CPU یا حافظه در سرور شوند و این امر می‌تواند موجب کند یا متوقف شدن بارگذاری وب‌سایت شود. اگر از وردپرس استفاده می‌کنید، این احتمال وجود دارد که از همه ویژگی‌های داخلی آن بهره نمی‌گیرید و بنابراین می‌توانید این موارد را با استفاده از افزونه‌ای به kام Clearfy غیرفعال کنید.

همواره افزونه‌هایی که استفاده می‌کنید را در نظر داشته باشید و اگر از برخی امکانات محدود یک افزونه استفاده می‌کنید بهتر است که کلاً آن را حذف کنید و به جای آن از افزونه‌های سبک‌تر برای انجام همان کار بهره بگیرید.

تنظیم سرور برای افزایش سرعت وب‌سایت

تأخیر سرور تأثیر منفی زیادی روی سرعت بارگذاری صفحه و رتبه صفحه (PageRank) وب‌سایت شما دارد. گوگل توصیه می‌کند که پارامتر «زمان بارگذاری نخستین بایت» (Time to First Byte) یا TTFB باید کمتر از 1.3 ثانیه باشد. این طولانی‌ترین تأخیری است که یک دستگاه پیش از آغاز دانلود کردن یک صفحه باید داشته باشد. با این حال زمان میانگین TTFB صفحه وب‌سایت‌ها بالاتر از 2 ثانیه است که بسیار بیشتر از مقادیر توصیه شده محسوب می‌شود.

میزبان‌های اشتراکی معمولاً دلیل بروز این مسئله هستند؛ اما برخی تنظیمات روی سرور نیز می‌توانند به بهبود زمان پاسخ‌دهی سرور کمک کنند.

  • از آخرین نسخه PHP که وب‌سایت شما پشتیبانی می‌کند استفاده کنید. برای نمونه آخرین نسخه 7.2 از PHP بهبودهای مناسبی برای سرعت ارائه کرده است.
  • از حالت «Keep-Alive» استفاده کنید.
  • HTTP/2 را فعال کنید.
  • از مزیت امنیت انتقال صریح HTTP یا به اختصار HSTS استفاده کنید.
  • پشتیبان‌گیری‌های کامل خود را به زمان شب موکول کنید.

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

تست وب‌سایت

Test

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

در ادامه برخی از ابزارهای آنلاین محبوب برای تست وب‌سایت را ارائه کرده‌ایم:

  • varvy.com: این ابزار سرعت بارگذاری و عملکرد صفحه‌های دسکتاپ و موبایل را اندازه‌گیری می‌کند و راهنمایی‌های ارزشمندی در مورد بهبود وب‌سایت ارائه می‌کند.
  • Google PageSpeed Insight: این ابزار گوگل که اخیراً به‌روزرسانی شده است سرعت بارگذاری صفحه‌های وب‌سایت را اندازه‌گیری کرده و پیشنهادهایی در جهت بهبود آن ارائه می‌کند.
  • GTmetrix: این وب‌سایت یک ابزار عالی با توصیه‌های قابل اجرا است.
  • WebPageTest: این ابزار آنلاین وب‌سایت شما را با استفاده از دستگاه‌های مختلف و سیستم‌های عامل متفاوت از مکان‌های گوناگون تست می‌کند.
  • Pingdom: این ابزار کاملاً محبوب مشابه WebPageTest است و رابط کاربری زیبایی دارد.

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

اگر این مطلب برای شما مفید بوده است و علاقه‌مند به یادگیری مباحث مشابه هستید، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
makeuseof
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *