DavidWalshBlog-এ ক্রমবর্ধমান লেআউট শিফট সমস্যা সমাধান করা

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

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

দাঁড়াও, সিএলএস কি?

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

CLS এবং বাকি কোর ওয়েব ভাইটালগুলি অত্যন্ত গুরুত্বপূর্ণ। শুধু তাই নয় যে তারা ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করে, বরং তারা অনুসন্ধানে একটি সাইটের পেজর্যাঙ্ককে প্রভাবিত করে। এবং সার্চ ট্রাফিক ব্লগার, মিডিয়া সাইট, ই-কমার্স স্টোর এবং ওয়েবসাইট সহ প্রায় সকলের জন্যই জীবন।

আমরা যদি সাইটের CLS সমস্যা ঠিক করতে পারি, তাহলে আমরা পাঠকদের আরও দ্রুত অভিজ্ঞতা দেব এবং সার্চ র‌্যাঙ্কিং বাড়িয়ে দেব যাতে ডেভিড আরও বেশি লোককে সাহায্য করতে পারে। একটি মহান উদ্দীপক মত শোনাচ্ছে, আসুন এটা বের করা যাক.

Google Lighthouse সঙ্গে বিপর্যস্ত

একটি কর্মক্ষমতা সমস্যা খুঁজে পেতে, অনেক বিকাশকারী Google Lighthouse মত একটি টুল ব্যবহার করবে। আমি ডেভিডের সাইটে একটি লাইটহাউস রিপোর্ট চালিয়েছি এবং আমি যা পেয়েছি তা এখানে।

একটি নিখুঁত স্কোর! চলো এটা গুছিয়ে বাসায় যাই।

মুশকিল হলো Google Lighthouse একটি মিথ্যা. প্রকৃত ব্যবহারকারীদের এই কর্মক্ষমতা থাকবে না। এই স্কোর শুধুমাত্র একটি একক পরীক্ষার প্রতিনিধিত্ব করে, আমার বিদ্যুত-দ্রুত কম্পিউটার থেকে, মার্কিন যুক্তরাষ্ট্রে, একটি দ্রুত ব্রডব্যান্ড সংযোগে।

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

CLS সমস্যা কোথায়?

ডেভিড দীর্ঘদিন ধরে লিখছে এবং তার সাইটে শত শত পোস্ট রয়েছে। অনুরোধ মেট্রিক্স প্রতি পৃষ্ঠায় CLS স্কোর ট্র্যাক করে যাতে আমরা সমস্যাগুলিকে শূন্য করতে পারি।

বৃহত্তম ট্রাফিক পৃষ্ঠা হল রুট পৃষ্ঠা, এবং এটি একটি ভাল CLS আছে। কিন্তু তার অনেক পোস্ট, লাইক গ্র্যান্ড পু ওয়ার্ল্ড খেলুন এবং পর্নহাব ইন্টারভিউ সমস্যাযুক্ত CLS স্কোর আছে। আমরা CLS এর জন্য দায়ী উপাদানগুলিকেও ট্র্যাক করতে পারি, এবং বেশিরভাগ পোস্টের জন্য main > article > p. তার মানে প্রবন্ধের প্রথম অনুচ্ছেদ জিনিসটি স্থানান্তরিত হচ্ছে। কেন এটা করতে হবে?

সবচেয়ে খারাপ CLS স্কোর সহ এই পোস্টগুলি সম্পর্কে সাধারণ কী? ছবি চিত্রগুলি CLS সমস্যার একটি খুব সাধারণ কারণ কারণ একটি ব্রাউজার সর্বদা এটি ডাউনলোড না হওয়া পর্যন্ত একটি ছবি কত বড় তা জানে না। ব্রাউজারটি অনুমান করে যে এটি 0x0 ইমেজ না থাকা পর্যন্ত স্থানান্তর এর চারপাশের সবকিছু জায়গা তৈরি করতে।

প্রচুর ছবি সহ পোস্টগুলি অনেকবার স্থানান্তরিত হবে কারণ প্রতিটি ছবি ডাউনলোড করা হয়েছিল এবং নিবন্ধটি নতুন বিষয়বস্তুর জন্য জায়গা তৈরি করতে স্থানান্তরিত হয়েছিল৷

CLS এর জন্য সঠিকভাবে ছবি ব্যবহার করা

ইমেজ ব্যবহার করার সময় লেআউট পরিবর্তন এড়াতে, আমাদের ব্রাউজারকে ইঙ্গিত দিতে হবে যে ছবিগুলি কত বড় হবে। ব্রাউজারটি ডাউনলোড করা শেষ হলে ছবিটির জন্য লেআউটে স্থান সংরক্ষণ করতে এই ইঙ্গিতগুলি ব্যবহার করবে।

<img src="https://davidwalsh.name/path/to/image" width="300" height="100" />

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

এছাড়াও লক্ষ্য করুন যে নেই px ইউনিট নির্দিষ্ট।

ওয়ার্ডপ্রেসে ছবির সাইজ

DavidWalsh.name ওয়ার্ডপ্রেসে হোস্ট করা হয়েছে, যেখানে এটি করার জন্য কিছু বিল্ট-ইন টুল রয়েছে। আমরা কাজে লাগাতে পারি wp_image_src_get_dimensions তিনি যে চিত্রগুলি ব্যবহার করছেন তার মাত্রা পেতে এবং সেগুলিকে মার্কআপে যুক্ত করুন৷

প্রমাণ করা কাজ করে

ডেভিড কিছু দিন আগে চিত্রটি পরিবর্তন করেছে এবং আমরা ইতিমধ্যে একটি উন্নতি দেখতে পাচ্ছি। CLS 20% কমে 0.123 এ এসেছে। আমরা এখন CLS এর “ভাল” পরিসরের সত্যিই কাছাকাছি।

ফন্টের চারপাশে বাছাই করার জন্য এখনও কিছু সমস্যা আছে, তবে এটি অন্য সময়ের জন্য একটি গল্প এবং অন্য পোস্ট হবে।

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

প্লাস এটা বিনামূল্যে, তাই এটা জন্য যাচ্ছে যে পেয়েছিলাম.