TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

3

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

Cumulative Layout Shift কি?

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

সম্পর্কিত: গুগল ক্রোমে ইমেজ অলস লোডিং কীভাবে সক্ষম করবেন?

ক্রমবর্ধমান লেআউট শিফট ত্রুটি পরীক্ষা করা হচ্ছে

গুগল পেজস্পিড ইনসাইটস (পিএসআই) টুল খুলুন এবং আপনার ওয়েবপেজের গতি পরীক্ষা করুন। আপনার সাইটে ক্রমবর্ধমান লেআউট শিফট সমস্যা বিদ্যমান তা নিশ্চিত করতে আপনি ক্ষেত্রের ডেটা বা মূল সংক্ষিপ্তসারটি পরীক্ষা করতে পারেন। আপনি লোডিংয়ের ক্রমবর্ধমান শতাংশ খুঁজে পেতে অগ্রগতি বারের উপর ঘুরতে পারেন যেখানে পৃষ্ঠা / সাইটে সমস্যাটি বিদ্যমান।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

পিএসআইতে সিএলএস সমস্যা চেক করুন

সমস্যা সৃষ্টিকারী উপাদানগুলি খুঁজে পেতে, ডায়াগনস্টিক বিভাগে স্ক্রল করুন এবং "বড় লেআউট শিফট এড়িয়ে চলুন" এর অধীনে চেক করুন। এখানে, গুগল পরীক্ষিত পৃষ্ঠায় লেআউট শিফ্টের কারণগুলির তালিকা দেখাবে।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

বড় লেআউট শিফট এড়িয়ে চলুন

গুগল সার্চ কনসোলে বিস্তারিত দেখুন

আপনি আপনার গুগল সার্চ কনসোল অ্যাকাউন্টে সিএলএস সমস্যা সহ পৃষ্ঠার ইউআরএল দেখতে পারেন । আপনার অ্যাকাউন্টে লগ ইন করার পরে, "বর্ধিতকরণ" বিভাগের অধীনে "কোর ওয়েব ভাইটালস" বিভাগে যান। আপনি "CLS ইস্যু: 0.25 (মোবাইল) / (ডেস্কটপ)" এর বেশি পৃষ্ঠাগুলি দেখতে মোবাইল এবং ডেস্কটপ উভয়ের জন্য রিপোর্ট খুঁজে পেতে পারেন।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

গুগল সার্চ কনসোলে CLS ইস্যু

CLS সমস্যা এবং গড় CLS সময় আক্রান্ত আপনার সাইটে নমুনা URL দেখতে সমস্যাটিতে ক্লিক করুন। নিচের সারণী অনুসারে গুগল সিএলএসকে একটি সমস্যা হিসেবে বিবেচনা করবে:

ভাল উন্নতির প্রয়োজন দরিদ্র
<0.1 সেকেন্ড 0.1 থেকে 0.25 সে > 0.25 সে

অতএব, পিএসআই টুলে এই সবুজ/হলুদ করতে এবং আপনার সার্চ কনসোল অ্যাকাউন্ট থেকে ত্রুটিগুলি দূর করার জন্য আপনাকে অবশ্যই CLS সময় 0.25 সেকেন্ডের কম করতে হবে।

ওয়ার্ডপ্রেসে Cumulative Layout Shift Error ফিক্স করুন

এখানে কিছু বিষয় রয়েছে যা ওয়ার্ডপ্রেস সাইটে ক্রমবর্ধমান লেআউট শিফট বিলম্বের কারণ হতে পারে। আসুন প্রতিটি সমস্যা এবং সম্ভাব্য সমাধানগুলি বিস্তারিতভাবে ব্যাখ্যা করি।

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

আপনি উপরের স্ক্রিনশটে "বড় লেআউট শিফট এড়িয়ে চলুন" দেখেন, প্রথম আইটেমটি হল "<div class =" row footer-row ">"। এটি আশ্চর্যজনক কারণ ভাঁজ এলাকার উপরে ফুটার বিভাগ লোড করার কোন সম্ভাবনা নেই। চেক করার পরে, আমরা বুঝতে পেরেছি এটি "সিপিএস ডেলিভারি অপ্টিমাইজ করুন" বিকল্পের কারণে WP রকেট প্লাগইন দিয়ে সক্ষম হয়েছে। এই বিকল্পটি সমালোচনামূলক CSS তৈরি করবে এবং রেন্ডার ব্লকিং CSS অপসারণের জন্য এটি হেডার বিভাগে ইনলাইন করবে। যাইহোক, এটি অনেক ক্ষেত্রে ক্রমবর্ধমান লেআউট শিফট সমস্যার দিকে পরিচালিত করবে। আপনি যদি হেডারে CSS ইনলাইন করার জন্য WP Rocket বা অন্য কোন ক্যাশিং প্লাগইন ব্যবহার করেন, তাহলে সেই অপশনটি অক্ষম করুন এবং CLS বিলম্ব উন্নত করতে সাহায্য করে কিনা তা পরীক্ষা করুন।

এটিএফ এ 2 অ্যাডসেন্স এবং অন্যান্য বিজ্ঞাপন স্ক্রিপ্ট

অনেক প্রকাশক তাদের অনলাইন সামগ্রী নগদীকরণের জন্য গুগল অ্যাডসেন্স বা অন্যান্য বিজ্ঞাপন নেটওয়ার্ক ব্যবহার করে । বিজ্ঞাপন দেখানোর জন্য আপনাকে আপনার ওয়েবপেজে জাভাস্ক্রিপ্ট বিজ্ঞাপন কোডের একটি অংশ সন্নিবেশ করতে হবে। সাধারণত, বিজ্ঞাপনের দৃশ্যমানতা এবং উপার্জন বৃদ্ধির জন্য আপনাকে ভাঁজ (ATF) এলাকায় বিজ্ঞাপনের কোড সন্নিবেশ করতে হবে। যাইহোক, এটি সরাসরি পৃষ্ঠা লোডিং স্পিডকে প্রভাবিত করবে এবং গুগল পেজস্পিড ইনসাইট (পিএসআই) টুলে ক্রমবর্ধমান লেআউট শিফট ত্রুটি তৈরি করবে।

ভাঁজ বিষয়বস্তুর উপরে সম্পূর্ণ লোড হওয়ার পরে, আপনার বিজ্ঞাপনটি লোড করা শুরু করবে এবং বিষয়বস্তুকে নিচে ঠেলে দেবে।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

বিজ্ঞাপনের কারণে লেআউট শিফট

এই সমস্যাটি সমাধান করার জন্য কয়েকটি বিকল্প রয়েছে। একটি হল WP রকেটের মত প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেসে বিজ্ঞাপনের স্ক্রিপ্ট স্থগিত করা । যাইহোক, এটি আপনার বিজ্ঞাপনের ছাপকে প্রভাবিত করবে এবং হারের মাধ্যমে ক্লিক করলে সামগ্রিক উপার্জন হ্রাস পাবে।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

বিলম্ব বিজ্ঞাপন জাভাস্ক্রিপ্ট এক্সিকিউশন

দ্বিতীয় বিকল্প হল গুগলের সুপারিশ অনুযায়ী ভাঁজ এলাকার উপরে নির্দিষ্ট প্রস্থের বিজ্ঞাপন ব্যবহার করা । দুর্ভাগ্যবশত, গুগল এটাও স্পষ্ট করে দেয় যে প্রতিক্রিয়াশীল বা তরল বিজ্ঞাপন দিয়ে নির্দিষ্ট প্রস্থ ব্যবহার করা সম্ভব নয়।

বিজ্ঞাপনের বিষয়বস্তুর অনুরোধ করার আগে এই স্লটগুলির জন্য স্থান সংরক্ষণ করা সম্ভব নয় এবং তরল আকারের বিজ্ঞাপনগুলি সর্বদা লেআউট পরিবর্তনের কারণ হয়। তরল বিজ্ঞাপন স্লটগুলির সাথে কাজ করার সময় লেআউট শিফটের প্রভাবগুলি হ্রাস করতে, আমরা নিম্নলিখিতগুলি সুপারিশ করি: কেবল ভাঁজের নীচে স্লটগুলির জন্য তরল আকার ব্যবহার করুন।

গুগল

অতএব সারাংশে, আপনি সমস্যাটি সমাধান করতে পারবেন না যদি না আপনি এটিএফ এলাকা থেকে বাহ্যিক বিজ্ঞাপন কোডটি সরিয়ে ফেলেন। আপনি আপনার সাইটের হেডার বিভাগে যে তৃতীয় পক্ষের কোড রেখেছেন তার ক্ষেত্রে এটি সত্য।

3 সঠিক ছবির মাত্রা ব্যবহার করুন

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

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

ছবির জন্য প্রস্থ এবং উচ্চতা অনুপস্থিত

4 ফন্ট বিলম্বিত কন্টেন্ট লোড হচ্ছে

প্রতিটি ওয়েবসাইট ফন্ট ব্যবহার করে। এটি ক্রমবর্ধমান লেআউট শিফট সমস্যা তৈরি করবে বিশেষ করে যখন গুগল ফন্টের মত তৃতীয় পক্ষের পরিষেবা ব্যবহার করে। যেহেতু, গুগল ফন্টগুলিকে বহিরাগত সার্ভার থেকে লোড করতে হবে, এটি বিজ্ঞাপন কোডের মতো অনুরূপ ক্রমবর্ধমান লেআউট শিফট সমস্যা তৈরি করবে। আপনি PSI তে এই সমস্যাটি দেখতে পারেন "ওয়েবফন্ট লোডের সময় টেক্সট দৃশ্যমান থাকে তা নিশ্চিত করুন" ইঙ্গিত করে যে দৃশ্যমান সামগ্রী লোড করতে বিলম্ব হচ্ছে।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

ফন্ট সমস্যা

  • এই সমস্যা সমাধানের কার্যকরী উপায় হল একটি caching প্লাগইন ব্যবহার করা যা preconnect এবং DNS prefetch ডোমেইন যেমন fonts.googleapis.com এবং fonts.gistatic.com ডোমেইন। এটি আপনাকে গুগল ফন্টস সার্ভার প্রি -কানেক্ট করে ফন্ট লোডিং দ্রুত করতে সাহায্য করবে। এসজি অপ্টিমাইজার, ডব্লিউপি রকেট (স্বয়ংক্রিয়) এবং অন্যান্য অনেক প্লাগইন এই বৈশিষ্ট্যটি প্রদান করে যা আপনি এই উদ্দেশ্যে ব্যবহার করতে পারেন। উপরন্তু, আপনি ফন্ট পরিবারের সংখ্যা সীমিত করতে পারেন এবং ওজন ডাউনলোড ফাইলের আকার কমাতে পারেন।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

এসজি অপ্টিমাইজার ওয়েব ফন্ট অপ্টিমাইজেশন

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

মেনু এবং এটিএফ -এ 5 টি ফন্ট আইকন

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

ওয়েবমাস্টাররা "ডিফার অফস্ক্রিন ইমেজ" -এ পিএসআই -এর সতর্কতা ভুল বুঝেছেন। এই সতর্কতাটি তখন ঘটে যখন আপনি ভাঁজ (BTF) বিষয়বস্তুর নীচে লোড হওয়া ছবিগুলি অলস না করেন। যাইহোক, যদি আপনি ওয়ার্ডপ্রেসে একটি প্লাগইন ব্যবহার করেন, এইচটিএমএল সহ সমস্ত ছবি

পিএসআই টুলে CLS সময় কমানোর জন্য, আপনাকে অলস লোডিং থেকে লোগো ইমেজ বাদ দিতে হবে। সমাধান আপনার প্লাগইন অলস আপনার ইমেজ লোড করার জন্য ব্যবহার উপর নির্ভর করে। উদাহরণস্বরূপ WP রকেটে, "মিডিয়া> LazyLoad" বিভাগে যান এবং অলস লোডিং থেকে বাদ দিতে লোগোর নাম বা URL প্রদান করুন।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

অলস লোডিং থেকে লোগো বাদ দিন

এটিএফ -এ 7 অলস লোডিং ইমেজ স্লাইডার

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

সম্পর্কিত: আপনার ওয়ার্ডপ্রেস সাইটকে র‍্যাঙ্ক করার জন্য 25 টি এসইও টিপস

8 jQuery এর মত জাভাস্ক্রিপ্ট ব্লক করা রেন্ডার

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

গুগল সার্চ কনসোলে ফিক্স যাচাই করা হচ্ছে

সমস্যা সমাধানের পরে, গুগল সার্চ কনসোল অ্যাকাউন্টে আপনার বৈধতা জমা দিতে ভুলবেন না। আপনি "কোর ওয়েব ভাইটালস" বিভাগে ফিরে যেতে পারেন এবং পুরো সাইটের জন্য বৈধতা জমা দিতে পারেন।

ওয়ার্ডপ্রেসে ক্রমবর্ধমান লেআউট শিফট কিভাবে ঠিক করবেন?

গুগল সার্চ কনসোলে CLS ইস্যু যাচাই করা হচ্ছে

আপনার সাইটে CLS ইস্যু চেক করতে এবং সার্চ কনসোল অ্যাকাউন্টে সংশ্লিষ্ট ফলাফল দেখাতে Google এর 28 দিন পর্যন্ত সময় লাগবে।

উপসংহার

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

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত