সিএসএস ডেলিভারি অপ্টিমাইজ করুন

এই নিয়মটি ট্রিগার হয় যখন PageSpeed ​​Insights শনাক্ত করে যে একটি পৃষ্ঠায় রেন্ডার ব্লক করা এক্সটার্নাল স্টাইলশীট রয়েছে, যা প্রথম রেন্ডার হতে সময় বিলম্বিত করে।

ওভারভিউ

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

সুপারিশ

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

একটি ছোট CSS ফাইল ইনলাইন করার উদাহরণ

যদি এইচটিএমএল ডকুমেন্টটি এইরকম দেখায়:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
এবং রিসোর্স small.css এই রকম:
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
তারপর আপনি নিম্নরূপ সমালোচনামূলক CSS ইনলাইন করতে পারেন:
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

সমালোচনামূলক/অ-সমালোচনামূলক CSS নির্ধারণ, সমালোচনামূলক CSS-এর ইনলাইনিং এবং নন-ক্রিটিকাল CSS-এর বিলম্বিত লোডিং সহ এই রূপান্তরটি nginx, apache, IIS, ATS, এবং Open-এর জন্য PageSpeed ​​অপ্টিমাইজেশান মডিউল দ্বারা স্বয়ংক্রিয়ভাবে করা যেতে পারে। Lightspeed, যখন আপনি prioritize_critical_css ফিল্টার সক্ষম করেন।

সিএসএসকে অ্যাসিঙ্ক্রোনাসভাবে লোড করতে সাহায্য করার জন্য লোডসিএসএস ফাংশনটিও দেখুন, যা Critical-এর সাথে কাজ করতে পারে, একটি ওয়েব পৃষ্ঠা থেকে সমালোচনামূলক CSS বের করার একটি টুল।

উপরের ভাঁজ বিষয়বস্তু স্টাইল করার জন্য প্রয়োজনীয় সমালোচনামূলক শৈলীগুলি ইনলাইন করা হয় এবং অবিলম্বে নথিতে প্রয়োগ করা হয়। পৃষ্ঠাটির প্রাথমিক পেইন্টিংয়ের পরে সম্পূর্ণ small.css লোড হয়। সমালোচনামূলক বিষয়বস্তুর প্রাথমিক রেন্ডার ব্লক না করে এটি লোড করা শেষ হলে এর স্টাইলগুলি পৃষ্ঠায় প্রয়োগ করা হয়।

মনে রাখবেন যে ওয়েব প্ল্যাটফর্মটি শীঘ্রই এইচটিএমএল আমদানি ব্যবহার করে জাভাস্ক্রিপ্ট ব্যবহার না করেই নন-রেন্ডার-ব্লকিং পদ্ধতিতে স্টাইলশীট লোড করা সমর্থন করবে।

বড় ডেটা ইউআরআই ইনলাইন করবেন না

CSS ফাইলগুলিতে ডেটা URI গুলি ইনলাইন করার সময় সতর্ক থাকুন। যদিও আপনার CSS-এ ছোট ডেটা URI-এর নির্বাচনী ব্যবহার অর্থবহ হতে পারে, বড় ডেটা URI-গুলি ইনলাইন করার ফলে আপনার উপরের-ভাঁজ CSS-এর আকার বড় হতে পারে, যা পৃষ্ঠার রেন্ডারের সময়কে ধীর করে দেবে।

CSS অ্যাট্রিবিউট ইনলাইন করবেন না

এইচটিএমএল উপাদানগুলিতে (যেমন, <p style=...> ) ইনলাইন করা CSS বৈশিষ্ট্যগুলি যেখানে সম্ভব এড়ানো উচিত, কারণ এটি প্রায়শই অপ্রয়োজনীয় কোড নকলের দিকে নিয়ে যায়। আরও, এইচটিএমএল উপাদানগুলিতে ইনলাইন সিএসএস ডিফল্টরূপে কন্টেন্ট সিকিউরিটি পলিসি (সিএসপি) দ্বারা অবরুদ্ধ করা হয়।

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

এই পৃষ্ঠাটি কি সহায়ক ছিল?