এটি এখন কী প্রয়োজন তা নির্ধারণ করুন—মার্কআপে প্রথমে কি দেখা যায় তা নয়
লেজি লোডিং একটি রিসোর্সকে অ-ক্রিটিক্যাল হিসেবে চিহ্নিত করে যতক্ষণ না সেটি প্রয়োজন হয়। প্রকৃত জার্নির মাধ্যমে শ্রেণিবিভাগ করুন: প্রথম-ভিউ জরুরি উপাদান, বহির্গ্রহণে (below-the-fold) মিডিয়া, ঐচ্ছিক এমবেড, এবং পরে ব্যবহৃত রুট বা প্যানেল জন্য কোড। CMS-এ অবস্থানই যথেষ্ট প্রমাণ নয়; একটি ইমেজ একটি টেমপ্লেটে অফস্ক্রিন হতে পারে এবং অন্যটিতে কেন্দ্রীয় হতে পারে।
ঠান্ডা লোডগুলো একটি ছোট ফোন ও একটি সাধারণ ডেস্কটপে পরীক্ষা করুন। ক্যাম্পেইন লিঙ্ক এবং ইন-পেজ অ্যাঙ্করও পরীক্ষা করুন, কারণ এগুলো ভিজিটরকে পৃষ্ঠার আরও নিচে নিয়ে যেতে পারে। সেই পর্যালোচনা আপনাকে বলে দেবে কোনগুলো এমন যা স্ক্রল-ট্রিগারড অনুরোধ ছাড়া প্রস্তুত থাকতে হবে।
প্রাথমিক টাস্ক, দৃশ্যমান নেভিগেশন, মূল কপি এবং প্রথম অর্থবহ ভিজ্যুয়াল অবিলম্বে উপলব্ধ থাকা উচিত।
নিচের-পৃষ্ঠার গ্যালারী, মানচিত্র, সোশ্যাল এমবেড, অফস্ক্রিন প্লেয়ার, এবং বেছে নেওয়া হয়নি এমন ফিচারগুলোর জন্য কোড সাধারণত প্রার্থী।
হিরো এবং প্রাথমিক ভিউকে রক্ষা করুন
পৃষ্ঠাটি খোলার সময় সম্ভাব্যভাবে দৃশ্যমান এমন কনটেন্ট অলসভাবে লোড করবেন না। Google সতর্ক করে, এবং web.dev-এর ফোকাসড বিশ্লেষণ দেখায় যে প্রাথমিক-ভিউ ইমেজগুলো লেজি-লোড করলে LCP দেরি হতে পারে। LCP উপাদানটি হতে পারে হিরো, প্রোডাক্ট ইমেজ, পোস্টার, বা টেক্সট; অনুমান ছাড়া প্রতিটি গুরুত্বপূর্ণ টেমপ্লেটে এটি যাচাই করুন।
নিশ্চিত LCP ইমেজকে eager (তৎক্ষণাত) লোড করুন। যদি টেস্টে দেখা যায় যে একটি ক্রিটিক্যাল ইমেজ নেটওয়ার্ক মনোযোগ হারায়, তাহলে তার জন্য উচ্চ fetch-priority ইঙ্গিত টেস্ট করুন। এটি একটি হিন্ট, কমান্ড নয়। একটি ক্রিটিক্যাল CSS ব্যাকগ্রাউন্ড ইমেজ পার্সার সরাসরি আবিষ্কার করতে না পারলে সেটির আগে preload প্রয়োজন হতে পারে; সেই কেস পরিমাপ করুন।
CMS এবং প্লাগইন ডিফল্ট সেটিংস চেক করুন—ফিচার্ড ইমেজগুলো তালিকা পৃষ্ঠায় ভুলভাবে lazy হিসেবে চিহ্নিত আছে কি না।
শুধু ডেস্কটপ ডিজাইন প্রিভিউ না করে ঠান্ডা মোবাইল ও ডেস্কটপ লোড ব্যবহার করে দেখুন।
মিডিয়া আসার আগে জায়গা রিজার্ভ করুন
Cumulative Layout Shift (CLS) হলো দৃশ্যমান কনটেন্টের অনাকাঙ্খিত স্থানচ্যুতি। একটি.defer করা ইমেজ যদি উচ্চতা না জানায় তাহলে তা পাঠ্য ও কন্ট্রোল টেনে নিয়ে যেতে পারে, এমনকি পাঠক স্ক্যান করা শুরু করলেই বা বাটন ধরার আগে। এটা কেবল একটি মেট্রিক সমস্যা নয়—ইন্টার্যাকশন ঝুঁকি।
ইমেজ ও ভিডিওর জন্য সঠিক width এবং height অ্যাট্রিবিউট দিন, অথবা CSS aspect-ratio দিয়ে আকৃতি রিজার্ভ করুন। কম্পোনেন্টের চূড়ান্ত ফুটপ্রিন্ট নিয়ে একটি প্লেসহোল্ডার ব্যবহার করুন। তৃতীয়-পক্ষ ফ্রেমের জন্য তার উচ্চতা রিজার্ভ করুন এবং একটি স্পষ্ট লোডিং বা অনুপলব্ধ অবস্থা দেখান।
সম্ভব হলে অ্যাসেটের সাথে মিডিয়া মাত্রা সংরক্ষণ করুন; মিশ্র ইমেজ আকৃতির ক্ষেত্রে সাধারণ রেশিও নির্ভরযোগ্য নয়।
স্ক্রল করুন, ফিল্টার করুন, প্যানেল খুলুন, মোবাইল ডিভাইস রোটেট করুন, এবং ব্যাক নেভিগেশন ব্যবহার করে পরে হওয়া শিফটগুলো সনাক্ত করুন।
কনটেন্ট আবিষ্কারযোগ্য এবং ইন্টার্যাকশন বোধগম্য রাখুন
Google Search Central জানায় যে Google পেজে স্ক্রল বা ক্লিক করে ইন্টার্যাকট করে না। গুরুত্বপূর্ণ লেজি-লোডেড কনটেন্ট দৃশ্যমান হলে লোড করা উচিত, এবং রেন্ডার করা HTML আশা করা কনটেন্ট বা মিডিয়া URL-গুলো প্রকাশ করা উচিত। বাস্তবায়নের পরে representative পৃষ্ঠাগুলো Search Console-এ ইনস্পেক্ট করুন।
একটি ইনডেক্সেবল ইনফিনিট লিস্টের জন্য প্রতিটি স্থায়ী অংশে পেজিনেটেড রুট থাকা প্রয়োজন: একটি স্থায়ী ইউনিক URL, ওই URL-এ স্থিতিশীল কনটেন্ট, এবং সিরিজের মাধ্যমে লিংক। এটি ব্যবহারকারীর জন্য শেয়ারযোগ্য স্থানও তৈরি করে।
কোনো একশন কনটেন্ট উন্মোচিত করলে, কন্ট্রোলটি কী-বোর্ডে অপারেবেল রাখুন এবং ফলাফলটি বোধগম্য করুন। ‘রেজাল্টস লোডেড’ ধরনের অর্থবহ নন-ফোকাস আপডেটের জন্য প্রোগ্রাম্যাটিক স্ট্যাটাস প্রকাশ করুন যাতে সহায়তা প্রযুক্তিগুলো ফোকাস সরানো ছাড়াই ঘোষণা করতে পারে।
পণ্য বিবরণ, আর্টিকেল বডি, যোগ্যতা তথ্য, এবং টাস্ক নির্দেশাবলি প্রথমে একজন ভিজিটর অ্যাকশনের পরে থাকা উচিত নয়।
প্রয়োজনীয় চেকআউট বা অথেনটিকেশন কন্ট্রোল দেরি করবেন না। পেমেন্ট, আইডেন্টিটি, এবং তৃতীয়-পক্ষ স্ক্রিপ্ট পরিবর্তনের ক্ষেত্রে প্রমাণিত সিকিউরিটি ও কমপ্লায়েন্স রিভিউয়ারদের মূল্যায়ন নিন।
কম ক্ষণস্থায়ী (least fragile) মেকানিজম ব্যবহার করুন
সাধারণ অফস্ক্রিন ইমেজ ও iframe-এর জন্য নেটিভ ব্রাউজার লেজি লোডিং সাধারণত সবচেয়ে সহজ সূচনা। ব্রাউজার ঠিক করে কখন নিকট-ভিউপোর্ট অনুরোধ শুরু হবে; সেই দূরত্ব কোন গ্যারান্টি নয়। উইন্ডো লোড ইভেন্ট তখনও ফায়ার করতে পারে যখন লেজি রিসোর্সগুলো অসম্পূর্ণ থাকে।
যখন নামকৃত কম্পোনেন্ট কাস্টম অ্যাক্টিভেশন দরকার—উদাহরণস্বরূপ এক্সপেনসিভ প্যানেলটি প্রদর্শিত হওয়ার ঠিক আগে মাউন্ট করা—তখন Intersection Observer ব্যবহার করুন। অবজারভারটি সংকীর্ণ রাখুন এবং দ্রুত স্ক্রলিংয়ের জন্য পর্যাপ্ত আগে কাজ শুরু করুন। নন-ইনিশিয়াল রুট বা ঐচ্ছিক ফিচারগুলোর জন্য কোড স্প্লিটিং ব্যবহার করুন, তা বর্তমান টাস্ক দেরি করার বাহানা বানাবেন না।
যদি যোগ করা আচরণটি পরীক্ষিত প্রয়োজন সমাধান না করে, তাহলে একটি সহজ সর্সকে data attributes, একাধিক স্ক্রিপ্ট, এবং একটি লাইব্রেরি দিয়ে প্রতিস্থাপন করবেন না।
একটি ঐচ্ছিক এমবেডের জন্য একটি স্পষ্ট ফল-ফলব্যাক বা omit স্টেট থাকা উচিত, স্থায়ী স্পিনার নয়।
পরিমাপন, রিলিজ এবং রেমিডিয়েশন একসাথে করুন
একই URL, ক্যাশ স্টেট, ভিউপোর্ট, এবং ইউজার পাথ-এ একটি বেসলাইন এবং প্রার্থী তুলনা করুন। ঠান্ডা, সীমাবদ্ধ মোবাইল টেস্টিং সহ যেখানে সম্ভব রিয়েল-ডিভাইস চেক করুন। LCP, দৃশ্যমান সিকোয়েন্স, লেআউট শিফট, মিডিয়া এরর, রেন্ডার করা HTML, এবং অপরিহার্য অ্যাকশনগুলো রেকর্ড করুন। ফিল্ড ডেটা ল্যাব টেস্টিংকে পরিপূরক করে।
রিভার্সিবল, টেমপ্লেট-স্কোপড পরিবর্তন শিপ করুন। eager থেকে deferred করা অ্যাসেটগুলো রেকর্ড করুন, ডিপ্লয়মেন্ট রেফারেন্স, ক্যাশ অ্যাকশন, মালিক, এবং প্রথম রোলব্যাক স্টেপ নথিবদ্ধ করুন। যদি LCP lazy হয়ে যায় বা একটি কনভার্শন পথ অসম্পূর্ণ হয়ে পড়ে, সেই ক্রিটিক্যাল অ্যাসেট থেকে রুলটি সরিয়ে আবার যাচাই করুন। থিম, CMS, ইমেজ-সার্ভিস, ট্যাগ, বা এমবেড পরিবর্তনের পরে পুনরায় চেক করুন।
চলমান-স্ট্যাটাস রিপোর্টিং বা অ্যালার্টিংয়ের পরিবর্তে ভাঙা অভিজ্ঞতা প্রতিরোধ ও রেমিডিয়েশনে ফোকাস করুন।
প্রতিটি ইমেজ সাইট-ওয়াইড টিউন করার আগে প্রভাবিত টেমপ্লেট সেটিং reverese করুন।