افزایش سرعت سایت

تکنیک‌هایی برای بهبود سرعت وب‌سایت

افزایش سرعت سایت

بررسی اجمالی

در طراحی وب مدرن، سرعت یکی از مهمترین دغدغه‌های طراحان، برنامه‌نویسان، مدیران سئو و … است. سرعت سایت ارتباط مستقیمی با رضایت کاربر ، بهبود رتبه در موتورهای جستجو و در نهایت فروش سایت شما دارد، بنابراین اندازه گیری، نظارت و بهبود صفحات وب در جهت افزایش سرعت سایت و سریع ماندن آن باید به صورت دائم در برنامه ریزی شما قرار گیرد.

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

مقدمه‌ای بر سرعت سایت

  • چرا سرعت مهم است؟
  • سرعت چیست ؟
  • چطور سرعت سایت را بسنجیم؟
  • چطور سریع بمانیم؟
  • محاسبه کارایی با مدل RAIL

تنظیم بودجه کارایی

  • بودجه‌های کارایی سایت
  • اولین بودجه
  • بودجه کارایی را در فرایند توسعه خود بگنجانید
  • استفاده از Lighthouse برای محاسبه کارایی
  • محاسبه کارایی با مدل RAIL
  • استفاده از bundlesize به همراه Travis CI
  • استفاده از ربات Lighthouse برای تنظیم بودجه
  • نظارت بر کارایی سایت با Lighthouse CI

بهینه سازی تصاویر

  • انتخاب فرمت مناسب تصاویر
  • انتخاب صحیح میزان فشرده سازی تصاویر
  • استفاده از Imagemin برای فشرده سازی تصاویر
  • استفاده از ویدئو بجای gif برای افزایش سرعت بارگذاری
  • ارائه تصاویر واکنشگرا
  • ارائه تصاویر با ابعاد صحیح
  • استفاده از تصاویر Webp
  • استفاده از CDN برا بهینه سازی تصاویر

بارگذاری تنبل تصاویر و ویدئوها

  • استفاده از بارگذاری تنبل برای بهبود سرعت بارگذاری
  • بارگذاری تنبل تصاویر
  • بارگذاری تنبل ویدئوها
  • بارگذاری تنبل سمت مرورگر
  • استفاده lazysizes برای بارگذاری تنبل تصاویر

بهنیه سازی جاوا اسکریپت

  • بارگذاری فوری با الگوی PRPL
  • کاهش بار جاوا اسکریپت با تقسیم کد
  • حذف کدهای بلا استفاده
  • کم کردن و فشرده سازی بار شبکه
  • کد نویسی مدرن برای افزایش سرعت بارگذاری
  • استفاده از کدهای جاوا اسکریپت مدرن برای سرعت بیشتر
  • کاهش استفاده از CommonJS برای کاهش حجم نهایی

بهنیه سازی تحویل منابع (resource delivery)

  • شبکه های تحویل محتوا (CDN)
  • اولویت بندی منابع
  • پیش بارگذاری منابع بحرانی (مهم) برای بهبود سرعت بارگیری
  • برای بهبود درک صفحه سرعت اتصال را بالا ببرید
  • واکشی منابع برای سرعت بخشیدن به ناوبری
  • پخش سریع تر با پیش بارگذاری صدا و ویدئو