حذف Render-Blocking JavaScript

این قانون زمانی فعال می شود که PageSpeed ​​Insights تشخیص دهد که HTML شما به یک فایل جاوا اسکریپت خارجی مسدودکننده در قسمت بالای صفحه شما ارجاع می دهد.

نمای کلی

قبل از اینکه مرورگر بتواند یک صفحه را رندر کند، باید درخت DOM را با تجزیه نشانه گذاری HTML بسازد. در طول این فرآیند، هر زمان که تجزیه کننده با یک اسکریپت مواجه شد، باید آن را متوقف کرده و قبل از اینکه بتواند به تجزیه HTML ادامه دهد، آن را اجرا کند. در مورد یک اسکریپت خارجی، تجزیه کننده نیز مجبور است منتظر دانلود منبع بماند، که ممکن است یک یا چند دور رفت و برگشت شبکه را متحمل شود و زمان اولین رندر صفحه را به تاخیر بیاندازد. برای آشنایی بیشتر با نحوه تأثیرگذاری جاوا اسکریپت بر مسیر رندر حیاتی ، به افزودن تعامل با جاوا اسکریپت مراجعه کنید.

توصیه ها

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

جاوا اسکریپت درون خطی

اسکریپت‌های مسدودکننده خارجی، مرورگر را مجبور می‌کنند تا منتظر واکشی جاوا اسکریپت بماند، که ممکن است قبل از ارائه صفحه، یک یا چند مسیر رفت و برگشت شبکه اضافه کند. اگر اسکریپت های خارجی کوچک هستند، می توانید محتویات آنها را مستقیماً در سند HTML قرار دهید و از تأخیر درخواست شبکه جلوگیری کنید. برای مثال، اگر سند HTML به شکل زیر باشد:
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
 و منبع small.js به این صورت است:
  /* contents of a small JavaScript file */
 سپس می توانید اسکریپت را به صورت زیر وارد کنید:
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
 داخل کردن محتویات اسکریپت درخواست خارجی برای small.js را حذف می‌کند و به مرورگر اجازه می‌دهد زمان سریع‌تری را برای اولین بار ارائه دهد. با این حال، توجه داشته باشید که درون‌خط‌سازی اندازه سند HTML را نیز افزایش می‌دهد و ممکن است نیاز باشد که محتوای اسکریپت یکسان در چندین صفحه خط‌بندی شود. در نتیجه، شما فقط باید اسکریپت های کوچک را به صورت درون خطی کنید تا بهترین عملکرد را ارائه دهید.

جاوا اسکریپت را ناهمزمان کنید

به طور پیش‌فرض جاوا اسکریپت ساخت DOM را مسدود می‌کند و بنابراین زمان اولین رندر را به تأخیر می‌اندازد. برای جلوگیری از مسدود کردن تجزیه کننده جاوا اسکریپت، توصیه می کنیم از ویژگی HTML async در اسکریپت های خارجی استفاده کنید. به عنوان مثال:
<script async src="my.js">
برای کسب اطلاعات بیشتر در مورد اسکریپت های ناهمزمان ، Parser Blocking در مقابل JavaScript ناهمزمان را ببینید. توجه داشته باشید که اسکریپت های ناهمزمان تضمینی برای اجرای به ترتیب مشخص ندارند و نباید از document.write استفاده کنند. اسکریپت هایی که به ترتیب اجرا بستگی دارند یا نیاز به دسترسی یا اصلاح DOM یا CSSOM صفحه دارند، ممکن است برای در نظر گرفتن این محدودیت ها نیاز به بازنویسی داشته باشند.

بارگذاری جاوا اسکریپت را به تعویق بیندازید

بارگذاری و اجرای اسکریپت هایی که برای رندر صفحه اولیه ضروری نیستند ممکن است تا زمانی که رندر اولیه یا سایر قسمت های حیاتی صفحه بارگذاری تمام شود به تعویق بیفتد. انجام این کار می تواند به کاهش اختلاف منابع و بهبود عملکرد کمک کند.

سوالات متداول

اگر از یک کتابخانه جاوا اسکریپت مانند jQuery استفاده کنم چه؟
بسیاری از کتابخانه‌های جاوا اسکریپت، مانند JQuery، برای بهبود صفحه برای افزودن تعامل، انیمیشن‌ها و جلوه‌های دیگر استفاده می‌شوند. با این حال، بسیاری از این رفتارها را می توان با خیال راحت پس از ارائه محتوای بالا اضافه کرد. ناهمزمان کردن چنین جاوا اسکریپتی را بررسی کنید یا بارگذاری آن را به تعویق بیندازید.
اگر از یک چارچوب جاوا اسکریپت برای ساخت صفحه استفاده کنم چه می شود؟
اگر محتوای صفحه توسط جاوا اسکریپت سمت سرویس گیرنده ساخته شده است، باید در داخل ماژول های جاوا اسکریپت مربوطه را بررسی کنید تا از رفت و برگشت اضافی شبکه جلوگیری کنید. به طور مشابه، استفاده از رندر سمت سرور می تواند به طور قابل توجهی عملکرد بارگذاری صفحه اول را بهبود بخشد: قالب های جاوا اسکریپت را روی سرور ارائه کنید تا ابتدا رندر سریع ارائه شود، و سپس از قالب سمت مشتری پس از بارگیری صفحه استفاده کنید. برای اطلاعات بیشتر در مورد رندر سمت سرور، به http://youtu.be/VKTWdaupft0?t=14m28s مراجعه کنید.

بازخورد

آیا این صفحه مفید بود؟