آموزش سئو پیشرفتهآموزش سئو فنیخطاهای GTMetrix

جلسه ۲۵ – رفع ارور Eliminate render-blocking resources

آموزش حل مشکل Eliminate render-blocking resources در جی تی متریکس

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۲۴ درباره رفع خطای Efficiently encode images صحبت کردیم و در این جلسه به آموزش حل مشکل Eliminate render-blocking resources در ابزار جی تی متریکس جدید می‌پردازیم. این خطا به منابعی اشاره می‌کنه که مانع Render شدن صفحه میشن و برطرف کردنش خیلی مهمه و تاثیر زیادی در بهبود معیار First Paint و نمایش سریع‌تر محتوا به کاربران داره. خوشبختانه رفع ارور Eliminate render-blocking resources خیلی سخت نیست و شاید بشه با استفاده از افزونه‌ها در سایت‌های وردپرسی این مشکل رو برطرف کرد. در ادامه روش‌های لازم رو ارائه می‌کنیم.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Eliminate render-blocking resources

میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: First Paint و TBT

علت ایجاد خطای Eliminate render-blocking resources چیست؟

وظیفه مرورگرها (به‌طور خلاصه) اینه که کدهای صفحات ما رو تجزیه و تحلیل کنند و منابعی که در این کدها قرار داره رو دانلود کنند. سپس این کدها رو به پیکسل‌های قابل درک برای کاربران تبدیل کنند و اونها رو روی صفحه، نمایش بدن. به این فرآیند خیلی مهم، Render کردن صفحه میگن. پس میشه گفت وظیفه اصلی مرورگر Render کردن صفحه و نمایش محتوای صفحه به کاربران هست. در نتیجه هر عاملی که باعث ایجاد وقفه طولانی در Rendering بشه، یه عامل مزاحم هست و در صورت امکان باید اون رو حذف کرد یا اجراش رو به تعویق انداخت. این مسئله، ماهیت و دلیل ایجاد خطای Eliminate render-blocking resources در جی تی متریکس رو بیان می‌کنه.

اصولا هر نوع فایلی ممکنه باعث ایجاد وقفه در Render شدن صفحه بشه. اما به‌طور کلی و در بیشتر مواقع فایل‌های JavaScript و CSS هستند که باعث ایجاد وقفه میشن یا اصطلاحا render-blocking هستند. برای مثال زمانی که مرورگر داره کدهای صفحه‌مون رو خط به خط می‌خونه، ناگهان به یه تگ اسکریپت می‌رسه. در حالت عادی مرورگر باید فایل رو دانلود، تجزیه و اجرا کنه تا بتونه ادامه کدهای سند HTML رو بررسی کنه. به این ترتیب وجود چنین منابعی، Render شدن صفحه رو متوقف می‌کنه و هرچقدر تعداد این منابع بیشتر باشه، ارور Eliminate render-blocking resources هم بیشتر به چشم می‌خوره و باعث عدم بهینه سازی سرعت سایت میشه.

شاید زمانی که می‌گم این منابع باعث توقف در Rendering میشن، براتون خیلی ملموس نباشه که دقیقا چه مشکلی پیش میاد. همونطور که اشاره کردم، خطای Eliminate render-blocking resources باعث بالا رفتن زمان First Paint میشه. First Paint لحظه‌ایه که اولین پیکسل‌ها روی صفحه نمایش داده میشه. پس دقت کنید که هرچقدر زمان First Paint بالاتر بره، کاربر باید زمان بیشتری به یه صفحه خالی و بدون هیچ‌گونه محتوایی خیره بشه و این یعنی یه تجربه کاربری خیلی ضعیف.
وجود ارور Eliminate render-blocking resources باعث میشه کاربر لود شدن صفحه رو به‌صورت پیوسته نبینه. یعنی تا چندین ثانیه یه صفحه خالی نمایش داده میشه و ناگهان محتوای متنی و گرافیکی قابل رویت میشه. اما این نوع لود شدن صفحه خوب نیست. اگه سرعت لود سایت ما بهینه باشه، منابع باید به مرور و به‌صورت مستمر و دائمی نمایش داده بشن تا کاربر متوجه بشه صفحه داره لود میشه و مشکلی وجود نداره. به تصویر زیر دقت کنید.

اثر Eliminate render-blocking resources در لود
تفاوت لود پیوسته و غیرپیوسته (منبع عکس)

در تصویر بالا، محتوا به مرور و به‌صورت پیوسته نمایش داده میشه و باعث میشه کاربر بتونه مواردی رو مشاهده کنه تا سایر منابع لود بشن. اما تو تصویر پایین، کاربر تا چندین ثانیه هیچ محتوایی (حتی رنگ پس زمینه) رو نمی‌بینه و چه بسا که از صفحه خارج بشه یا بخواد صفحه رو Reload کنه. خطای Eliminate render-blocking resources می‌تونه عامل بروز چنین مشکلی در UX باشه.

ارور Eliminate render-blocking resources دقیقا چه زمانی ایجاد میشه؟

خب تا اینجا با ماهیت ارور Eliminate render-blocking resources و اثرات مخربش آشنا شدیم و یاد گرفتیم به‌طور کلی چه فایل‌هایی باعث ایجاد render-blocking میشن. حالا می‌خوایم ببینیم این خطا دقیقا چه زمانی ایجاد میشه.

همونطور که گفتیم، فایل‌های CSS و JavaScript اصلی‌ترین منابعی هستند که باعث ایجاد خطای Eliminate render-blocking resources در جی تی مترکیس و سایر ابزارهای تست سرعت سایت مثل Lighthouse گوگل میشن. در صورتی که در کدهای صفحه‌مون یکی از موارد زیر وجود داشته باشه، باعث مشکل Eliminate render-blocking resources در جی تی متریکس میشه. تعریف Lighthouse هم برای این خطا مشابه همینه و یه مقدار تفاوت داره:

  • تگ‌های <script> که تو <head> باشند اما ویژگی‌های defer یا async رو نداشته باشند.
  • تگ‌های <“link rel=”stylesheet> که ویژگی‌های disabled یا media نداشته باشند.
  • تگ‌های <“link rel=”import> که ویژگی async نداشته باشند.

با کلیک کردن روی خطای Eliminate render-blocking resources در گزارش Structure جی تی متریکس لیست منابعی که باعث ایجاد این خطا شدند قابل مشاهده ست و این به ما دیدگاه خوبی میده که کدوم فایل‌ها باعث render-blocking شدند و نیاز به بهینه سازی دارند. گاهی اوقات ارور Eliminate render-blocking resources می‌تونه مهم‌ترین مشکل در بهینه سازی سرعت سایت ما باشه. مثل نمونه زیر که می‌بینید این خطا تا بیش از ۹ ثانیه تاخیر ایجاد کرده. تاثیر خطای Eliminate render-blocking resources روی TBT در عکس مشخص شده. جالبه بدونید First Paint این صفحه ۱۹.۳ ثانیه هست!!

مثال خطای Eliminate render-blocking resources
مثال خطای Eliminate render-blocking resources

چطور خطای Eliminate render-blocking resources را برطرف کنیم؟

خب رسیدیم به بخش مهم این مقاله میزفا یعنی روش برطرف کردن خطای Eliminate render-blocking resources در جی تی متریکس. بیشتر روش‌هایی که در ادامه می‌گیم نیاز به تخصص و تجربه در برنامه نویسی داره. اما بعضی با کمک بعضی از افزونه‌ها هم شاید بشه این خطا رو تا حدی رفع کرد که بهش اشاره خواهیم کرد.

۱. انتقال تگ‌ها به انتهای HTML

در توضیحات ابتدای این مقاله گفتیم که مشکل اصلی منابعی که باعث render-blocking میشن اینه که وقتی مرورگر موقع بررسی سند HTML به این منابع می‌رسه، باید برای دانلود و اجرا کردنشون Rendering رو متوقف کنه. پس اگه چنین فایل‌هایی رو به انتهای سند HTML منتقل کنیم، مشکل تا حدی برطرف میشه. البته انجام این روش نیازمند آگاهی از وضعیت وضعیت کدها و منابع صفحه ست. همچنین باید به گزارش Structure توجه کنیم و ببینیم کدوم منابع باعث ایجاد مشکل Eliminate render-blocking resources شدند. اما در هر صورت انتقال تگ‌های <script> و <link> به انتهای HTML باعث میشه اول منابع ضروری صفحه لود بشن و First Paint زودتر انجام بشه و تجربه کاربری یا UX بهبود پیدا کنه. البته باز هم تاکید می‌کنم که تگ‌هایی که به انتها منتقل میشن، نباید جزو منابع ضروری برای لود اولیه صفحه باشند.

۳. استفاده از ویژگی defer یا async

در این مقاله چندین بار به Attribute ها یا ویژگی‌های defer و async اشاره کردیم. این ویژگی‌ها دانلود و اجرای منابع مورد نظر رو به تعویق می‌اندازند و یا باعث میشن همزمان که بقیه سند HTML داره بررسی میشه، منابع هم دانلود بشن. خلاصه که باعث میشن منابع دیگه render-blocking نباشند و ارور Eliminate render-blocking resources برطرف بشه. البته به همین سادگی هم نیست و باز هم باید از طراحی کدهای صفحه و همچنین میزان ضروری بودن هر کدوم از منابع آگاهی کامل داشته باشیم و اینطور نیست که بتونیم برای تمام تگ‌های <script> و <link> از این ویژگی‌ها استفاده کنیم. توضیحات بیشتر رو آقای آریافر تو مقاله رفع خطای Defer parsing of JavaScript با رسم شکل و معرفی چند افزونه خوب برای وردپرس دادند. پیشنهاد میشه مطالعه بفرمایید.

۳. جدا کردن CSS با ویژگی media

از اونجایی که تقریبا تمام فایل‌های CSS از نوع render-blocking محسوب میشن، باید تا جایی که میشه با روش‌های مناسب اونها رو حذف یا بهینه سازی کنیم. یکی از این روش‌ها اینه که با استفاده Attribute یا ویژگی media فایل‌های استایل دهی رو براساس نوع دستگاه‌ها (موبایل، دسکتاپ و…) دسته بندی کنیم. در این صورت مرورگر فقط فایل‌هایی رو بررسی می‌کنه که متناسب با نوع دستگاه کاربر باشند. بنابراین فایل‌های CSS اضافی حذف و خطای Eliminate render-blocking resources تا حدی برطرف میشه.

۴. سایر روش‌ها

روش‌های دیگه‌ای هم برای بهینه سازی ارور Eliminate render-blocking resources در جی تی متریکس وجود داره. بعضی‌ها از اونها شامل موارد زیر هستند:

  • استفاده از متد inline برای فایل‌های CSS و JavaScript که در مقاله خطای Inline small CSS درباره این روش بیشتر توضیح دادیم. این یکی از خطاهای GTmetrix نسخه قدیمی بوده.
  • فشرده سازی منابع نوشته محور (text-based resources) با استفاده از تابع Gzip. این روش علاوه بر اینکه باعث برطرف شدن این خطا میشه، تاثیر زیادی در بهینه سازی سرعت سایت شما داره. اگه هنوز از تابع Gzip در سایتتون استفاده نکردید، حتما مقاله رفع خطای Enable text compression رو مطالعه کنید.
  • استفاده از افزونه‌ها برای سایت‌های وردپرس. بعضی از افزونه‌ها قابلیت‌هایی دارند که به بهبود این خطای جی تی متریکس کمک می‌کنه. برای آشنایی با این پلاگین‌ها، مقاله بهترین افزونه سرعت وردپرس رو مطالعه کنید.

۵. بده یک متخصص سئو یا تیم سئو

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

جمع بندی

در این مقاله میزفا درباره حل مشکل Eliminate render-blocking resources در GTmetrix جدید صحبت کردیم. گفتیم دلیل اصلی ایجاد این خطا منابعی هستند که باعث ایجاد وقفه در Render شدن صفحه میشن که بیشتر شامل فایل‌های CSS و JS هست. سپس روش‌هایی رو برای برطرف کردن این خطا پیشنهاد کردیم. امیدوارم این آموزش برای شما مفید بوده باشه. تو مقاله بعدی درباره خطای Enable Keep-Alive صحبت خواهیم کرد.

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

محمدعرفان صدری

کمک کردن به رشد دیگران و آموزش دادن مطالب جدید به بقیه، ۲تا ویژگی اصلی منه. اولی باعث شده تو زمینه سئو و رشد دادن کسب و کارها فعالیت کنم؛ دومی هم باعث شده این شانس رو پیدا کنم که مجموعه آموزش هایی رو تو سایت میزفا منتشر کنم.

نوشته های مشابه

دیدگاهتان را بنویسید

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر