ফন্টগুলি প্রায়ই ধীর লোডের সময় সহ বড় ফাইল। কিছু ব্রাউজার ফন্ট লোড না হওয়া পর্যন্ত পাঠ্য লুকিয়ে রাখে, যার ফলে অদৃশ্য পাঠ্যের ফ্ল্যাশ (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
উল্লেখ করুন।
সম্পদ
- ওয়েবফন্ট লোড অডিটের সময় পাঠ্য দৃশ্যমান থাকে তা নিশ্চিত করার জন্য উত্স কোড
- লোড করার সময় অদৃশ্য পাঠ্য এড়িয়ে চলুন
- ফন্ট প্রদর্শনের সাথে ফন্টের কার্যক্ষমতা নিয়ন্ত্রণ করা
- লোডিং গতি উন্নত করতে ওয়েব ফন্ট প্রিলোড করুন (কোডল্যাব)
- ঐচ্ছিক ফন্টগুলি প্রিলোড করে অদৃশ্য পাঠ্যের (FOIT) বিন্যাস স্থানান্তর এবং ফ্ল্যাশ প্রতিরোধ করুন