এই কোডল্যাব আপনাকে দেখায় যে কীভাবে rel="preload" ব্যবহার করে ওয়েব ফন্ট প্রিলোড করতে হয় যাতে
স্টাইল না করা টেক্সটের (FOUT) কোনও ফ্ল্যাশ সরানো যায়।
পরিমাপ করুন
কোনও অপ্টিমাইজেশন যোগ করার আগে ওয়েবসাইট কেমন পারফর্ম করছে তা পরিমাপ করুন।
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন। - DevTools খুলতে `Control+Shift+J` (বা Mac-এ `Command+Option+J`) প্রেস করুন।
- Lighthouse ট্যাবে ক্লিক করুন।
- বিভাগ তালিকায় পারফর্ম্যান্স চেকবক্স বেছে নেওয়া হয়েছে কিনা তা দেখে নিন।
- রিপোর্ট তৈরি করুন বোতামে ক্লিক করুন।
যে Lighthouse রিপোর্ট তৈরি করা হবে, সেটি আপনাকে সর্বাধিক ক্রিটিকাল পাথ লেটেন্সি-এর অধীনে রিসোর্স ফেচ করার ক্রম দেখাবে।
উপরের অডিটে, ওয়েব ফন্টগুলি ক্রিটিক্যাল রিকোয়েস্ট চেনের অংশ এবং শেষে ফেচ করা হয়েছে। গুরুত্বপূর্ণ অনুরোধের চেন ব্রাউজার দ্বারা অগ্রাধিকার দেওয়া এবং ফেচ করা রিসোর্সের ক্রমকে দেখায়। এই অ্যাপ্লিকেশনে, ওয়েব ফন্ট (Pacfico এবং Pacifico-Bold) @font-face নিয়ম ব্যবহার করে সংজ্ঞায়িত করা হয় এবং ক্রিটিক্যাল অনুরোধ চেনে ব্রাউজার দ্বারা ফেচ করা শেষ রিসোর্স। সাধারণত, ওয়েবফন্ট ধীরে ধীরে লোড হয়, যার অর্থ হল ক্রিটিক্যাল রিসোর্স (CSS, JS) ডাউনলোড না হওয়া পর্যন্ত সেগুলি লোড হয় না।
অ্যাপ্লিকেশনে ফেচ করা রিসোর্সের ক্রম এখানে দেওয়া হল:
ওয়েব ফন্ট প্রিলোড করা হচ্ছে
FOUT এড়াতে, আপনি অবিলম্বে প্রয়োজন এমন ওয়েব ফন্ট প্রিলোড করতে পারেন। এই অ্যাপ্লিকেশনের জন্য ডকুমেন্টের শুরুতে Link এলিমেন্ট যোগ করুন:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
as="font" type="font/woff2" অ্যাট্রিবিউট ব্রাউজারকে এই রিসোর্সটি ফন্ট হিসেবে ডাউনলোড করতে বলে এবং রিসোর্স কিউয়ের অগ্রাধিকার নির্ধারণে সাহায্য করে।
crossorigin অ্যাট্রিবিউট থেকে বোঝা যায় যে CORS অনুরোধের মাধ্যমে রিসোর্স ফেচ করা উচিত কিনা, কারণ ফন্ট অন্য ডোমেন থেকে আসতে পারে। এই অ্যাট্রিবিউট না থাকলে, ব্রাউজার প্রিলোড করা ফন্ট উপেক্ষা করে।
যেহেতু Pacifico-Bold ফন্ট পৃষ্ঠার হেডারে ব্যবহার করা হয়, তাই আমরা এটি আরও দ্রুত ফেচ করার জন্য প্রিলোড ট্যাগ যোগ করেছি। Pacifico.woff2 ফন্ট প্রিলোড করা গুরুত্বপূর্ণ নয় কারণ এটি ফোল্ডের নিচে থাকা টেক্সট স্টাইল করে।
অ্যাপ্লিকেশন আবার লোড করে Lighthouse আবার রান করুন। সর্বাধিক ক্রিটিকাল পাথ লেটেন্সি বিভাগ চেক করুন।
গুরুত্বপূর্ণ অনুরোধের চেন থেকে কীভাবে Pacifico-Bold.woff2 সরানো হয়েছে তা লক্ষ্য করুন। এটি আগে অ্যাপ্লিকেশনে ফেচ করা হয়েছে।
প্রিলোড করার মাধ্যমে ব্রাউজার বুঝতে পারে যে এই ফাইলটি আগে ডাউনলোড করতে হবে। এটি মনে রাখা গুরুত্বপূর্ণ যে সঠিকভাবে ব্যবহার না করা হলে, প্রিলোড করার ফলে রিসোর্সের জন্য অপ্রয়োজনীয় অনুরোধ করা হতে পারে যা ব্যবহার করা হয় না এবং এর ফলে পারফর্ম্যান্সের উপর খারাপ প্রভাব পড়তে পারে।