جلسه ۱۷ – رفع ارور Avoid enormous network payloads

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش GTmetrix میزفا همراه شما هستیم. تو مقاله قبلی درباره رفع خطای ()Avoid document.write صحبت کردیم و در این مقاله به آموزش برطرف کردن مشکل Avoid enormous network payloads در ابزار GTmetrix جدید می‌پردازیم. خطای Avoid enormous network payloads اشاره به حجم منابع استفاده شده در صفحه داره و میگه از منابع و فایل‌های با حجم زیاد استفاده نکنید. رفع خطای Avoid enormous network payloads نیازمند توجه و برطرف کردن چندین خطای دیگه ست که در ادامه بهشون اشاره می‌کنیم. اما حل این مشکل خیلی هم سخت نیست و تو بیشتر موارد میشه حتی با استفاده از چند افزونه مناسب، این خطا رو برطرف کرد.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Avoid enormous network payloads

میزان سختی: ***
روی چه مواردی تاثیر میذاره: FCP و LCP و TBT

چرا مشکل Avoid enormous network payloads ایجاد میشه؟

همونطور که گفتیم، مشکل Avoid enormous network payloads مربوط به حجم منابع استفاده شده در صفحه ست. منظور از منابع، تمام عکس‌ها، ویدئوها، فایل‌های CSS و JavaScript و… هست. موقعی که صفحه داره لود میشه، مرورگر باید تمام منابع موجود در صفحه رو دانلود کنه. طبیعیه که هرچقدر حجم منابع بیشتر باشه، دانلود شدن اونها بیشتر طول می‌کشه و در نتیجه زمان لود صفحه بیشتر خواهد بود. این یعنی عدم بهینه سازی سرعت سایت و تجربه کاربری ضعیف‌تر.

در خطای Avoid enormous network payloads سایت جی تی متریکس از عبارت Network Payloads استفاده کرده که می‌تونیم اون رو ظرفیت ترابری (انتقال) شبکه معنی کنیم. اما به‌هرحال منظور از این خطا همین موضوع هست که از انتقال فایل‌های سنگین در شبکه جلوگیری کنیم.

اهمیت خطای Avoid enormous network payloads در GTmetrix مثل سایر خطاها بستگی به وضعیت صفحه داره و ممکنه برای یک صفحه اهمیت پایین (Low) داشته باشه و برای صفحه دیگه‌ای اهمیت خیلی زیاد (High). با این حال زمانی که حجم صفحه بیشتر از 2.667 مگابایت باشه، GTmetrix این موضوع رو یه خطای اساسی در نظر می‌گیره. با کلیک روی این خطا در گزارش Structure جی تی متریکس با صحنه‌ای شبیه به عکس زیر مواجه می‌شیم:

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

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

بهتره سعی کنیم حجم کلی صفحه رو کمتر از 1,600 کیلوبایت حفظ کنیم. در این صورت حتی اگه کاربران ما اینترنت 3G هم داشته باشند، این امکان وجود داره که معیار کلیدی TTI یا Time to Interactive کمتر از ۱۰ ثانیه باشه. اگه با این معیار آشنایی ندارید، می‌تونید مقاله Time to Interactive چیست رو مطالعه کنید تا با TTI و روش بهینه سازی اون آشنا بشید.

چطور خطای Avoid enormous network payloads را برطرف کنیم؟

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

• اگه حجم HTML زیاد باشه، باید HTML رو فشرده سازی کنیم. هرچند معمولا کمتر با چنین مشکلی مواجه می‌شیم، اما در صورت نیاز می‌تونید مقاله رفع خطای Minify HTML رو مطالعه کنید تا با روش اصولی کاهش حجم HTML آشنا بشید.
• برای کاهش حجم فایل‌های CSS میشه از سایت‌های مرتبط یا افزونه‌ها (برای سایت‌های وردپرس) استفاده کرد. قبلا در مقاله رفع خطای Minify CSS کاملا این موضوع رو بررسی کردیم.
• برای کاهش حجم فایل‌های JavaScript هم (مثل CSS) میشه از ابزارهای آنلاین یا افزونه‌های مناسب در وردپرس استفاده کرد. تو مقاله برطرف کردن خطای Minify JavaScript بهترین ابزارهای موجود رو معرفی کردیم.
• برای کاهش حجم عکس‌های سایت، روش‌های مختلفی وجود داره. از بهینه سازی اندازه عکس گرفته تا استفاده از فوتوشاپ و همچنین سایت‌های آنلاین و افزونه‌های وردپرس؛ تمام این موارد رو در مقاله بهینه سازی تصاویر سایت به سادگی آموزش دادیم.
• برای رفع ارور در سایت های وردپرسی پیشنهاد میشه مقاله بهترین افزونه برای سرعت سایت وردپرس مطالعه کنید و بهتون کمک زیادی برای رفع اکثر خطاهای سایت جی تی متریکس میکنه.

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

دیرتر لود کردن منابع غیرضروری

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

برای استفاده از این تکنیک، برای عکس‌های سایت میشه از متد Lazy Load یا لود تنبل و برای فایل‌های JavaScript از متدهای Defer و Async استفاده کرد. تو مقاله رفع خطای Defer parsing of JavaScripts این موضوع رو کاملا موشکافی کردیم.

فعال سازی Gzip Compression

با فعال کردن فشرده سازی gzip برای سایتمون، می‌تونیم فایل‌های HTML و CSS و JavaScript رو تا حدود ۷۰ درصد فشرده سازی کنیم. تمام مرورگرهای مدرن و مرسوم امروزی از تابع gzip پشتیبانی می‌کنند و به شکل اتوماتیک درخواست HTTP به سمت سرور برای Gzip Compression ارسال می‌کنند. استفاده از این تابع می‌تونه خیلی به فشرده سازی موثر این فایل‌ها کمک کنه. برای آشنایی با روش صحیح فعال سازی gzip مقاله رفع خطای Enable gzip compression رو مطالعه بفرمایید. همه نکات لازم رو تو این مقاله توضیح دادیم. فعال سازی تابع gzip به‌طور مستقیم در حل مشکل Avoid enormous network payloads موثره.

استفاده از کش (Cache) مناسب

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

کمک گرفتن از متخصص سئو یا تیم سئو

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

جمع بندی

در این مقاله میزفا درباره برطرف کردن خطای Avoid enormous network payloads در GTmetrix جدید صحبت کردیم. ما در ابتدا گفتیم که استفاده از فایل‌های حجیم می‌تونه باعث کند شدن سرعت لود صفحه و افزایش هزینه اینترنت کاربران و در نتیجه تضعیف UX یا تجربه کاربری بشه. سپس روش‌هایی رو برای حل کردن مشکل فایل‌های با حجم بالا به شما عزیزان آموزش دادیم. امیدوارم این آموزش براتون مفید بوده باشه. تو مقاله بعدی درباره خطای Avoid long main-thread tasks و اهمیتش در بهینه سازی سرعت صحبت خواهیم کرد.

اگه سوالی دارید می‌تونید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل جواب بدیم.

سایر مقالات مربوط به GTMetrix: