ওয়েব ভাইটাল জন্য CSS

ওয়েব ভাইটাল অপ্টিমাইজ করার জন্য CSS-সম্পর্কিত কৌশল

Katie Hempenius

Una Kravets

আপনি যেভাবে আপনার শৈলী লেখেন এবং লেআউট তৈরি করেন তা কোর ওয়েব ভাইটালগুলিতে একটি বড় প্রভাব ফেলতে পারে৷ এটি ক্রমবর্ধমান লেআউট শিফট (CLS) এবং সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এর জন্য বিশেষভাবে সত্য।

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

লেআউট

DOM-এ কন্টেন্ট ঢোকানো হচ্ছে

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

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

শনাক্ত করুন

বাতিঘর "বড় লেআউট শিফট এড়িয়ে চলুন" অডিট পৃষ্ঠার উপাদানগুলিকে চিহ্নিত করে যা স্থানান্তরিত হয়েছে৷ এই ডেমোর জন্য, ফলাফলগুলি দেখতে এইরকম:

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

ঠিক করুন

নিখুঁত বা স্থির অবস্থান ব্যবহার করে পৃষ্ঠার নীচে কুকি নোটিশ রাখুন।

আগে:

.banner {
  position: sticky;
  top: 0;
}

পরে:

.banner {
  position: fixed;
  bottom: 0;
}

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

ছবি

ছবি এবং বৃহত্তর কন্টেন্টফুল পেইন্ট (LCP)

চিত্রগুলি সাধারণত একটি পৃষ্ঠার বৃহত্তম সামগ্রীযুক্ত পেইন্ট (LCP) উপাদান। অন্যান্য পৃষ্ঠা উপাদান যা LCP উপাদান হতে পারে তার মধ্যে পাঠ্য ব্লক এবং ভিডিও পোস্টার চিত্র অন্তর্ভুক্ত। LCP উপাদান লোড হওয়ার সময় LCP নির্ধারণ করে।

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

উদাহরণ সাইটে, কুকি নোটিশের ব্যাকগ্রাউন্ড ইমেজ আসলে একটি বড় ইমেজ। LCP উন্নত করতে, আপনি প্রভাব তৈরি করতে একটি চিত্র লোড করার পরিবর্তে CSS-এ গ্রেডিয়েন্ট পেইন্ট করতে পারেন।

ঠিক করুন

একটি চিত্রের পরিবর্তে একটি CSS গ্রেডিয়েন্ট ব্যবহার করতে .banner CSS পরিবর্তন করুন:

আগে:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

পরে:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

ছবি এবং লেআউট পরিবর্তন

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

শনাক্ত করুন

সুস্পষ্ট width এবং height ছাড়াই চিত্রগুলি সনাক্ত করতে, লাইটহাউসের "চিত্রের উপাদানগুলির সুস্পষ্ট প্রস্থ এবং উচ্চতা রয়েছে" অডিট ব্যবহার করুন৷

এই উদাহরণে, হিরো ইমেজ এবং আর্টিকেল ইমেজ উভয়ই width এবং height বৈশিষ্ট্য অনুপস্থিত।

ঠিক করুন

লেআউট পরিবর্তন এড়াতে এই চিত্রগুলিতে width এবং height বৈশিষ্ট্যগুলি সেট করুন৷

আগে:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

পরে:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

হরফ

ফন্ট টেক্সট রেন্ডারিং বিলম্বিত করতে পারে এবং লেআউট পরিবর্তন ঘটাতে পারে। ফলে দ্রুত ফন্ট ডেলিভারি করা জরুরি।

বিলম্বিত পাঠ্য রেন্ডারিং

ডিফল্টরূপে, একটি ব্রাউজার অবিলম্বে একটি পাঠ্য উপাদান রেন্ডার করবে না যদি এর সংশ্লিষ্ট ওয়েব ফন্টগুলি এখনও লোড না হয়। এটি একটি "আনস্টাইল না করা পাঠ্যের ফ্ল্যাশ" (FOUT) প্রতিরোধ করার জন্য করা হয়। অনেক পরিস্থিতিতে, এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) বিলম্বিত করে। কিছু পরিস্থিতিতে, এটি বিলম্বিত করে Largest Contentful Paint (LCP)।

লেআউট স্থানান্তর

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

শনাক্ত করুন

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

ফন্টের অনুরোধের জন্য কতক্ষণ লাগে তা দেখতে, টাইমিং ট্যাবে ক্লিক করুন। যত তাড়াতাড়ি একটি ফন্ট অনুরোধ করা হয়, তত তাড়াতাড়ি এটি লোড এবং ব্যবহার করা যেতে পারে।

একটি ফন্টের জন্য অনুরোধ চেইন দেখতে, ইনিশিয়েটর ট্যাবে ক্লিক করুন। সাধারণভাবে বলতে গেলে, অনুরোধের চেইন যত ছোট হবে, তত তাড়াতাড়ি ফন্টের অনুরোধ করা যাবে।

ঠিক করুন

এই ডেমো Google Fonts API ব্যবহার করে। Google Fonts <link> ট্যাগ বা @import স্টেটমেন্টের মাধ্যমে ফন্ট লোড করার বিকল্প প্রদান করে। <link> কোড স্নিপেটে একটি preconnect রিসোর্স ইঙ্গিত রয়েছে। এর ফলে @import সংস্করণ ব্যবহার করার চেয়ে দ্রুত স্টাইলশীট বিতরণ করা উচিত।

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

আপনার স্টাইলশীট থেকে নিম্নলিখিত @import বিবৃতিটি সরান:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

নথির <head> -এ নিম্নলিখিত <link> ট্যাগ যোগ করুন:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

এই লিঙ্ক ট্যাগগুলি ব্রাউজারকে Google ফন্টের দ্বারা ব্যবহৃত উত্সের সাথে একটি প্রাথমিক সংযোগ স্থাপন করতে এবং স্টাইলশীট লোড করার নির্দেশ দেয় যাতে মন্টসেরাট এবং রোবোটোর জন্য ফন্ট ঘোষণা রয়েছে। এই <link> ট্যাগগুলি যত তাড়াতাড়ি সম্ভব <head> এ স্থাপন করা উচিত।

অ্যানিমেশন

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

শনাক্ত করুন

লাইটহাউস "নন-কম্পোজিটেড অ্যানিমেশন এড়িয়ে চলুন" অডিট অ-পারফরম্যান্স অ্যানিমেশন সনাক্ত করতে সহায়ক হতে পারে।

ঠিক করুন

ট্রান্সফর্ম ব্যবহার করতে slideIn অ্যানিমেশন ক্রম পরিবর্তন করুন transform: translateX() margin-left সম্পত্তি স্থানান্তর করার পরিবর্তে।

আগে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

পরে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

সমালোচনামূলক CSS

স্টাইলশীটগুলি রেন্ডার-ব্লক করছে৷ এর মানে হল যে ব্রাউজারটি একটি স্টাইলশীটের সম্মুখীন হয়, ব্রাউজারটি স্টাইলশীটটি ডাউনলোড এবং পার্স না করা পর্যন্ত এটি অন্যান্য সংস্থানগুলি ডাউনলোড করা বন্ধ করবে৷ এটি LCP বিলম্বিত করতে পারে। কর্মক্ষমতা উন্নত করার জন্য, অব্যবহৃত CSS অপসারণ , সমালোচনামূলক CSS ইনলাইন করা এবং অ-সমালোচনামূলক CSS স্থগিত করার কথা বিবেচনা করুন।

উপসংহার

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

ওয়েব ভাইটাল অপ্টিমাইজ করার জন্য CSS-সম্পর্কিত কৌশল

Katie Hempenius

Una Kravets

আপনি যেভাবে আপনার শৈলী লেখেন এবং লেআউট তৈরি করেন তা কোর ওয়েব ভাইটালগুলিতে একটি বড় প্রভাব ফেলতে পারে৷ এটি ক্রমবর্ধমান লেআউট শিফট (CLS) এবং সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এর জন্য বিশেষভাবে সত্য।

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

লেআউট

DOM-এ কন্টেন্ট ঢোকানো হচ্ছে

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

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

শনাক্ত করুন

বাতিঘর "বড় লেআউট শিফট এড়িয়ে চলুন" অডিট পৃষ্ঠার উপাদানগুলিকে চিহ্নিত করে যা স্থানান্তরিত হয়েছে৷ এই ডেমোর জন্য, ফলাফলগুলি দেখতে এইরকম:

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

ঠিক করুন

নিখুঁত বা স্থির অবস্থান ব্যবহার করে পৃষ্ঠার নীচে কুকি নোটিশ রাখুন।

আগে:

.banner {
  position: sticky;
  top: 0;
}

পরে:

.banner {
  position: fixed;
  bottom: 0;
}

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

ছবি

ছবি এবং বৃহত্তর কন্টেন্টফুল পেইন্ট (LCP)

চিত্রগুলি সাধারণত একটি পৃষ্ঠার বৃহত্তম সামগ্রীযুক্ত পেইন্ট (LCP) উপাদান। অন্যান্য পৃষ্ঠা উপাদান যা LCP উপাদান হতে পারে তার মধ্যে পাঠ্য ব্লক এবং ভিডিও পোস্টার চিত্র অন্তর্ভুক্ত। LCP উপাদান লোড হওয়ার সময় LCP নির্ধারণ করে।

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

উদাহরণ সাইটে, কুকি নোটিশের ব্যাকগ্রাউন্ড ইমেজ আসলে একটি বড় ইমেজ। LCP উন্নত করতে, আপনি প্রভাব তৈরি করতে একটি চিত্র লোড করার পরিবর্তে CSS-এ গ্রেডিয়েন্ট পেইন্ট করতে পারেন।

ঠিক করুন

একটি চিত্রের পরিবর্তে একটি CSS গ্রেডিয়েন্ট ব্যবহার করতে .banner CSS পরিবর্তন করুন:

আগে:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

পরে:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

ছবি এবং লেআউট পরিবর্তন

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

শনাক্ত করুন

সুস্পষ্ট width এবং height ছাড়াই চিত্রগুলি সনাক্ত করতে, লাইটহাউসের "চিত্রের উপাদানগুলির সুস্পষ্ট প্রস্থ এবং উচ্চতা রয়েছে" অডিট ব্যবহার করুন৷

এই উদাহরণে, হিরো ইমেজ এবং আর্টিকেল ইমেজ উভয়ই width এবং height বৈশিষ্ট্য অনুপস্থিত।

ঠিক করুন

লেআউট পরিবর্তন এড়াতে এই চিত্রগুলিতে width এবং height বৈশিষ্ট্যগুলি সেট করুন৷

আগে:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

পরে:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

হরফ

ফন্ট টেক্সট রেন্ডারিং বিলম্বিত করতে পারে এবং লেআউট পরিবর্তন ঘটাতে পারে। ফলে দ্রুত ফন্ট ডেলিভারি করা জরুরি।

বিলম্বিত পাঠ্য রেন্ডারিং

ডিফল্টরূপে, একটি ব্রাউজার অবিলম্বে একটি পাঠ্য উপাদান রেন্ডার করবে না যদি এর সংশ্লিষ্ট ওয়েব ফন্টগুলি এখনও লোড না হয়। এটি একটি "আনস্টাইল না করা পাঠ্যের ফ্ল্যাশ" (FOUT) প্রতিরোধ করার জন্য করা হয়। অনেক পরিস্থিতিতে, এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) বিলম্বিত করে। কিছু পরিস্থিতিতে, এটি বিলম্বিত করে Largest Contentful Paint (LCP)।

লেআউট স্থানান্তর

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

শনাক্ত করুন

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

ফন্টের অনুরোধের জন্য কতক্ষণ লাগে তা দেখতে, টাইমিং ট্যাবে ক্লিক করুন। যত তাড়াতাড়ি একটি ফন্ট অনুরোধ করা হয়, তত তাড়াতাড়ি এটি লোড এবং ব্যবহার করা যেতে পারে।

একটি ফন্টের জন্য অনুরোধ চেইন দেখতে, ইনিশিয়েটর ট্যাবে ক্লিক করুন। সাধারণভাবে বলতে গেলে, অনুরোধের চেইন যত ছোট হবে, তত তাড়াতাড়ি ফন্টের অনুরোধ করা যাবে।

ঠিক করুন

এই ডেমো Google Fonts API ব্যবহার করে। Google Fonts <link> ট্যাগ বা @import স্টেটমেন্টের মাধ্যমে ফন্ট লোড করার বিকল্প প্রদান করে। <link> কোড স্নিপেটে একটি preconnect রিসোর্স ইঙ্গিত রয়েছে। এর ফলে @import সংস্করণ ব্যবহার করার চেয়ে দ্রুত স্টাইলশীট বিতরণ করা উচিত।

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

আপনার স্টাইলশীট থেকে নিম্নলিখিত @import বিবৃতিটি সরান:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

নথির <head> -এ নিম্নলিখিত <link> ট্যাগ যোগ করুন:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

এই লিঙ্ক ট্যাগগুলি ব্রাউজারকে Google ফন্টের দ্বারা ব্যবহৃত উত্সের সাথে একটি প্রাথমিক সংযোগ স্থাপন করতে এবং স্টাইলশীট লোড করার নির্দেশ দেয় যাতে মন্টসেরাট এবং রোবোটোর জন্য ফন্ট ঘোষণা রয়েছে। এই <link> ট্যাগগুলি যত তাড়াতাড়ি সম্ভব <head> এ স্থাপন করা উচিত।

অ্যানিমেশন

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

শনাক্ত করুন

লাইটহাউস "নন-কম্পোজিটেড অ্যানিমেশন এড়িয়ে চলুন" অডিট অ-পারফরম্যান্স অ্যানিমেশন সনাক্ত করতে সহায়ক হতে পারে।

ঠিক করুন

ট্রান্সফর্ম ব্যবহার করতে slideIn অ্যানিমেশন ক্রম পরিবর্তন করুন transform: translateX() margin-left সম্পত্তি স্থানান্তর করার পরিবর্তে।

আগে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

পরে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

সমালোচনামূলক CSS

স্টাইলশীটগুলি রেন্ডার-ব্লক করছে৷ এর মানে হল যে ব্রাউজারটি একটি স্টাইলশীটের সম্মুখীন হয়, ব্রাউজারটি স্টাইলশীটটি ডাউনলোড এবং পার্স না করা পর্যন্ত এটি অন্যান্য সংস্থানগুলি ডাউনলোড করা বন্ধ করবে৷ এটি LCP বিলম্বিত করতে পারে। কর্মক্ষমতা উন্নত করার জন্য, অব্যবহৃত CSS অপসারণ , সমালোচনামূলক CSS ইনলাইন করা এবং অ-সমালোচনামূলক CSS স্থগিত করার কথা বিবেচনা করুন।

উপসংহার

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

ওয়েব ভাইটাল অপ্টিমাইজ করার জন্য CSS-সম্পর্কিত কৌশল

Katie Hempenius

Una Kravets

আপনি যেভাবে আপনার শৈলী লেখেন এবং লেআউট তৈরি করেন তা কোর ওয়েব ভাইটালগুলিতে একটি বড় প্রভাব ফেলতে পারে৷ এটি ক্রমবর্ধমান লেআউট শিফট (CLS) এবং সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP) এর জন্য বিশেষভাবে সত্য।

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

লেআউট

DOM-এ কন্টেন্ট ঢোকানো হচ্ছে

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

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

শনাক্ত করুন

বাতিঘর "বড় লেআউট শিফট এড়িয়ে চলুন" অডিট পৃষ্ঠার উপাদানগুলিকে চিহ্নিত করে যা স্থানান্তরিত হয়েছে৷ এই ডেমোর জন্য, ফলাফলগুলি দেখতে এইরকম:

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

ঠিক করুন

নিখুঁত বা স্থির অবস্থান ব্যবহার করে পৃষ্ঠার নীচে কুকি নোটিশ রাখুন।

আগে:

.banner {
  position: sticky;
  top: 0;
}

পরে:

.banner {
  position: fixed;
  bottom: 0;
}

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

ছবি

ছবি এবং বৃহত্তর কন্টেন্টফুল পেইন্ট (LCP)

চিত্রগুলি সাধারণত একটি পৃষ্ঠার বৃহত্তম সামগ্রীযুক্ত পেইন্ট (LCP) উপাদান। অন্যান্য পৃষ্ঠা উপাদান যা LCP উপাদান হতে পারে তার মধ্যে পাঠ্য ব্লক এবং ভিডিও পোস্টার চিত্র অন্তর্ভুক্ত। LCP উপাদান লোড হওয়ার সময় LCP নির্ধারণ করে।

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

উদাহরণ সাইটে, কুকি নোটিশের ব্যাকগ্রাউন্ড ইমেজ আসলে একটি বড় ইমেজ। LCP উন্নত করতে, আপনি প্রভাব তৈরি করতে একটি চিত্র লোড করার পরিবর্তে CSS-এ গ্রেডিয়েন্ট পেইন্ট করতে পারেন।

ঠিক করুন

একটি চিত্রের পরিবর্তে একটি CSS গ্রেডিয়েন্ট ব্যবহার করতে .banner CSS পরিবর্তন করুন:

আগে:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

পরে:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

ছবি এবং লেআউট পরিবর্তন

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

শনাক্ত করুন

সুস্পষ্ট width এবং height ছাড়াই চিত্রগুলি সনাক্ত করতে, লাইটহাউসের "চিত্রের উপাদানগুলির সুস্পষ্ট প্রস্থ এবং উচ্চতা রয়েছে" অডিট ব্যবহার করুন৷

এই উদাহরণে, হিরো ইমেজ এবং আর্টিকেল ইমেজ উভয়ই width এবং height বৈশিষ্ট্য অনুপস্থিত।

ঠিক করুন

লেআউট পরিবর্তন এড়াতে এই চিত্রগুলিতে width এবং height বৈশিষ্ট্যগুলি সেট করুন৷

আগে:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

পরে:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

হরফ

ফন্ট টেক্সট রেন্ডারিং বিলম্বিত করতে পারে এবং লেআউট পরিবর্তন ঘটাতে পারে। ফলে দ্রুত ফন্ট ডেলিভারি করা জরুরি।

বিলম্বিত পাঠ্য রেন্ডারিং

ডিফল্টরূপে, একটি ব্রাউজার অবিলম্বে একটি পাঠ্য উপাদান রেন্ডার করবে না যদি এর সংশ্লিষ্ট ওয়েব ফন্টগুলি এখনও লোড না হয়। এটি একটি "আনস্টাইল না করা পাঠ্যের ফ্ল্যাশ" (FOUT) প্রতিরোধ করার জন্য করা হয়। অনেক পরিস্থিতিতে, এটি ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) বিলম্বিত করে। কিছু পরিস্থিতিতে, এটি বিলম্বিত করে Largest Contentful Paint (LCP)।

লেআউট স্থানান্তর

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

শনাক্ত করুন

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

ফন্টের অনুরোধের জন্য কতক্ষণ লাগে তা দেখতে, টাইমিং ট্যাবে ক্লিক করুন। যত তাড়াতাড়ি একটি ফন্ট অনুরোধ করা হয়, তত তাড়াতাড়ি এটি লোড এবং ব্যবহার করা যেতে পারে।

একটি ফন্টের জন্য অনুরোধ চেইন দেখতে, ইনিশিয়েটর ট্যাবে ক্লিক করুন। সাধারণভাবে বলতে গেলে, অনুরোধের চেইন যত ছোট হবে, তত তাড়াতাড়ি ফন্টের অনুরোধ করা যাবে।

ঠিক করুন

এই ডেমো Google Fonts API ব্যবহার করে। Google Fonts <link> ট্যাগ বা @import স্টেটমেন্টের মাধ্যমে ফন্ট লোড করার বিকল্প প্রদান করে। <link> কোড স্নিপেটে একটি preconnect রিসোর্স ইঙ্গিত রয়েছে। এর ফলে @import সংস্করণ ব্যবহার করার চেয়ে দ্রুত স্টাইলশীট বিতরণ করা উচিত।

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

আপনার স্টাইলশীট থেকে নিম্নলিখিত @import বিবৃতিটি সরান:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

নথির <head> -এ নিম্নলিখিত <link> ট্যাগ যোগ করুন:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

এই লিঙ্ক ট্যাগগুলি ব্রাউজারকে Google ফন্টের দ্বারা ব্যবহৃত উত্সের সাথে একটি প্রাথমিক সংযোগ স্থাপন করতে এবং স্টাইলশীট লোড করার নির্দেশ দেয় যাতে মন্টসেরাট এবং রোবোটোর জন্য ফন্ট ঘোষণা রয়েছে। এই <link> ট্যাগগুলি যত তাড়াতাড়ি সম্ভব <head> এ স্থাপন করা উচিত।

অ্যানিমেশন

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

শনাক্ত করুন

লাইটহাউস "নন-কম্পোজিটেড অ্যানিমেশন এড়িয়ে চলুন" অডিট অ-পারফরম্যান্স অ্যানিমেশন সনাক্ত করতে সহায়ক হতে পারে।

ঠিক করুন

ট্রান্সফর্ম ব্যবহার করতে slideIn অ্যানিমেশন ক্রম পরিবর্তন করুন transform: translateX() margin-left সম্পত্তি স্থানান্তর করার পরিবর্তে।

আগে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

পরে:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

সমালোচনামূলক CSS

স্টাইলশীটগুলি রেন্ডার-ব্লক করছে৷ এর মানে হল যে ব্রাউজারটি একটি স্টাইলশীটের সম্মুখীন হয়, ব্রাউজারটি স্টাইলশীটটি ডাউনলোড এবং পার্স না করা পর্যন্ত এটি অন্যান্য সংস্থানগুলি ডাউনলোড করা বন্ধ করবে৷ এটি LCP বিলম্বিত করতে পারে। কর্মক্ষমতা উন্নত করার জন্য, অব্যবহৃত CSS অপসারণ , সমালোচনামূলক CSS ইনলাইন করা এবং অ-সমালোচনামূলক CSS স্থগিত করার কথা বিবেচনা করুন।

উপসংহার

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