পেজস্পিডের নিয়ম এবং সুপারিশ

Ilya Grigorik

এই নির্দেশিকাটি প্রসঙ্গে PageSpeed ​​Insights নিয়মগুলি পরীক্ষা করে: সমালোচনামূলক রেন্ডারিং পাথ অপ্টিমাইজ করার সময় কী মনোযোগ দিতে হবে এবং কেন৷

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

প্রথম রেন্ডার করার জন্য দ্রুততম সময় প্রদান করতে, ন্যূনতম করুন এবং (যেখানে সম্ভব) পৃষ্ঠায় গুরুত্বপূর্ণ সংস্থানগুলির সংখ্যা দূর করুন, ডাউনলোড করা সমালোচনামূলক বাইটের সংখ্যা কম করুন এবং সমালোচনামূলক পথের দৈর্ঘ্য অপ্টিমাইজ করুন৷

জাভাস্ক্রিপ্ট ব্যবহার অপ্টিমাইজ করুন

জাভাস্ক্রিপ্ট রিসোর্সগুলি ডিফল্টরূপে পার্সার ব্লক করা হয় যদি না async হিসাবে চিহ্নিত করা হয় বা একটি বিশেষ জাভাস্ক্রিপ্ট স্নিপেটের মাধ্যমে যোগ করা হয়। পার্সার ব্লকিং জাভাস্ক্রিপ্ট ব্রাউজারকে CSSOM-এর জন্য অপেক্ষা করতে বাধ্য করে এবং DOM-এর নির্মাণে বিরতি দেয়, যার ফলে প্রথম রেন্ডারের সময় উল্লেখযোগ্যভাবে বিলম্বিত হতে পারে।

অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট সংস্থান পছন্দ করুন

অ্যাসিঙ্ক্রোনাস রিসোর্স ডকুমেন্ট পার্সারকে আনব্লক করে এবং ব্রাউজারকে স্ক্রিপ্ট চালানোর আগে CSSOM-এ ব্লক করা এড়াতে অনুমতি দেয়। প্রায়শই, যদি স্ক্রিপ্টটি async অ্যাট্রিবিউট ব্যবহার করতে পারে, তবে এর মানে এটি প্রথম রেন্ডারের জন্য অপরিহার্য নয়। প্রাথমিক রেন্ডারের পরে অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট লোড করার কথা বিবেচনা করুন।

সিঙ্ক্রোনাস সার্ভার কল এড়িয়ে চলুন

unload হ্যান্ডলারগুলিতে XMLHttpRequests দ্বারা পাঠানো ডেটা সীমিত করতে navigator.sendBeacon() পদ্ধতি ব্যবহার করুন৷ যেহেতু অনেক ব্রাউজারে এই ধরনের অনুরোধগুলিকে সিঙ্ক্রোনাস করার প্রয়োজন হয়, তারা পৃষ্ঠার রূপান্তরকে ধীর করে দিতে পারে, কখনও কখনও লক্ষণীয়ভাবে। নিচের কোডটি দেখায় কিভাবে navigator.sendBeacon() ব্যবহার করে unload হ্যান্ডলারের পরিবর্তে pagehide হ্যান্ডলারে সার্ভারে ডেটা পাঠাতে হয়।

    <script>
      function() {
        window.addEventListener('pagehide', logData, false);
        function logData() {
          navigator.sendBeacon(
            'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
            'Sent by a beacon!');
        }
      }();
    </script>

নতুন fetch() পদ্ধতি অ্যাসিঙ্ক্রোনাসভাবে ডেটা অনুরোধ করার একটি সহজ উপায় প্রদান করে। কারণ এটি এখনও সর্বত্র উপলব্ধ নয়, ব্যবহারের আগে এটির উপস্থিতি পরীক্ষা করার জন্য আপনার বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করা উচিত। এই পদ্ধতি একাধিক ইভেন্ট হ্যান্ডলারের পরিবর্তে প্রতিশ্রুতি দিয়ে প্রতিক্রিয়া প্রক্রিয়া করে। একটি XMLHttpRequest-এর প্রতিক্রিয়ার বিপরীতে, একটি আনয়ন প্রতিক্রিয়া হল Chrome 43-এ শুরু হওয়া একটি স্ট্রীম অবজেক্ট৷ এর মানে হল যে json() এ একটি কলও একটি প্রতিশ্রুতি প্রদান করে৷

    <script>
    fetch('./api/some.json')
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +  response.status);
            return;
          }
          // Examine the text in the response
          response.json().then(function(data) {
            console.log(data);
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
    </script>

fetch() পদ্ধতিটি POST অনুরোধগুলিও পরিচালনা করতে পারে।

    <script>
    fetch(url, {
      method: 'post',
      headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
      },
      body: 'foo=bar&lorem=ipsum'
    }).then(function() { // Additional code });
    </script>

জাভাস্ক্রিপ্ট পার্সিং বিলম্বিত করুন

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

দীর্ঘক্ষণ চলমান জাভাস্ক্রিপ্ট এড়িয়ে চলুন

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

সিএসএস ব্যবহার অপ্টিমাইজ করুন

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

নথির মাথায় CSS রাখুন

HTML ডকুমেন্টের মধ্যে যত তাড়াতাড়ি সম্ভব সমস্ত CSS সংস্থান নির্দিষ্ট করুন যাতে ব্রাউজার <link> ট্যাগগুলি আবিষ্কার করতে পারে এবং যত তাড়াতাড়ি সম্ভব CSS-এর জন্য অনুরোধ পাঠাতে পারে।

CSS আমদানি এড়িয়ে চলুন

CSS আমদানি ( @import ) নির্দেশিকা একটি স্টাইলশীটকে অন্য স্টাইলশীট ফাইল থেকে নিয়ম আমদানি করতে সক্ষম করে। যাইহোক, এই নির্দেশগুলি এড়িয়ে চলুন কারণ এগুলি জটিল পথে অতিরিক্ত রাউন্ডট্রিপগুলি প্রবর্তন করে: আমদানি করা CSS সংস্থানগুলি শুধুমাত্র @import নিয়ম সহ CSS স্টাইলশীট প্রাপ্ত এবং পার্স করার পরেই আবিষ্কৃত হয়।

ইনলাইন রেন্ডার-ব্লকিং CSS

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

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