خطای Render Blocking

  • fanavaransharif

    (@fanavaransharif)


    2 ماه پیش

    سلام

    وقت بخیر

    خطای زیر رو چطور میتونم برطرف کنم؟

    Render Blocking: 2 scriptsScripts placed within the HEAD tag, are blocking the rendering. The best place to insert a script is before closing the BODY tag, at the end of the page.

در حال نمایش 3 پاسخ ( از کل 3)
  • مدیر Farhad Sakhaei

    (@farhad0)

    2 ماه پیش

    درود

    برای رفع خطای “Render Blocking”، که معمولاً در ابزارهای بهینه‌سازی و آنالیز وبسایت (مثل Google PageSpeed Insights) نمایش داده می‌شود، باید اسکریپت‌هایی که بارگذاری رندر صفحه را کند می‌کنند بهینه کنید. مراحل زیر به شما کمک می‌کند:

    1. استفاده از ویژگی async یا defer در اسکریپت‌ها

    این دو ویژگی به مرورگر اجازه می‌دهند اسکریپت‌ها را بدون مسدود کردن رندر صفحه بارگذاری کنند:

    • async: اسکریپت به صورت همزمان با بارگذاری سایر منابع اجرا می‌شود.
    • defer: اسکریپت پس از اتمام بارگذاری کامل صفحه اجرا می‌شود.

    مثال:

    <script src="script.js" async></script>
    یا
    <script src="script.js" defer></script>

    2. انتقال اسکریپت‌ها به انتهای فایل HTML

    به جای قرار دادن اسکریپت‌ها در بخش <head>، آن‌ها را قبل از بسته شدن تگ <body> قرار دهید:

    ...
</div>
<script src="script1.js"></script>
<script src="script2.js"></script>
</body>

    3. ترکیب و فشرده‌سازی اسکریپت‌ها

    ابزارهایی مانند WP Rocket یا Autoptimize (در وردپرس) می‌توانند اسکریپت‌ها را ترکیب کرده و نسخه‌ی فشرده‌شده‌ای از آن‌ها را تولید کنند. 4. بارگذاری مشروط

    اگر اسکریپت‌ها فقط در بخش خاصی از سایت نیاز هستند (مانند فرم تماس یا گالری)، آن‌ها را فقط در همان بخش بارگذاری کنید. این کار از طریق افزونه‌ها یا کدنویسی در وردپرس قابل انجام است. 5. بارگذاری اسکریپت‌های Third-party بهینه

    برای اسکریپت‌های خارجی (مانند Google Analytics):

    • از نسخه‌های غیرمسدود‌کننده استفاده کنید.
    • CDN های معتبر استفاده کنید.

    نمونه کد بهینه:

    <!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بهینه‌سازی اسکریپت‌ها</title>
</head>
<body>
    <h1>سلام دنیا!</h1>
    <!-- انتقال اسکریپت‌ها به انتهای صفحه -->
    <script src="script1.js" defer></script>
    <script src="script2.js" async></script>
</body>
</html>

    نکته:

    قبل از اعمال تغییرات، از سایت خود پشتیبان تهیه کنید و پس از تغییرات، عملکرد سایت را دوباره با ابزارهایی مانند PageSpeed Insights بررسی کنید.

    آغازکننده موضوع fanavaransharif

    (@fanavaransharif)

    1 ماه، 4 هفته پیش

    با تشکر فراوان از شما @farhad0

    بنده افزونه ی لایت اسپید رو روی وردپرس نصب کردم و تنظیمات کدهای css و جاوااسکریپت رو انجام دادم اما هنوز این خطا برای سایت مون نمایش داده میشه.

    مدیر Saeed Piri

    (@isaeedam)

    1 ماه، 4 هفته پیش

    درود @fanavaransharif

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

در حال نمایش 3 پاسخ ( از کل 3)