سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۲۴ درباره رفع خطای 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 باعث میشه کاربر لود شدن صفحه رو به‌صورت پیوسته نبینه. یعنی تا چندین ثانیه یه صفحه خالی نمایش داده میشه و ناگهان محتوای متنی و گرافیکی قابل رویت میشه. اما این نوع لود شدن صفحه خوب نیست. اگه سرعت لود سایت ما بهینه باشه، منابع باید به مرور و به‌صورت مستمر و دائمی نمایش داده بشن تا کاربر متوجه بشه صفحه داره لود میشه و مشکلی وجود نداره. به تصویر زیر دقت کنید.
در تصویر بالا، محتوا به مرور و به‌صورت پیوسته نمایش داده میشه و باعث میشه کاربر بتونه مواردی رو مشاهده کنه تا سایر منابع لود بشن. اما تو تصویر پایین، کاربر تا چندین ثانیه هیچ محتوایی (حتی رنگ پس زمینه) رو نمی‌بینه و چه بسا که از صفحه خارج بشه یا بخواد صفحه رو 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 در جی تی متریکس. بیشتر روش‌هایی که در ادامه می‌گیم نیاز به تخصص و تجربه در برنامه نویسی داره. اما بعضی با کمک بعضی از افزونه‌ها هم شاید بشه این خطا رو تا حدی رفع کرد که بهش اشاره خواهیم کرد.
۱. انتقال تگ‌ها به انتهای 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 صحبت خواهیم کرد.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید؛ حتما پاسخ می‌دیم.
9 پاسخ
ممنون مهندس خسته نباشی، بیزحمت تو مطلب دیگه این ارور رو هم بررسی بفرمایید ؛
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
سلام .وقت بخیر
ممنون از مطالب خیلی خوبتون
برای فایل های سی اس اس که در هد سایت هستند میشه از defer یا async استفاده کرد یا اینکه این دو اتریبیوت فقط مختص فایل های جی اس اس اند؟
سلام حمید
میشه استفاده کرد ولی ممکنه باعث بهم ریختنی ظاهر سایت بشه. باید تست کنی و اگر مشکلی نداشت میتونی استفاده کنی.
سلام وقت بخیر من یک سوال دارم
وقتی در آنالیز سایت این مورد رو داریم و
Eliminate render-blocking resources
و زیر این مورد چند تا چیز را نوشته مثل اینها را نوشته ما باید این موارد را حذف کنیم یا کد نویسیشونو تغییر بدیم
میدونم با نصب افزونه خطای بالا کمی بهتر میشه اما نمیدونم چرا به موارد زیر اشاره میکنه و ماباید چه کنیم ؟
سلام
خب طبیعی هست ایراد بگیره و چرا نداره. مشکل داره و باید حل بشه.
اینکه این مشکل چی هست و چه راه حل هایی هم داره رو داخل مقاله گفتیم و مطالعه کنید.
سلام ببخشید من زیاد با کد مد آشنایی ندارم، در مقاله گفتید ( شاید بشه با برخی از افزونه این مشکل رو تا حدی رفع کرد ) افزونه ای سراغ دارید که من امتحان کنم جهت رفع این مشکل.
با تشکر
سلام میلاد عزیز
مقاله بهترین افزونه افزایش سرعت وردپرس رو مطالعه کن تا بتونی مناسب ترین پلاگین رو برای سایتت انتخاب کنی.
همه افزونه های خوب تو قسمت بهینه سازی CSS و JS تنظیمات مربوط به کاهش render-blocking دارند. اما باید امتحان کنی و ببینی باعث بهم ریختگی سایتت نشه.
موفق باشی
سلام من با همین: Eliminate render-blocking resources در جیتی میتریکس مواجه شدم میشه دقیقا بفرمایید من چیکار کنم تا این مشکل جهت بالا رفتن سرعت سایت رفع بشه.
با تشکر
سلام میلاد جان
رفع این مشکل ساده نیست و باید چند راهکار مختلف (که تو مقاله هم اشاره شده) رو امتحان کنی تا منابعی که باعث render-blocking میشن رو کاهش بدی.
گاهی اوقات این خطا به خاطر نصب افزونه‌های زیاده.
اگه داری از افزونه سرعت استفاده می‌کنی، میتونی موقتا افزونه رو غیرفعال کنی و دوباره سایت رو با GTmetrix تست کنی و این خطا رو بررسی کنی تا ببینی دقیقا کدهای کدوم افزونه باعث render-blocking میشه.
بعدش میتونی اون افزونه رو غیرفعال کنی و در نهایت افزونه سرعتت رو دوباره فعال کنی.
موفق باشی