آموزش رفع خطای Avoid enormous network payloads برای افزایش سرعت سایت

آیا توی گزارش Page Speed Insights خطای «avoid enormous network payload» رو دریافت کردید؟

پس باید حجم صفحات سایتتون رو کم کنید.

بارهای بزرگ شبکه یا همون enormous network payload زمان بارگذاری سایتتون رو به شدت افزایش میدن، بنابراین هر چیزی که در جهت بهبود سرعت وب سایت شما باشه به رفع این مشکل کمک میکنه.

در این مقاله توضیح می‌دیم که enormous network payload چیه و چه چیزی باعث ایجاد این خطا میشه. همچنین، روش هایی برای رفع این خطا رو بهتون معرفی میکنم.

---

فهرست:

• خطای Avoid Enormous Network Payloads یعنی چه؟
• چگونه خطای Avoid Enormous Network Payloads را شناسایی کنیم؟
• این خطا چه تاثیری روی عملکرد سایت دارد؟
• روش رفع خطای Avoid Enormous Network Payloads در وردپرس
  • Cache مرورگر و فشرده سازی GZIP را فعال کنید
  • CSS استفاده نشده را حذف کنید
  • اجرای JS را به تاخیر بیندازید و JS استفاده نشده را حذف کنید
  • JS و CSS را فشرده کنید
  • بارگذاری تنبل را فعال کنید
  • تصاویر را به Webp تبدیل کنید
  • از فونت های کمتری استفاده کنید و آنها را بهینه کنید
• جمع بندی

---

خطای Avoid Enormous Network Payloads یعنی چه؟

خطای Avoid Enormous Network Payloads یعنی اندازه صفحه شما بیشتر از اون چیزیه که گوگل توصیه میکنه. صفحات سنگین خیلی دیرتر بارگذاری میشن، چونکه مروگر باید حجم بیشتری از داده ها رو باید دانلود کنه.

چه چیزی باعث این خطا میشود؟

وقتی اندازه کل صفحه بالاتر از ۱۶۰۰ کیلوبایت باشه، خطای “avoid enormous network payloads” به وجود میاد. پس برای رفع این خطا، باید اندازه صفحه رو کاهش دهید و حجم کل رو زیر ۱.۶ مگابایت نگه دارید.

میانگین بار شبکه یا همون network payload در جهان بین ۱۷۰۰ تا ۱۹۰۰ کیلوبایت هستش. Lighthouse گوگل درخواست‌های شبکه‌ای که بیش از ۵۰۰۰ کیلوبایت باشه رو به عنوان خطا نشون میده.

---

چگونه خطای Avoid Enormous Network Payloads را شناسایی کنیم؟

از Lighthouse (PageSpeed Insights یا GTMetrix) استفاده کنید تا فایل‌هایی که باعث بارگذاری عظیم شبکه میشن رو پیدا کنید. PageSpeed Insights نشون میده که کدوم نوع فایل (مثلا تصویر، CSS، JS) حجم زیادی داره و این فایل از کجا ارائه میشه.

---

این خطا چه تاثیری روی عملکرد سایت دارد؟

enormous network payload روی چهار چیز در وب سایت شما تاثیر میذاره:

• زمان بارگذاری – هرچه بار شبکه بیشتر باشه، صفحه بزرگتره و دانلود منابع بیشتر طول میکشه.

• The Largest Contentful Paint grade – بزرگترین رنگ محتوایی یکی از معیارهای هسته حیاتی وب هستش و میزان زمانی که طول میکشه تا بزرگترین عنصر به کاربر نشون داده بشه رو اندازه گیری میکنه. enormous network payload باعث میشه زمان نمایش بزرگترین محتوا به کاربر افزایش پیدا کنه و در نتیجه تجربه کاربری سایتتون ضعیف میشه.

• عملکرد در page speed insights– تست page speed insights هر نوع محتوایی که میشه بهینه‌‌ش کرد رو نشون میده. شما باید اندازه صفحه‌تون رو کاهش بدید تا امتیاز بالایی بگیرید و امتیازتون سبز بشه.

• نرخ تبدیل و تجربه کاربر در تلفن همراه. بار سنگین شبکه میتونه روی نرخ تبدیل تأثیر بذاره. اندازه صفحه بزرگ به دلیل منابع سنگین (مثل تصاویر بهینه نشده) باعث میشه کاربر از سایت شما خارج بشه. نرخ تبدیل در صفحاتی بیشتر هستش که زمان بارگذاریشون کمتر از دو ثانیه طول میکشه.

---

روش رفع خطای Avoid Enormous Network Payloads در وردپرس

برای جلوگیری از بارگذاری زیاد شبکه در وردپرس، باید اندازه صفحه رو کاهش بدید. Enormous Network Payloads و صفحات سنگین اغلب ناشی از ویدئوها، تصاویر، کدهای شخص ثالث یا فایل های CSS و JS بهینه نشده هستند.

در ادامه، هفت روش آسون برای کاهش حجم بار و رفع این اخطار رو بهتون معرفی میکنم.

Cache مرورگر و فشرده سازی GZIP را فعال کنید

استفاده از حافظه پنهان مرورگر باعث میشه enormous network payloads صفحات سایتتون کاهش پیدا کنه. برای اینکار میتونید از افزونه های وردپرس استفاده کنید. یکی از بهترین افزونه های فعالسازی حافظه پنهان WP Rocket هستش.

WP Rocket یکی از قدرتمندترین افزونه های کش برای وردپرسه که باعث میشه سرعت بارگذاری سایتتون بره بالا. WP Rocket به طور خودکار کش مرورگر رو در سایتتون پیاده سازی میکنه. همچنین فشرده سازی GZIP رو اعمال میکنه.

⛔مهم نیست که کدوم افزونه رو انتخاب می‌کنید، تنظیمات کش رو فعال کنید تا ببینید هر ویژگی چگونه روی امتیازات PSI و زمان بارگذاری تأثیر میذاره.

---

CSS استفاده نشده را حذف کنید

باید از بارگذاری CSS استفاده نشده در وب سایتتون جلوگیری کنید. استفاده از صفحه سازها مثل Elementor یا Divi باعث میشن تعداد زیادی کد “بلااستفاده” در صفحات سایتتون وجود داشته باشه، که منجر به صفحه سنگین تر و بار شبکه بیشتر میشه. با استفاده از ابزارهای آنلاین میتونید این CSS ها رو حذف کنید.

PurifyCSS online ابزاریه که باهاش میتونید با خیال راحت CSS بی مصرف صفحات سایتتون رو حذف کنید. این ابزار یه فایل CSS تمیز براتون تولید میکنه که میتونید به وردپرس اضافه‌ش کنید.

یکی دیگه از ابزارهایی که میتونید برای اینکار ازش استفاده کنید Unused CSS.com هستش. این ابزار یه فایل CSS تمیز براتون تولید میکنه که میتونید توی وردپرس آپلودش کنید.

باید بقیه مراحل رو دستی انجام بدید. پیدا کردن کدهای استفاده نشده آسونه، اما آپلود فایل جدید میتونه دشوار باشه.

با افزونه WP Rocket میتونید اینکارو فقط با یه کلیک انجام بدید:

---

اجرای JS را به تاخیر بیندازید و JS استفاده نشده را حذف کنید

شما میتونید با اولویت بندی جاوا اسکریپتی که ابتدا باید بارگذاری بشن، از enormous network payloads جلوگیری کنید. به عبارت دیگه، باید JS استفاده نشده رو حذف کنید. فایل های JS نباید تا زمان اولین تعامل کاربر بارگیری بشن (تعامل JS مثل پیمایش، کلیک کردن روی یه دکمه و…).

کاهش تعداد عناصر در صفحه اندازه صفحه و بار شبکه رو کاهش میده.

میتونید از پلاگین های مختلف برای اینکار استفاده کنید:

✅اگر به دنبال یه افزونه رایگان برای به تاخیر انداختن فایل‌های جاوا اسکریپت هستید، از Flying Script یا WP Meteor استفاده کنید.

✅راه دیگه استفاده از WP Rocket هستش. این افزونه به شما اجازه میده تا اجرای جاوا اسکریپت را با چند کلیک توی برگه “بهینه سازی فایل” به تاخیر بندازید.

---

JS و CSS را فشرده کنید

فشرده سازی یعنی اینکه تمام کاراکترهای غیر ضروری از CSS یا JS رو حذف کنید بدون اینکه تغییری توی عملکردشون ایجاد بشه. این یه تکنیک بهینه سازی هستش که به کاهش حجم بار شبکه کمک میکنه. با استفاده از ابزارهای آنلاین میتونید فایل های JS و CSS رو کوچیک کنید، برای اینکار مراحل زیر رو دنبال کنید:

مرحله ۱. کد منبع CSS/JS خودتون رو جایگذاری کنید یا فایل کد منبع رو آپلود کنید
مرحله ۲. برای کوچک کردن یا فشرده کردن کد CSS/JS روی دکمه ای کلیک کنید
مرحله ۳. خروجی کد کوچک شده را کپی کنید یا فایل کد کوچک شده را دانلود کنید
مرحله ۴. همه چیز را دوباره در وردپرس آپلود کنید.

Toptal (که قبلا به عنوان JS/CSS Minifier شناخته می شد) ابزاری کاربرپسند هستش که به شما امکان میده کدهای CSS و JS خودتون رو کوچک کنید:

CleanCSS.com هم یه منبع آنلاین بصری برای فشرده سازی و کوچک کردن CSS و JS هستش.

با افزونه wp rocket هم میتونید فایل های css و جاوا اسکریپت سایتتون رو کوچک کنید.

---

بارگذاری تنبل را فعال کنید

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

با افزونه WP Rocket میتونید ویژگی بارگذاری تنبل برای تصاویر رو در سایت خودتون فعال کنید.

---

تصاویر را به Webp تبدیل کنید

تصاویر سنگین یکی از مهم ترین دلایل خطای Avoid enormous network payloads هستند. وقتی تصاویر سایتتون رو به WebP تبدیل میکنید، صفحه خیلی سبک تر میشه. کلا باید تصاویر سایتتون بهینه باشه، تا بارگذاری هم سریعتر انجام بشه. تغییر اندازه تصویر با توجه به صفحه و فشرده سازی اونها تکنیک های بهینه سازی تصاویر هستند.

دو تا ابزاری که در ادامه میخوام بهتون معرفی کنم تقریبا یکسان هستند، یعنی تصویر مورد نظرتون رو در اون آپلود میکنید و یه کلیک میکند تا فشرده بشه. بعدش میتونید عکس فشرده شده رو دوباره در کتابخانه وردپرس آپلود کنید.

TinyPNG و Compressor.io برای فشرده کردن عکساتون عالین.

Imagify هم یه افزونه رایگان برای بهینه سازی تصاویر سایت هستش که عکسای سایتتون رو به WebP تبدیل میکنه.

بیشتر بخوانید: چرا Webp؟

---

از فونت های کمتری استفاده کنید و آنها را بهینه کنید

PageSpeed Insights توصیه میکنه که اگه می‌خواهید از بار عظیم شبکه جلوگیری کنید، از فونت‌های کمتری استفاده کنید. برای بهینه‌سازی فونت‌ها و بارگذاری سریع‌تر اونها میتونید از افزونه WP Rocket استفاده کنید:

WP Rocket به طور خودکار ویژگی font-display: swap رو اعمال میکنه.

---

جمع بندی

با رفع خطای Avoid enormous network payloads میتونید سرعت بارگذاری سایتتون رو افزایش بدید، در نتیجه تجربه کاربری سایتتون افزایش پیدا میکنه. تجربه کاربری یکی از مهم ترین فاکتورهایی هستش که گوگل برای رتبه دادن به سایت ازش استفاده میکنه.

در این مقاله در مورد رفع خطای Avoid enormous network payloads برای افزایش سرعت سایت صحبت کردیم. خوشحالیم که تا انتهای مقاله همراه ما بودید، اگر فکر میکنید اطلاعاتی وجود دارد که در مقاله گفته نشده با ما در کامنت به اشتراک بگذارید تا همه کاربرها به خوبی از اطلاعات شما استفاده کنند. در صورت داشتن هرگونه سوال با تیم پشتیبانی ما در ارتباط باشید.