রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট সরান

এই নিয়মটি ট্রিগার হয় যখন PageSpeed ​​Insights শনাক্ত করে যে আপনার HTML আপনার পৃষ্ঠার উপরের ভাঁজ অংশে একটি ব্লকিং এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল উল্লেখ করে।

ওভারভিউ

ব্রাউজার একটি পৃষ্ঠা রেন্ডার করার আগে এটিকে HTML মার্কআপ পার্স করে DOM ট্রি তৈরি করতে হবে। এই প্রক্রিয়া চলাকালীন, যখনই পার্সার একটি স্ক্রিপ্টের মুখোমুখি হয় তখন এটি এইচটিএমএল পার্সিং চালিয়ে যাওয়ার আগে এটিকে থামাতে হবে এবং কার্যকর করতে হবে। একটি বাহ্যিক স্ক্রিপ্টের ক্ষেত্রে পার্সারকেও রিসোর্স ডাউনলোড করার জন্য অপেক্ষা করতে বাধ্য করা হয়, যার ফলে এক বা একাধিক নেটওয়ার্ক রাউন্ডট্রিপ হতে পারে এবং পৃষ্ঠার প্রথম রেন্ডার হতে সময় বিলম্বিত হতে পারে। জাভাস্ক্রিপ্ট কীভাবে গুরুত্বপূর্ণ রেন্ডারিং পাথকে প্রভাবিত করে সে সম্পর্কে আরও জানতে JavaScript এর সাথে ইন্টারঅ্যাকটিভিটি যুক্ত করা দেখুন।

সুপারিশ

আপনার জাভাস্ক্রিপ্ট ব্লক করার ব্যবহার এড়ানো এবং কম করা উচিত, বিশেষ করে এক্সটার্নাল স্ক্রিপ্ট যা কার্যকর করার আগে আনতে হবে। পৃষ্ঠার বিষয়বস্তু রেন্ডার করার জন্য প্রয়োজনীয় স্ক্রিপ্টগুলি অতিরিক্ত নেটওয়ার্ক অনুরোধ এড়াতে ইনলাইন করা যেতে পারে, তবে ইনলাইন করা বিষয়বস্তু ছোট হতে হবে এবং ভাল পারফরম্যান্স প্রদানের জন্য দ্রুত কার্যকর করতে হবে। যে স্ক্রিপ্টগুলি প্রাথমিক রেন্ডারের জন্য গুরুত্বপূর্ণ নয় সেগুলিকে অ্যাসিঙ্ক্রোনাস করা উচিত বা প্রথম রেন্ডারের পরে স্থগিত করা উচিত। অনুগ্রহ করে মনে রাখবেন যে এটি আপনার লোডিং সময় উন্নত করার জন্য, আপনাকে অবশ্যই 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">
অ্যাসিঙ্ক্রোনাস স্ক্রিপ্ট সম্পর্কে আরও জানতে পার্সার ব্লকিং বনাম অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট দেখুন। মনে রাখবেন যে অ্যাসিঙ্ক্রোনাস স্ক্রিপ্টগুলি নির্দিষ্ট ক্রমে কার্যকর করার গ্যারান্টি দেওয়া হয় না এবং document.write ব্যবহার করা উচিত নয়। যে স্ক্রিপ্টগুলি এক্সিকিউশন অর্ডারের উপর নির্ভর করে বা পৃষ্ঠার DOM বা CSSOM অ্যাক্সেস বা সংশোধন করতে হয় সেগুলিকে এই সীমাবদ্ধতার জন্য অ্যাকাউন্টে পুনরায় লেখার প্রয়োজন হতে পারে।

জাভাস্ক্রিপ্টের লোডিং স্থগিত করুন

প্রারম্ভিক পৃষ্ঠার রেন্ডারের জন্য প্রয়োজনীয় নয় এমন স্ক্রিপ্টগুলির লোডিং এবং সঞ্চালন প্রাথমিক রেন্ডার বা পৃষ্ঠার অন্যান্য গুরুত্বপূর্ণ অংশগুলি লোড করা শেষ না হওয়া পর্যন্ত স্থগিত করা যেতে পারে। এটি করা সম্পদ বিরোধ কমাতে এবং কর্মক্ষমতা উন্নত করতে সাহায্য করতে পারে।

FAQ

যদি আমি একটি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করি যেমন jQuery?
অনেক জাভাস্ক্রিপ্ট লাইব্রেরি, যেমন JQuery, অতিরিক্ত ইন্টারঅ্যাক্টিভিটি, অ্যানিমেশন এবং অন্যান্য প্রভাব যোগ করতে পৃষ্ঠা উন্নত করতে ব্যবহার করা হয়। যাইহোক, উপরের-ভাঁজ বিষয়বস্তু রেন্ডার করার পরে এই আচরণগুলির অনেকগুলি নিরাপদে যোগ করা যেতে পারে। এই ধরনের জাভাস্ক্রিপ্ট অ্যাসিঙ্ক্রোনাস করার তদন্ত করুন বা এর লোডিং পিছিয়ে দিন।
যদি আমি পৃষ্ঠাটি তৈরি করার জন্য একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করি?
যদি পৃষ্ঠার বিষয়বস্তু ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট দ্বারা তৈরি করা হয়, তাহলে অতিরিক্ত নেটওয়ার্ক রাউন্ডট্রিপ এড়াতে আপনার প্রাসঙ্গিক জাভাস্ক্রিপ্ট মডিউলগুলি ইনলাইন করার তদন্ত করা উচিত। একইভাবে, সার্ভার-সাইড রেন্ডারিং লিভারেজিং প্রথম পৃষ্ঠা লোড কর্মক্ষমতা উল্লেখযোগ্যভাবে উন্নত করতে পারে: দ্রুত প্রথম রেন্ডার সরবরাহ করতে সার্ভারে জাভাস্ক্রিপ্ট টেমপ্লেট রেন্ডার করুন এবং পৃষ্ঠাটি লোড হয়ে গেলে ক্লায়েন্ট-সাইড টেমপ্লেটিং ব্যবহার করুন৷ সার্ভার-সাইড রেন্ডারিং সম্পর্কে আরও তথ্যের জন্য, http://youtu.be/VKTWdaupft0?t=14m28s দেখুন।

প্রতিক্রিয়া

এই পেজটি কি সহায়ক ছিল?