লোডিং গতি উন্নত করতে ওয়েব ফন্ট প্রিলোড করুন

গরিমা মিমণি

এই কোডল্যাব আপনাকে দেখায় কিভাবে rel="preload" ব্যবহার করে স্টাইল না করা টেক্সটের যেকোন ফ্ল্যাশ (FOUT) মুছে ফেলতে হয়।

পরিমাপ

কোন অপ্টিমাইজেশান যোগ করার আগে ওয়েবসাইটটি কীভাবে কাজ করে তা প্রথমে পরিমাপ করুন।

  1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন ফুলস্ক্রিন .
  2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  3. লাইটহাউস ট্যাবে ক্লিক করুন।
  4. নিশ্চিত করুন যে পারফরম্যান্স চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
  5. জেনারেট রিপোর্ট বোতামে ক্লিক করুন।

তৈরি করা বাতিঘর প্রতিবেদনটি আপনাকে সর্বাধিক সমালোচনামূলক পথ বিলম্বের অধীনে সংস্থানগুলির আনার ক্রম দেখাবে৷

ওয়েবফন্টগুলি সমালোচনামূলক অনুরোধ শৃঙ্খলে উপস্থিত রয়েছে।

উপরের নিরীক্ষায় ওয়েব ফন্টগুলি সমালোচনামূলক অনুরোধ শৃঙ্খলের অংশ এবং শেষ আনা হয়েছে। সমালোচনামূলক অনুরোধ চেইন সংস্থানগুলির ক্রম উপস্থাপন করে যা ব্রাউজার দ্বারা অগ্রাধিকার দেওয়া এবং আনা হয়। এই অ্যাপ্লিকেশনটিতে, ওয়েব ফন্টগুলি (Pacfico এবং Pacifico-Bold) @font-face নিয়ম ব্যবহার করে সংজ্ঞায়িত করা হয়েছে এবং ক্রিটিক্যাল রিকোয়েস্ট চেইনে ব্রাউজার দ্বারা আনা শেষ সম্পদ। সাধারণত, ওয়েবফন্টগুলি অলস লোড হয় যার অর্থ হল যে সমালোচনামূলক সংস্থানগুলি ডাউনলোড না হওয়া পর্যন্ত সেগুলি লোড হয় না (CSS, JS)।

এখানে অ্যাপ্লিকেশানে প্রাপ্ত সংস্থানগুলির ক্রম রয়েছে:

Webfonts অলস লোড হয়.

ওয়েব ফন্ট প্রিলোড করা হচ্ছে

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 ফন্টটি প্রিলোড করা গুরুত্বপূর্ণ নয় কারণ এটি ভাঁজের নীচে থাকা পাঠ্যটিকে স্টাইল করে।

অ্যাপ্লিকেশন পুনরায় লোড করুন এবং আবার বাতিঘর চালান। সর্বাধিক গুরুত্বপূর্ণ পথ লেটেন্সি বিভাগটি পরীক্ষা করুন৷

Pacifico-Bold webfont প্রিলোড করা হয়েছে এবং সমালোচনামূলক অনুরোধ চেইন থেকে সরানো হয়েছে

Pacifico-Bold.woff2 কীভাবে সমালোচনামূলক অনুরোধ চেইন থেকে সরানো হয়েছে তা লক্ষ্য করুন। এটি অ্যাপ্লিকেশনে আগে আনা হয়।

প্যাসিফিকো-বোল্ড ওয়েবফন্ট আগে থেকে লোড করা আছে

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