رفع ارور Remove Render-Blocking JavaScript

رفع ارور Remove Render-Blocking JavaScript

فهرست مطالب

حذف جاوا اسکریپت رندر – بلاکینگ

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

Remove Render-Blocking JavaScript

بررسی اجمالی Remove Render-Blocking JavaScript

به طور کلی مراحل پردازش یک صفحه وب در مرورگر به شرح زیر است:‌

  • مرورگر، HTML را پردازش و Document Object Model یا DOM را ایجاد می کند.
  • مرورگر، CSS ها را پردازش کرده و CSSOM یا CSS Object Model را ایجاد می کند.
  • DOM و CSSOM با هم ترکیب شده و Render-Tree ایجاد میشود.
  • مرورگر در مرحله لی اوت، مختصات و اندازه هر یک از بخش ها را مشخص می کند.
  • در مرحله painting، رنگ های مشخص شده در صفحه نمایش، ثبت شده و نمایش داده می شود.

پس از آنکه مرورگر موقعیت هر المنت را با استفاده ازCSS های اعمال شده، تشخیص می داد، این المنت ها باید بر روی صفحه، نمایش داده شوند. این مرحله Painting نامیده می شود.

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

توصیه ها برای Remove Render-Blocking JavaScript

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

جاوا اسکریپت Inline

اسکریپت های بلاکینگ خارجی، مرورگر را برای واکشی جاوا اسکریپت، مجبور به انتظار کرده و ممکن است قبل از اینکه صفحه بتواند بارگذاری شود، یک یا چند رفت و برگشت در شبکه اضافه کنند. اگر اسکریپت های خارجی کم حجم باشند، شما می توانید محتوای آنها را به داخل سند HTML، به طور مستقیم inline کرده و از تاخیر درخواست شبکه، جلوگیری کنید. برای مثال، اگر سند 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 */

در این صورت می توانید اسکریپت را به شکل زیر inline کنید:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Inline کردن محتوای اسکریپت، درخواست خارجی برای small.js را مرتفع کرده و به مرورگر اجازه می دهد تا برای اولین بازدید، سریع تر عمل کند. با این حال، توجه داشته باشید که inline کردن، اندازه سند HTML را نیز افزایش داده و ممکن است نیاز به inline کردن محتوای همان اسکریپت، در صفحات زیادی به وجود آید. در نتیجه، به منظور ارائه بهترین عملکرد، شما تنها باید اسکریپت های کم حجم را inline کنید.

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

به طور پیش فرض، جاوا اسکریپت، ساخت DOM را بلاک کرده و در نتیجه زمان اولین بازدید را با تاخیر مواجه می کند. برای جلوگیری از بلاکینگ تجزیه کننده توسط جاوا اسکریپت، استفاده از ویژگی async در HTML را برای اسکریپت های خارجی، توصیه می کنیم. بعنوان مثال:

<script async src="my.js">

برای کسب اطلاعات بیشتر در مورد اسکریپت های ناهمزمان، Parser Blocking vs. Asynchronous JavaScript را مشاهده کنید. توجه داشته باشید که تضمینی برای اجرای اسکریپت ناهمزمان با ترتیب مشخص شده وجود نداشته و نباید از document.write استفاده کرد. اسکریپت هایی که بستگی به ترتیب اجرا یا نیاز به دسترسی یا تغییر DOM یا CSSOM صفحه دارند، ممکن است به دلیل این محدودیت ها نیاز به بازنویسی داشته باشند.

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

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

پرسش های متداول

  • آیا استفاده از یک کتابخانه جاوا اسکریپت، نظیر JQuery، مناسب است؟

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

  • آیا استفاده از یک چارچوب جاوا اسکریپت برای ساخت صفحه، مناسب است؟

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