موارد زیادی به عملکرد صفحه وب سایت تاثیر می‌گذارد. یکی از عوامل کلیدی منابعی است که یک صفحه بارگیری می کند، مانند اسکریپت ها و شیوه نامه ها. داشتن منابع بسیار زیاد یا داشتن منابعی که دانلود آنها کند است، می تواند تجربه کاربری ضعیفی را ایجاد کند.
این پست تأثیراتی را که اسکریپت‌های مسدودکننده رندر (Render-Blocking Scripts) بر روی صفحه سایت شما دارند و نحوه شناسایی چنین اسکریپت‌های مسدودکننده رندر با استفاده از DevTools و DebugBear که یک ابزار نظارت بر عملکرد وب‌سایت می‌باشد، را توضیح می‌دهد.
تأثیر درخواست های مسدود کردن رندر Render Blocking Scripts
در حالی که در برخی مواقع نمی‌توانید از منابع مسدودکننده رندر برای استفاده اجتناب کنید، مهم است که تأثیر این منابع مسدودکننده رندر بر بارگذاری صفحه شما خود را بهتر بشناسید. اما همچنین برای درک جریان کاری که می‌توانید برای شناسایی چنین منابع مسدودکننده رندر استفاده کنید، اهمیت دارد.
توجه: توصیه‌های موجود در این پست عموماً برای اسکریپت‌ها (فایل‌های جاوا اسکریپت) و شیوه نامه (فایل‌های CSS) قابل استفاده است.
بارگذاری تدریجی و آهسته صفحه، جایی که به نظر می رسد تمام اجزای آن کم کم ظاهر می شوند، نشان دهنده اسکریپت های مسدود کننده رندر است.
هنگامی که یک صفحه خیلی کند بارگذاری می شود، این می تواند به تجربه کاربر نهایی شما آسیب برساند و می تواند بر معیارهای عملکردی مانند Core Web Vitals که توسط موتورهای جستجو برای رتبه بندی صفحه شما استفاده می شود، تأثیر بگذارد.
اسکریپت مسدودکننده رندر Render Blocking Scripts چیست؟
این اسکریپت، بارگذاری و رندر صفحه را به تاخیر می اندازد.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Render-blocking JavaScript Example</title>
</head>
<body>
<script src="blocking.js"></script>
<h1>My Web Page</h1>
</body>
</html>این بدان معنی است که عنوان ( <h1> ) تا زمانی که اسکریپت blocking.js واکشی، تجزیه و اجرا نشود، بر روی صفحه نمایش ظاهر نمی شود. اگر می توانید از async یا defer در چنین اسکریپتی استفاده کنید. البته در برخی مواقع ممکن است این کار هم بهدرستی کار نکند. به دنبال مثال قبلی، اگر اسکریپت blocking.js را در انتهای بدنه (body) قرار دهید، یا حداقل، اسکریپت را بعد از عنوان(title) قرار دهید، بدون انتظار برای واکشی اسکریپت ارائه می شود.
به طور کلی، مرورگرها سعی می کنند به تدریج صفحه شما را رندر کنند. این بدان معناست که مرورگرها، صفحه را در اسرع وقت نمایش می دهند. حتی اگر برخی منابع هنوز در حال بارگیری باشند.
بیشتر بخوانید : نحوه بهبود INP : متریک جدید گوگل
Render Blocking در مقابل Parser Blocking
نکته
این پست از عباراتی مانند parser-blocking و render-blocking تا حدودی به جای یکدیگر استفاده می کند. در حالی که می‌تواند تفاوت‌های ظریفی بین آنها وجود داشته باشد، اما همه آنها به منابعی اشاره دارند که بر بارگذاری و رندر صفحه تأثیر می‌گذارند.
هنگامی که یک مرورگر با یک منبع مسدود کننده رندر render blocking روبرو می شود، محتوای صفحه را در زیر آن نمایش نمی دهد.
هنگامی که رندر به دلیل یک منبع render blocking مسدود می شود، مرورگر به تجزیه کد HTML و ساخت محتوای صفحه ادامه می دهد. CSS به طور پیش‌فرض در حال مسدود کردن رندر است.
یک منبع parser-blocking، رندر را نیز مسدود می کند، اما علاوه بر این، مرورگر را از ادامه تجزیه HTML و پردازش منابع دیگر در صفحه جلوگیری می کند. جاوا اسکریپت به طور پیش فرض parser-blocking است.
یک منبع parser-blocking که در انتهای بدنه قرار داده شده است، نمی تواند رندر محتوای صفحه باقی مانده را مسدود کند، زیرا محتوای دیگری برای رندر وجود ندارد!
توجه داشته باشید که وقتی تجزیه کننده HTML مرورگر با یک stylesheet مواجه می شود، parser-blocking هیچ اسکریپتی را که بعد از stylesheet آمده است اجرا نمی کند تا زمانی که CSS به طور کامل بارگذاری شود.
اطلاعات
در تئوری، منابع مسدودکننده تجزیه بدتر از منابع مسدودکننده صرفاً رندر هستند، زیرا تصاویر یا اسکریپت‌های اضافی یا صفحه سبک تا زمانی که تجزیه‌کننده به آن تگ‌های HTML نرسد، کشف نمی‌شوند. در عمل این به ندرت مشکل ساز است، زیرا اسکنر پیش بارگذاری مرورگر می تواند به سرعت منابع مهمی را که باید دانلود شوند، بدون توقف برای اجرای هیچ اسکریپتی شناسایی کند.
پیشرفت بصری بارگذاری صفحه
هنگامی که یک صفحه دارای اسکریپت های مسدود کننده رندر است، پیشرفت بصری بارگذاری صفحه تحت تأثیر قرار می گیرد.
- از یک صفحه خالی تا فقط یک هدر.
- از هدر تا تصویر اصلی.
- از تصویر اصلی گرفته تا متن زیر تصویر.
قبل از هر تغییر وضعیت، اسکریپت های render blocking رندر صفحه را به تاخیر می اندازند.
نحوه تشخیص اسکریپت های مسدود کننده رندر
نحوه تشخیص اسکریپت های render blocking بستگی به ابزاری دارد که استفاده می کنید. در این پست، نحوه تشخیص اسکریپت‌های مسدودکننده رندر با DevTools را مورد بحث قرار خواهیم داد.
به عنوان یک رویکرد کلی، شما می خواهید تغییرات بصری در بارگذاری صفحه را با بارگیری منابعی که صفحه در حال بارگذاری است مرتبط کنید.
اسکریپت های render blocking را با DevTools شناسایی کنید
جدا از نسخه Lighthouse که در DevTools تعبیه شده است، DevTools ویژگی داخلی برای برجسته کردن اسکریپت‌های render-blocking ندارد. در عوض می توانید:
- بارگذاری اسکریپت ها را با تغییرات بصری در صفحه مرتبط کنید.
- waterfall + initiator chain را مطالعه کنید تا متوجه شوید که آیا یک اسکریپت مسدود کننده رندر (render blocking) است یا خیر.
- کد منبع / درخت DOM صفحه را تجزیه و تحلیل کنید تا متوجه شوید که آیا صفحه دارای اسکریپت‌های render-blocking است یا خیر.
با نگاهی به عکس بالا، هیچ چیز به عنوان render blocking مشخص نمی شود. در واقع، بارگذاری موازی منابع نشانه خوبی است. اما نمیتواند مطمئن باشد
این واقعیت که اسکریپت ها به صورت موازی بارگیری می شوند به این معنی است که آنها مسدود نمی شوند. در این مورد، اسکنر پیش بارگذاری مرورگر، صفحه را اسکن می کند و منابع را به صورت موازی واکشی می کند این مفید و تأثیر مثبتی بر عملکرد خود صفحه دارد، اما هنوز مشکلی وجود دارد.
waterfall در DevTools تصویری قوی از مشکلات صفحه را به ما نشان نمی‌دهد، بنابراین به عنوان گام بعدی، می‌توانید از پنل Performance استفاده کنید و درخواست‌های شبکه را با تغییرات بصری صفحه مطابقت دهید.
این امکان وجود دارد زیرا پانل DevTools Performance درخواست های شبکه را در کنار اسکرین شات هایی که اغلب در حین بارگذاری صفحه گرفته شده اند، به شما نشان می دهد.
هنگامی که یک اسکریپت مسدود کننده رندر render blocking را شناسایی کردید، می توانید روی درخواست network کلیک کنید و لینک فایل را در Summary pane پیدا کنید.
این شما را به پنل Sources می برد که کد منبع اسکریپت را به شما نشان می دهد. از اینجا می توانید روی اسکریپت کلیک راست کرده و Reveal in Network panel را انتخاب کنید:
DevTools شما را به پنل Sources برمی گرداند و خط کدی را که باعث بارگیری اسکریپت شده است را به شما نشان می دهد.
بیشتر بخوانید : 10 روش بهینه سازی سایت برای موبایل
چرا Render Blocking است؟
چرا باید برای شما این موضوع مهم باشد که آیا یک اسکریپت قبل یا بعد از عنصر مسدود می شود یا خیر؟ حداقل، شما می‌خواهید بهینه‌سازی اسکریپت‌هایی را که قبل از عنصر رندر مسدود می‌شوند، در اولویت قرار دهید. این به این دلیل است که <h1> اغلب اولین محتوایی است که کاربران هنگام بارگزاری در یک صفحه می بینند. و شما می خواهید این عنوان در سریع ترین زمان ممکن ارائه شود.
ابزارهای مختلف برای شناسایی اسکریپت های مسدودکننده رندر به رویکردهای متفاوتی نیاز دارند. با DevTools، باید در استخراج اطلاعات و داده‌ها از Network و performance استفاده کنید. همچنین برای درک تأثیر اسکریپت های render blocking بر بارگذاری صفحه خود، چنین داده‌هایی را درک کنید.