আপনি যদি একজন ওয়ার্ডপ্রেস ব্যবহারকারী হন, আমি দৃঢ়ভাবে সুপারিশ করছি যে ওয়েবসাইট কার্যক্ষমতাকে অগ্রাধিকার দেওয়া হোক। দর্শকদের কাছে দ্রুত-লোডিং পৃষ্ঠাগুলি সরবরাহ করার মাধ্যমে, আপনি আপনার সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত করবেন, ওয়েবসাইট ট্র্যাফিক বাড়াবেন এবং পাঠকদের একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা দেবেন।
একটি ওয়েবসাইট অপ্টিমাইজ করার একটি মূল অংশ হল Google PageSpeed Insights, GTmetrix এবং Pingdom ওয়েবসাইট স্পিড টেস্টের মতো পারফরম্যান্স বেঞ্চমার্কিং টুল ব্যবহার করে ওয়েব পেজ বিশ্লেষণ করা। এই পরিষেবাগুলি একটি URL এর কার্যকারিতা রেট করবে, পৃষ্ঠার আকার নিশ্চিত করবে এবং পৃষ্ঠাটি লোড হতে কতক্ষণ সময় লাগবে তা নিশ্চিত করবে৷
পারফরম্যান্স বেঞ্চমার্কিং সরঞ্জামগুলি কেবল আপনার ওয়েব পৃষ্ঠাগুলিকে বিশ্লেষণ করে না, তারা পৃষ্ঠা লোড হওয়ার সময়গুলিকে উন্নত করার জন্য কী কী সমাধান করা দরকার তাও দেখায়৷ উদাহরণস্বরূপ, আপনাকে অব্যবহৃত CSS কোড সরাতে বা আপনার ওয়েবসাইটের ছবির ওজন কমানোর পরামর্শ দেওয়া হতে পারে।
একটি সুপারিশ যা আপনি প্রায়শই দেখতে পাবেন তা হল ওয়ার্ডপ্রেস-এ রেন্ডার-ব্লকিং সংস্থানগুলি বাদ দেওয়া . এই নিবন্ধে, আমি ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং সংস্থানগুলি কী তা ব্যাখ্যা করব এবং সেগুলি সরিয়ে দিয়ে আপনি কীভাবে আপনার ওয়েবসাইটের পৃষ্ঠা লোড হওয়ার সময় উন্নত করতে পারেন তা দেখাব৷
ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং রিসোর্স কি?
ওয়েবসাইট অপ্টিমাইজেশান হল আপনার ওয়েবসাইট পৃষ্ঠাগুলিকে দ্রুততম সময়ে দর্শকদের কাছে পৌঁছে দেওয়া। একটি সাধারণ পৃষ্ঠায় বিভিন্ন উপাদান থাকে।
| গঠন ও নকশা | HTML এবং CSS ব্যবহার করে নির্মিত |
| সামগ্রী | পাঠ্য এবং ছবি |
| ডাইনামিক কন্টেন্ট | ভিডিও এবং স্লাইডারের মত গতিশীল বিষয়বস্তু Javascript ব্যবহার করে প্রদর্শিত হয় |
যখন কেউ আপনার ওয়েবসাইটে একটি পৃষ্ঠা পরিদর্শন করে, তখন তাদের ব্রাউজার উপরের থেকে নীচের দিকে পৃষ্ঠার কোড প্রক্রিয়া করবে। এটিকে সাধারণত “পৃষ্ঠা রেন্ডারিং বলা হয়৷ "।
যদি ব্রাউজারটি বাহ্যিক CSS বা Javascript ফাইলগুলিতে কলগুলির সম্মুখীন হয়, তাহলে এটিকে পৃষ্ঠাটি রেন্ডার করা বন্ধ করতে হবে এবং এই CSS এবং Javascript ফাইলগুলি প্রক্রিয়া করার আগে ডাউনলোড করতে হবে৷ এই সংস্থানগুলি তাই “রেন্ডার-ব্লকিং বলে বিবেচিত হয়৷ " যেহেতু তারা পৃষ্ঠা রেন্ডারিং প্রক্রিয়া বন্ধ করছে৷
৷রেন্ডার-ব্লকিং রিসোর্স ব্যবহারকারীকে প্রাথমিক বিষয়বস্তু দেখানোর জন্য ব্রাউজারের সময় বাড়ায়, যা একটি গুরুত্বপূর্ণ কার্যক্ষমতা এবং সার্চ ইঞ্জিন র্যাঙ্কিং মেট্রিক যাকে Google ফার্স্ট মিনিংফুল পেইন্ট (FMP) বলে।
সচেতন থাকুন যে পাঠ্য এবং চিত্রগুলি রেন্ডার-ব্লকিং নয় এবং সমস্ত CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলিও রেন্ডার-ব্লকিং নয়৷ এটি বৃহত্তর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল হতে থাকে যা পৃষ্ঠা রেন্ডারিংকে ধীর করে দেয়।
ওয়ার্ডপ্রেস-এ রেন্ডার-ব্লকিং রিসোর্সগুলি কীভাবে সনাক্ত করবেন
ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং রিসোর্স সহজেই চিহ্নিত করা যায় পারফরম্যান্স বেঞ্চমার্কিং টুল ব্যবহার করে। আপনাকে যা করতে হবে তা হল আপনি যে পৃষ্ঠাটি পরীক্ষা করতে চান তার URL লিখুন৷
Google PageSpeed Insights আপনার পৃষ্ঠার প্রথম পেইন্টে রেন্ডার-ব্লকিং সংস্থান যোগ করার মোট সময়কে হাইলাইট করে। নীচে আপনি একটি ব্রেকডাউন দেখতে পাবেন যা প্রতিটি রেন্ডার-ব্লকিং রিসোর্সের URL এবং ফাইলের আকার দেখায়। এটাও দেখায় যে রেন্ডার-ব্লকিং রিসোর্স বাদ দিলে আপনার পৃষ্ঠা কত দ্রুত লোড হতে পারে।
GTmetrix প্রতিটি রেন্ডার-ব্লকিং রিসোর্স, ফাইলের আকার এবং ফাইল ডাউনলোড করতে সময় লাগে তাও তালিকাভুক্ত করে।
যদিও পিংডম ওয়েবসাইট স্পিড টেস্টের কোনো নির্দিষ্ট বিভাগ নেই যা রেন্ডার-ব্লকিং সংস্থানগুলিকে হাইলাইট করে, আপনি “ফাইল অনুরোধগুলি থেকে দেখতে পাচ্ছেন যে পৃষ্ঠাগুলিকে ধীর করার কারণ কী। " এলাকা।
এটি রেন্ডার-ব্লকিং রিসোর্স যেমন আইকন, ফন্ট এবং জাভাস্ক্রিপ্ট ফাইল হাইলাইট করবে। ফাইলের URL, ফাইলের আকার এবং ডাউনলোডের সময় প্রতিটি সংস্থানের জন্য প্রদর্শিত হয়। কোন চিত্রগুলি পৃষ্ঠা লোড হওয়ার সময় বাড়াচ্ছে তা দেখার জন্য ফাইল অনুরোধের এলাকাটিও কার্যকর৷
যেহেতু ওয়ার্ডপ্রেস আপনার ওয়েবসাইট জুড়ে বিভিন্ন CSS এবং Javascript ফাইল কল করে, তাই একাধিক পৃষ্ঠার জন্য কর্মক্ষমতা পরীক্ষা চালানো গুরুত্বপূর্ণ যাতে সমস্ত রেন্ডার-ব্লকিং রিসোর্স সনাক্ত করা যায়। উদাহরণস্বরূপ, আপনি আপনার ওয়েবসাইটের মূল ক্ষেত্রগুলির জন্য পারফরম্যান্স পরীক্ষা চালাতে পারেন যেমন আপনার হোম পৃষ্ঠা, ব্লগ সূচী, ব্লগ পোস্ট, পৃষ্ঠা সম্পর্কে এবং যোগাযোগ পৃষ্ঠা।
গুরুত্বপূর্ণ সম্পদ সনাক্তকরণ
একটি ওয়েব পৃষ্ঠার প্রথম পেইন্ট প্রদর্শনের প্রয়োজন হলে একটি সংস্থানকে গুরুত্বপূর্ণ বলে মনে করা হয়। অন্যান্য সমস্ত সংস্থান অ-গুরুত্বপূর্ণ বলে মনে করা হয়৷
ক্রিটিক্যাল রিসোর্স শনাক্ত করার সবচেয়ে সহজ উপায় হল Chrome DevTools-এ কভারেজ ট্যাব ব্যবহার করা। প্রাথমিক পৃষ্ঠা লোড সঠিকভাবে প্রদর্শনের জন্য কত শতাংশ ফাইলের প্রয়োজন ছিল তা এটি হাইলাইট করে। সমালোচনামূলক স্টাইলিং সবুজ রঙে প্রদর্শিত হয়, যেখানে অ-সমালোচনামূলক স্টাইলিং লাল রঙে প্রদর্শিত হয়।
নীচের স্ক্রিনশটে, আপনি দেখতে পাচ্ছেন যে WordPress.org-এ, রেন্ডার-ব্লকিং CSS এবং Javascript ফাইলগুলিতে কোডের একটি বড় শতাংশ ব্যবহার করা হচ্ছে না। অনেকগুলি ওয়ার্ডপ্রেস ওয়েবসাইটে এই পরিস্থিতি আরও খারাপ, কভারেজ পরীক্ষায় বেশ কয়েকটি ফাইল হাইলাইট করে যেখানে প্রতিটি ফাইলের 100% অব্যবহৃত।
ইনলাইন কল ব্যবহার করে ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং CSS বাদ দেওয়া
Google আপনার HTML পৃষ্ঠা থেকে রেন্ডার-ব্লকিং রিসোর্স থেকে একটি ইনলাইন কলে সমস্ত গুরুত্বপূর্ণ কোড সরানোর সুপারিশ করে৷ একটি পৃষ্ঠার প্রথম পেইন্টের জন্য গুরুত্বপূর্ণ স্টাইলিং একটি স্টাইল ব্যবহার করে সংজ্ঞায়িত করা যেতে পারে মাথার মধ্যে ব্লক করুন আপনার পৃষ্ঠার বিভাগ, যেখানে গুরুত্বপূর্ণ Javascript ফাংশনগুলিকে স্ক্রিপ্ট ব্যবহার করে আপনার পৃষ্ঠার মধ্যে ইনলাইন বলা যেতে পারে ট্যাগ।
ওয়ার্ডপ্রেসের মতো একটি গতিশীল প্ল্যাটফর্মে যেখানে থিম এবং প্লাগইনগুলির মাধ্যমে একটি ওয়েবসাইটে CSS এবং Javascript কোড যোগ করা হয়, ম্যানুয়ালি সমালোচনামূলক স্টাইলিং সরানো অব্যবহারিক হতে পারে। যেমন, অনেক ওয়ার্ডপ্রেস ব্যবহারকারী নাইট্রোপ্যাক এবং ক্রিটিকাল সিএসএস এর মতো পরিষেবাগুলি ব্যবহার করে যাতে সমালোচনামূলক স্টাইলশীটগুলি স্বয়ংক্রিয়ভাবে বের করা হয় এবং হেডের মধ্যে ইনলাইনে প্রদর্শিত হয়। বিভাগ।
ওয়েবসাইট স্টাইলিং ছোট CSS ফাইলে অবস্থিত হলে, আপনি ছোট স্টাইলশীট থেকে স্বয়ংক্রিয়ভাবে ইনলাইন স্টাইলিং করতে পারফরম্যান্স ওয়ার্ডপ্রেস প্লাগইন অ্যাসেট ক্লিনআপ ব্যবহার করতে পারেন।
অ্যাসিঙ্ক এবং ডিফার ব্যবহার করে ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট সরান
ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট রিসোর্স অ্যাসিঙ্ক এবং ডিফার নামে দুটি কৌশল ব্যবহার করে নির্মূল করা যেতে পারে। উভয় পদ্ধতিই ব্রাউজারকে পৃষ্ঠাটি রেন্ডার করা চালিয়ে যাওয়ার অনুমতি দেয় যখন রেন্ডার-ব্লকিং CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলি ওয়ার্ডপ্রেসে ভাঁজের উপরের কন্টেন্টের পটভূমিতে ডাউনলোড করা হয়।
একটি পৃষ্ঠায় Async বা Defer ব্যবহার করা বাঞ্ছনীয় হতে পারে তাই উভয় পরীক্ষা করা এবং কোন কৌশলটি সর্বোত্তম ফলাফল প্রদান করে তা দেখতে গুরুত্বপূর্ণ। যাইহোক, আপনি যে পদ্ধতি ব্যবহার করুন না কেন পৃষ্ঠা লোড হওয়ার সময় একটি হ্রাস দেখতে পাবেন।
| অ্যাসিঙ্ক৷ | পৃষ্ঠাটি রেন্ডার হওয়ার সাথে সাথে ফাইলগুলি ডাউনলোড করুন এবং ফাইলগুলি উপলব্ধ হওয়ার সাথে সাথেই চালান৷ |
| বিলম্বিত করুন | পৃষ্ঠাটি রেন্ডার হওয়ার সাথে সাথে ফাইলগুলি ডাউনলোড করুন এবং পৃষ্ঠাটি রেন্ডারিং শেষ হয়ে গেলে অনুক্রমিক ক্রমে ফাইলগুলি সম্পাদন করুন |
একটি ওয়ার্ডপ্রেস পারফরম্যান্স প্লাগইন ব্যবহার করে আপনার পুরো ওয়েবসাইট জুড়ে Async এবং Defer প্রয়োগ করা যেতে পারে।
আমার ব্যক্তিগত ব্লগে, আমি পৃষ্ঠাগুলিতে জাভাস্ক্রিপ্ট স্থগিত করতে প্লাগইন Async JavaScript ব্যবহার করি। অটোঅপ্টিমাইজ নির্মাতা ফ্র্যাঙ্ক গুসেনস দ্বারা তৈরি, Async Javascript আপনাকে অ-গুরুত্বপূর্ণ Javascript ফাইলগুলিতে Async এবং Defer প্রয়োগ করতে দেয় এবং JQuery ফাইলগুলিতে বিভিন্ন সেটিংস প্রয়োগ করার বিকল্প দেয়৷
প্লাগইন এর সেটআপ উইজার্ড আপনার ওয়েবসাইটের জন্য সেরা সেটিংস নির্ধারণ করার জন্য GTmetrix-এ একাধিক পরীক্ষা চালাবে৷
আমি Async JavaScript বেছে নিয়েছি কারণ এটি স্বয়ংক্রিয়ভাবে আমার ওয়েবসাইট জুড়ে Async বা Defer প্রয়োগ করে। এটি নিঃসন্দেহে ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং রিসোর্স দূর করার সবচেয়ে সহজ পদ্ধতি, কিন্তু আপনি ওয়ার্ডপ্রেস প্লাগইন HTTP/2 পুশ প্রিলোডের সাথে আরও ভাল ফলাফল দেখতে পারেন৷
একবার আপনি Chrome-এর কভারেজ টুল বা GTmetrix বা Google PageSpeed Insights-এর মতো পারফরম্যান্স বেঞ্চমার্কিং পরিষেবা ব্যবহার করে আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে রেন্ডার-ব্লকিং রিসোর্স শনাক্ত করলে, আপনি ফাইলের ভিত্তিতে একটি ফাইলে HTTP/2 পুশ প্রিলোড ব্যবহার করে Async এবং Defer প্রয়োগ করতে পারেন।
আপনি যদি প্রতিটি ফাইলের জন্য Async এবং Defer এর কার্যকারিতা পরীক্ষা করতে ইচ্ছুক হন, তাহলে আপনি প্রতিটি সংস্থানের জন্য সেরা কৌশলটি খুঁজে পেতে সক্ষম হবেন। এর ফলে পৃষ্ঠা লোড হওয়ার সময় আরও কমতে পারে৷
Async এবং Defer প্রয়োগ করার জন্য আপনি যে ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করুন না কেন, কিছুই ভাঙা হয়নি তা নিশ্চিত করার জন্য পরে আপনার ওয়েবসাইট ডিজাইন পরীক্ষা করে দেখুন৷
এই বিষয়ের আরও বিস্তৃত ওভারভিউয়ের জন্য, অনুগ্রহ করে আমার নিবন্ধটি পড়ুন “কীভাবে ওয়ার্ডপ্রেসে ডিফার এবং অ্যাসিঙ্ক ব্যবহার করে জাভাস্ক্রিপ্টের পার্সিং স্থগিত করা যায়”৷
চূড়ান্ত চিন্তা
ওয়ার্ডপ্রেসে রেন্ডার-ব্লকিং রিসোর্স পেজ লোড হওয়ার সময়কে ব্যাপকভাবে বৃদ্ধি করে। এগুলি আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতাকেও প্রভাবিত করে কারণ সমস্ত রেন্ডার-ব্লকিং সংস্থানগুলি ডাউনলোড এবং কার্যকর না হওয়া পর্যন্ত দর্শকরা একটি ফাঁকা পৃষ্ঠা দেখতে পাবেন৷
Chrome-এর কভারেজ টুল এবং পরিষেবা যেমন Google PageSpeed Insights এবং GTmetrix রেন্ডার-ব্লকিং রিসোর্স সনাক্ত করা সহজ করে তোলে। তারপরে আপনি Async JavaScript এবং HTTP/2 পুশ প্রিলোডের মতো ওয়ার্ডপ্রেস প্লাগইনগুলি ব্যবহার করে রেন্ডার-ব্লকিং সংস্থানগুলি বাদ দিতে পারেন৷
পড়ার জন্য ধন্যবাদ।
কেভিন
