থার্ড-পার্টি স্ক্রিপ্টগুলি কার্যক্ষমতাকে প্রভাবিত করে , যে কারণে তাদের নিয়মিত অডিট করা এবং সেগুলি লোড করার জন্য দক্ষ কৌশলগুলি ব্যবহার করা গুরুত্বপূর্ণ৷ এই কোডল্যাব আপনাকে দেখায় কিভাবে তৃতীয় পক্ষের সংস্থানগুলির লোডিং অপ্টিমাইজ করা যায়। এটি নিম্নলিখিত কৌশলগুলিকে কভার করে:
স্ক্রিপ্ট লোডিং স্থগিত করা হচ্ছে
অলস লোড হচ্ছে অ-গুরুত্বপূর্ণ সম্পদ
প্রয়োজনীয় উত্সের সাথে পূর্ব-সংযোগ
অন্তর্ভুক্ত নমুনা অ্যাপটিতে তৃতীয় পক্ষের উত্স থেকে আসা তিনটি বৈশিষ্ট্য সহ একটি সাধারণ ওয়েব পৃষ্ঠা রয়েছে:
একটি ভিডিও এম্বেড
একটি লাইন গ্রাফ রেন্ডার করার জন্য একটি ডেটা-ভিজ্যুয়ালাইজেশন লাইব্রেরি
একটি সোশ্যাল মিডিয়া শেয়ারিং উইজেট
আপনি অ্যাপের কর্মক্ষমতা পরিমাপ করে শুরু করবেন এবং তারপরে অ্যাপের কার্যক্ষমতার বিভিন্ন দিক উন্নত করতে প্রতিটি কৌশল প্রয়োগ করবেন।
কর্মক্ষমতা যাচাই
প্রথমে ফুলস্ক্রিন ভিউতে নমুনা অ্যাপটি খুলুন:
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.
বেসলাইন পারফরম্যান্স প্রতিষ্ঠা করতে পৃষ্ঠায় একটি বাতিঘর কর্মক্ষমতা অডিট চালান:
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- লাইটহাউস ট্যাবে ক্লিক করুন।
- মোবাইলে ক্লিক করুন।
- পারফরম্যান্স চেকবক্স নির্বাচন করুন। (আপনি অডিট বিভাগে বাকি চেকবক্সগুলি সাফ করতে পারেন৷)
- সিমুলেটেড ফাস্ট 3G, 4x CPU স্লোডাউন ক্লিক করুন।
- ক্লিয়ার স্টোরেজ চেকবক্স নির্বাচন করুন।
- অডিট চালান ক্লিক করুন।
আপনি যখন আপনার মেশিনে একটি অডিট চালান, তখন সঠিক ফলাফলগুলি পরিবর্তিত হতে পারে , কিন্তু আপনার লক্ষ্য করা উচিত যে ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) সময়টি বেশ বেশি, এবং সেই লাইটহাউসটি তদন্ত করার দুটি সুযোগের পরামর্শ দেয়: রেন্ডার-ব্লকিং সংস্থানগুলি বাদ দিন এবং প্রয়োজনে পূর্ব-সংযোগ করুন উৎপত্তি . (এমনকি যদি মেট্রিক্সগুলি সবুজ রঙে থাকে, তবুও অপ্টিমাইজেশানগুলি উন্নতি করবে৷)
তৃতীয় পক্ষের জাভাস্ক্রিপ্ট ডিফার করুন
রেন্ডার-ব্লকিং রিসোর্স অডিট এলিমিনেট করেছে যে আপনি d3js.org থেকে আসা একটি স্ক্রিপ্ট পিছিয়ে দিয়ে কিছু সময় বাঁচাতে পারেন:
D3.js হল ডাটা ভিজ্যুয়ালাইজেশন তৈরির জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরি। নমুনা অ্যাপের script.js ফাইলটি SVG লাইন চার্ট তৈরি করতে এবং এটিকে পৃষ্ঠায় যুক্ত করতে D3 ইউটিলিটি ফাংশন ব্যবহার করে। এখানে ক্রিয়াকলাপের ক্রম গুরুত্বপূর্ণ: নথিটি পার্স করার পরে script.js চালাতে হয় এবং D3 লাইব্রেরি লোড হয়, এই কারণেই এটি index.html এ ক্লোজিং </body> ট্যাগের ঠিক আগে অন্তর্ভুক্ত করা হয়েছে।
যাইহোক, D3 স্ক্রিপ্টটি পৃষ্ঠার <head> এ অন্তর্ভুক্ত করা হয়েছে, যা বাকি নথির পার্সিং ব্লক করে:
স্ক্রিপ্ট ট্যাগে যোগ করা হলে দুটি জাদু বৈশিষ্ট্য পার্সারকে অবরোধ মুক্ত করতে পারে:
asyncনিশ্চিত করে যে স্ক্রিপ্টগুলি ব্যাকগ্রাউন্ডে ডাউনলোড হয় এবং ডাউনলোড শেষ করার পরে প্রথম সুযোগে চালানো হয়।deferনিশ্চিত করে যে স্ক্রিপ্টগুলি ব্যাকগ্রাউন্ডে ডাউনলোড হয় এবং পার্সিং সম্পূর্ণভাবে শেষ হওয়ার পরে চালানো হয়।
যেহেতু এই চার্টটি সামগ্রিক পৃষ্ঠার জন্য সত্যিই গুরুত্বপূর্ণ নয় এবং সম্ভবত এটি ভাঁজের নীচে থাকবে, তাই কোন পার্সার ব্লকিং নেই তা নিশ্চিত করতে defer ব্যবহার করুন।
ধাপ 1: defer অ্যাট্রিবিউটের সাথে অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট লোড করুন
index.html এ 17 লাইনে, <script> উপাদানে defer বৈশিষ্ট্য যোগ করুন:
<script src="https://d3js.org/d3.v3.min.js" defer></script>
ধাপ 2: অপারেশনের সঠিক ক্রম নিশ্চিত করুন
এখন যেহেতু D3 স্থগিত করা হয়েছে, D3 প্রস্তুত হওয়ার আগে script.js চলবে, ফলে একটি ত্রুটি দেখা দেবে।
defer অ্যাট্রিবিউট সহ স্ক্রিপ্টগুলি যে ক্রমানুসারে সেগুলি নির্দিষ্ট করা হয়েছিল সেই ক্রমে কার্যকর করে৷ D3 প্রস্তুত হওয়ার পরে script.js কার্যকর হয়েছে তা নিশ্চিত করতে, এতে defer যোগ করুন এবং D3 <script> উপাদানের ঠিক পরে ডকুমেন্টের <head> পর্যন্ত নিয়ে যান। এখন এটি আর পার্সারকে ব্লক করে না, এবং ডাউনলোড তাড়াতাড়ি শুরু হয়।
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>
অলস-লোড তৃতীয় পক্ষের সম্পদ
ভাঁজের নীচে থাকা সমস্ত সংস্থান অলস লোডিংয়ের জন্য ভাল প্রার্থী।
নমুনা অ্যাপটিতে একটি আইফ্রেমে এম্বেড করা একটি YouTube ভিডিও রয়েছে। পৃষ্ঠাটি কতগুলি অনুরোধ করে এবং যা এমবেড করা YouTube iframe থেকে আসে তা পরীক্ষা করতে:
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- নেটওয়ার্ক ট্যাবে ক্লিক করুন।
- অক্ষম ক্যাশে চেকবক্স নির্বাচন করুন।
- থ্রটলিং ড্রপডাউন মেনুতে দ্রুত 3G নির্বাচন করুন।
- পৃষ্ঠাটি পুনরায় লোড করুন।
নেটওয়ার্ক প্যানেল প্রকাশ করে যে পৃষ্ঠাটি মোট 28টি অনুরোধ করেছে এবং প্রায় 1 MB সংকুচিত সংস্থান স্থানান্তর করেছে৷
YouTube iframe যে অনুরোধগুলি করেছে তা সনাক্ত করতে, ইনিশিয়েটর কলামে ভিডিও আইডি 6lfaiXM6waw দেখুন৷ ডোমেনের মাধ্যমে সমস্ত অনুরোধ একসাথে গ্রুপ করতে:
নেটওয়ার্ক প্যানেলে, একটি কলামের শিরোনামে ডান-ক্লিক করুন।
ড্রপডাউন মেনুতে, ডোমেন কলাম নির্বাচন করুন।
ডোমেন অনুসারে অনুরোধগুলি সাজাতে, ডোমেন কলামের শিরোনামে ক্লিক করুন।
নতুন বাছাইটি প্রকাশ করে যে Google ডোমেনে অতিরিক্ত অনুরোধ রয়েছে। মোট, YouTube iframe স্ক্রিপ্ট, স্টাইলশীট, ছবি এবং ফন্টের জন্য 14টি অনুরোধ করে। কিন্তু ব্যবহারকারীরা ভিডিও চালাতে আসলে নিচে স্ক্রোল না করলে, তাদের সত্যিই সেই সমস্ত সম্পদের প্রয়োজন নেই।
একজন ব্যবহারকারী পৃষ্ঠার সেই বিভাগে স্ক্রোল না করা পর্যন্ত ভিডিওটি অলস-লোড করার জন্য অপেক্ষা করে, আপনি পৃষ্ঠাটি প্রাথমিকভাবে অনুরোধের সংখ্যা কমিয়ে দেন। এই পদ্ধতি ব্যবহারকারীদের ডেটা সংরক্ষণ করে এবং প্রাথমিক লোডের গতি বাড়ায়।
অলস লোডিং বাস্তবায়নের একটি উপায় হল ইন্টারসেকশন অবজারভার ব্যবহার করা, একটি ব্রাউজার API যা আপনাকে বিজ্ঞপ্তি দেয় যখন একটি উপাদান ব্রাউজারের ভিউপোর্টে প্রবেশ করে বা প্রস্থান করে।
ধাপ 1: প্রাথমিকভাবে লোড হওয়া থেকে ভিডিও প্রতিরোধ করুন
ভিডিও iframe অলস-লোড করতে, আপনাকে প্রথমে এটিকে স্বাভাবিক উপায়ে লোড হওয়া থেকে আটকাতে হবে। ভিডিও ইউআরএল নির্দিষ্ট করতে data-src অ্যাট্রিবিউটের সাথে src অ্যাট্রিবিউট প্রতিস্থাপন করে এটি করুন:
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
data-src হল একটি ডেটা অ্যাট্রিবিউট , যা আপনাকে স্ট্যান্ডার্ড এইচটিএমএল উপাদানগুলিতে অতিরিক্ত তথ্য সংরক্ষণ করতে দেয়। একটি ডেটা অ্যাট্রিবিউটকে যেকোনো কিছুর নাম দেওয়া যেতে পারে, যতক্ষণ না এটি "ডেটা-" দিয়ে শুরু হয়।
একটি src ছাড়া একটি iframe সহজভাবে লোড হবে না.
ধাপ 2: ভিডিওটি অলস-লোড করতে ইন্টারসেকশন অবজারভার ব্যবহার করুন
ভিডিওটি লোড করার জন্য যখন একজন ব্যবহারকারী এটিতে স্ক্রোল করেন তখন আপনাকে জানতে হবে যে এটি কখন ঘটে। সেখানেই ইন্টারসেকশন অবজারভার এপিআই প্রবেশ করে। ইন্টারসেকশন অবজারভার এপিআই আপনাকে একটি কলব্যাক ফাংশন নিবন্ধন করতে দেয় যেটি যখনই আপনি ট্র্যাক করতে চান এমন একটি উপাদান ভিউপোর্টে প্রবেশ করে বা প্রস্থান করে তখন নির্বাহ করা হয়।
শুরু করতে, একটি নতুন ফাইল তৈরি করুন এবং এটির নাম lazy-load.js :
- নতুন ফাইল ক্লিক করুন এবং এটি একটি নাম দিন।
- এই ফাইল যোগ করুন ক্লিক করুন.
আপনার নথির মাথায় স্ক্রিপ্ট ট্যাগ যোগ করুন:
<script src="/lazy-load.js" defer></script>
lazy-load.js এ, একটি নতুন IntersectionObserver তৈরি করুন এবং এটি চালানোর জন্য একটি কলব্যাক ফাংশন পাস করুন:
// create a new Intersection Observer
let observer = new IntersectionObserver(callback);
এখন observer একটি লক্ষ্য উপাদান দিন (এই ক্ষেত্রে ভিডিও আইফ্রেম) observe পদ্ধতিতে একটি যুক্তি হিসাবে পাস করে:
// the element that you want to watch
const element = document.querySelector('iframe');
// register the element with the observe method
observer.observe(element);
callback IntersectionObserverEntry অবজেক্ট এবং IntersectionObserver অবজেক্টের একটি তালিকা পায়। প্রতিটি এন্ট্রিতে একটি target উপাদান এবং বৈশিষ্ট্য রয়েছে যা এর মাত্রা, অবস্থান, ভিউপোর্টে প্রবেশ করার সময় এবং আরও অনেক কিছু বর্ণনা করে। IntersectionObserverEntry এর বৈশিষ্ট্যগুলির মধ্যে একটি হল isIntersecting — একটি বুলিয়ান মান যা true সমান হয় যখন উপাদানটি ভিউপোর্টে প্রবেশ করে।
এই উদাহরণে, target হল iframe । target ভিউপোর্টে প্রবেশ করলে isIntersecting সমান true । এটি কর্মে দেখতে, নিম্নলিখিত ফাংশন দিয়ে callback প্রতিস্থাপন করুন:
let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- কনসোল ট্যাবে ক্লিক করুন।
উপরে এবং নিচে স্ক্রোল করার চেষ্টা করুন। আপনি isIntersecting পরিবর্তনের মান এবং কনসোলে লগ করা লক্ষ্য উপাদানটি দেখতে পাবেন।
যখন ব্যবহারকারী তার অবস্থানে স্ক্রোল করে ভিডিওটি লোড করতে, একটি loadElement ফাংশন চালানোর জন্য একটি শর্ত হিসাবে isIntersecting ব্যবহার করুন, যা iframe উপাদানের data-src থেকে মান পায় এবং এটিকে iframe উপাদানের src বৈশিষ্ট্য হিসাবে সেট করে। যে প্রতিস্থাপন ভিডিও লোডিং ট্রিগার. তারপরে, একবার ভিডিওটি লোড হয়ে গেলে, লক্ষ্য উপাদানটি দেখা বন্ধ করতে observer উপর unobserve পদ্ধতিতে কল করুন:
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
if (entry.isIntersecting) {
// do this when the element enters the viewport
loadElement(entry.target);
// stop watching
observer.unobserve(entry.target);
}
});
});
function loadElement(element) {
const src = element.getAttribute('data-src');
element.src = src;
}
ধাপ 3: কর্মক্ষমতা পুনর্মূল্যায়ন
সম্পদের আকার এবং সংখ্যা কীভাবে পরিবর্তিত হয়েছে তা দেখতে, DevTools নেটওয়ার্ক প্যানেল খুলুন এবং পৃষ্ঠাটি আবার লোড করুন। নেটওয়ার্ক প্যানেল প্রকাশ করে যে পৃষ্ঠাটি 14টি অনুরোধ করেছে এবং মাত্র 260 KB। এটি একটি অর্থপূর্ণ উন্নতি!
এখন পৃষ্ঠাটি স্ক্রোল করুন এবং নেটওয়ার্ক প্যানেলে নজর রাখুন। আপনি যখন ভিডিওতে যান, আপনি দেখতে পাবেন যে পৃষ্ঠাটি অতিরিক্ত অনুরোধ ট্রিগার করে।
প্রয়োজনীয় উত্সের সাথে পূর্ব সংযোগ করুন৷
আপনি অ-সমালোচনামূলক জাভাস্ক্রিপ্ট পিছিয়ে দিয়েছেন এবং YouTube অনুরোধগুলি অলসভাবে লোড করেছেন, তাই এখন বাকি তৃতীয় পক্ষের সামগ্রী অপ্টিমাইজ করার সময়।
একটি লিঙ্কে rel=preconnect অ্যাট্রিবিউট যোগ করা ব্রাউজারকে সেই সম্পদের জন্য অনুরোধ করার আগে একটি ডোমেনের সাথে একটি সংযোগ স্থাপন করতে বলে। এই অ্যাট্রিবিউটটি অরিজিনে সবচেয়ে ভালো ব্যবহার করা হয় যা আপনার পৃষ্ঠার প্রয়োজনীয়তা নিশ্চিত করে এমন সংস্থান প্রদান করে।
আপনি যে লাইটহাউস অডিটটি চালিয়েছেন প্রথম ধাপে প্রি-কানেক্ট-এ প্রস্তাবিত প্রয়োজনীয় উত্স থেকে আপনি staticxx.facebook.com এবং youtube.com-এর সাথে প্রাথমিক সংযোগ স্থাপন করে প্রায় 400 ms বাঁচাতে পারেন:
যেহেতু ইউটিউব ভিডিওটি এখন অলস-লোড হয়েছে, এটি শুধুমাত্র staticxx.facebook.com, সোশ্যাল মিডিয়া শেয়ারিং উইজেটের উৎস। এই ডোমেনের সাথে একটি প্রাথমিক সংযোগ স্থাপন করা নথির <head> এ একটি <link> ট্যাগ যোগ করার মতোই সহজ।
<link rel="preconnect" href="https://staticxx.facebook.com">
কর্মক্ষমতা পুনর্মূল্যায়ন
অপ্টিমাইজেশনের পর পৃষ্ঠার অবস্থা এখানে। অন্য লাইটহাউস অডিট চালানোর জন্য কোডল্যাবের কর্মক্ষমতা পরিমাপ বিভাগ থেকে পদক্ষেপগুলি অনুসরণ করুন৷
