ওয়েবফন্ট লোডের সময় পাঠ্য দৃশ্যমান থাকে তা নিশ্চিত করুন

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

কীভাবে লাইটহাউস ফন্ট-ডিসপ্লে অডিট ব্যর্থ হয়

বাতিঘর অদৃশ্য পাঠ্য ফ্ল্যাশ করতে পারে এমন যেকোন ফন্ট URL গুলিকে পতাকা দেয়:

লাইটহাউসের একটি স্ক্রিনশট নিশ্চিত করুন যে ওয়েবফন্ট লোড অডিটের সময় পাঠ্য দৃশ্যমান থাকে

কিভাবে অদৃশ্য টেক্সট দেখানো এড়াতে

font-display API নির্দেশ করে যে font-face শৈলীর ভিতরে ব্যবহার করা হলে একটি ফন্ট কীভাবে প্রদর্শিত হয়। কাস্টম ফন্ট প্রস্তুত না হলে নিম্নলিখিত font-display মানগুলি ব্রাউজারকে একটি সিস্টেম ফন্ট ব্যবহার করতে বলবে:

  • swap
  • optional
  • fallback

CSS উদাহরণ 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

গুগল ফন্ট উদাহরণ

আপনার Google ফন্ট URL-এর শেষে &display=swap / &display=optional / &display=fallback প্যারামিটার যোগ করুন:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

বিলম্বিত ফন্টগুলির কারণে সৃষ্ট লেআউট পরিবর্তনগুলি কীভাবে এড়ানো যায়

অস্থায়ীভাবে একটি সিস্টেম ফন্ট দেখানো একটি FOIT এর পরিবর্তে আনস্টাইলড টেক্সট (FOUT) এর ফ্ল্যাশ দেবে। এটি শীঘ্রই বিষয়বস্তু রেন্ডার করার মাধ্যমে FCP&LCP-কে উন্নত করে, কিন্তু কাস্টম ফন্ট অস্থায়ী সিস্টেম ফন্ট প্রতিস্থাপন করলে FOIT এবং FOUT উভয়ই CLS-তে একই প্রভাব ফেলবে।

ফন্ট লোডিং এর CLS প্রভাব font-display: optional । যাইহোক, প্রিলোডের অতিরিক্ত ব্যবহার লোড মেট্রিক্সকে নেতিবাচকভাবে প্রভাবিত করতে পারে। প্রিলোডিং ফন্ট যাতে কোনো কর্মক্ষমতা রিগ্রেশন প্রবর্তন করে না তা নিশ্চিত করতে আমরা A/B পরীক্ষা করার পরামর্শ দিই।

স্ট্যাক-নির্দিষ্ট নির্দেশিকা

ড্রুপাল

আপনার থিমে কাস্টম ফন্ট সংজ্ঞায়িত করার সময় @font-display নির্দিষ্ট করুন।

ম্যাজেন্টো

কাস্টম ফন্ট সংজ্ঞায়িত করার সময় @font-display উল্লেখ করুন।

সম্পদ