গুগল পেজ স্পিড ইনসাইট বা PageSpeed Insights হলো গুগলের একটি ফ্রি টুল যার মাধ্যমে যে কোন ওয়েবসাইট পর্যালোচনা করে তার স্পীড এবং পারফর্মেন্স সম্পর্কে ধারনা পাওয়া যায়।
একই সাথে আপনার সাইটের স্পীড এবং পারফর্মেন্স কিভাবে Improve করবেন সেই বিষয়ে বিস্তারিত নির্দেশনা দিয়ে থাকে।
তবে পেজ স্পিড ইনসাইট এ কিভাবে সাইটের স্পীড চেক করতে হয় এবং ফলাফল এর মাধ্যমে গুগল মূলত কি বোঝাতে চায় সেটা বুঝতে পারা সহজ কাজ নয়। কারন যে ফলাফল গুগল দেখাবে তা দেখতে সহজ মনে হলেও ততটা সহজ কিন্তু নয়।
যে কোন স্পীড টেস্ট ওয়েবসাইট ১০০ এর মধ্যে সাইট গুলোকে র্যাংকিং দিয়ে থাকে। আর আমরা অনেকে ইউটিউব ভিডিও দেখে ১০০ র্যাংকিং স্কোর করায় ব্যাস্ত হয়ে পড়ি।
তবে আপনাকে ১০০ তে ১০০ র্যাংকিং এর পিছনে ছুটে চলা উচিৎ নয়। কেননা, মনে করুন আপনার সাইটটি বাংলাতে এবং আপনার সাইটে সবচেয়ে বেশি ব্যবহারকারী বাংলাদেশি বলে আপনি বিডিআইএক্স হোস্টিং সার্ভার বা বাংলাদেশি হোস্টিং সার্ভার ব্যবহার করেন।
এখন গুগল বা অন্য কোন সাইট থেকে যখন আপনার সাইটের স্পীড চেক করবেন তখন তারা বিভিন্ন লোকেশন থেকে আপনার সাইটটি এনালাইসিস করবে। সুতরাং এক্ষেত্রে স্বাভাবিক ভাবে আপনি দেখবেন আপনার সাইটের স্পীড যথেষ্ট ফাস্ট কিন্তু স্পীড টেস্টে আপনার সাইটের স্কোর কম দেখাচ্ছে।
উদাহরন স্বরুপ বলতে গেলে, GTmetrix নামক খুবই জনপ্রিয় একটি ওয়েবসাইট এনালাইসিস সাইট রয়েছে তবে তারা কেবল কানাডা সার্ভার থেকে আপনার সাইটটি এনালাইসিস করবে। সুতরাং এক্ষেত্রে আপনার সাইটটের সার্ভার যদি বাংলাদেশে হয় তাহলে বুঝতেই পারছেন সেখানে আপনি সম্পূর্ন সঠিক তথ্য পাবেন না। তবে তারা আপনার সাইটের স্পীড ছাড়া বাকি যে স্ট্রাকচার এর তথ্য বা স্কোর দিবে আপনি সেটা গ্রহন করতে পারেন।
একই ভাবে Pingdom নামে আরো একটি ওয়েবসাইট এনালাইসিস সাইট রয়েছে যারা আপনার পছন্দের বিভিন্ন দেশের সার্ভার থেকে আপনার সাইটটি এনালাইসিস করার সুযোগ দিবে।
আরো কি কি উপায়ে ওয়েবসাইটের স্পীড টেস্ট করা যায় তার বিস্তারিত পরবর্তী আর্টিকেলে আলোচনা করা হবে।
এই কথা গুলো এজন্যই বলছি যে, আমরা অনেকে ইউটিউবের বিভিন্ন টিউটোরিয়াল ভিডিও দেখে আমাদের সাইটের স্পীড স্কোর ও ১০০ করার কাজে ব্যস্ত হয়ে পড়ি। যেটা কেবলই সময়ের অপচয় ছাড়া আর কিছুই নয়।
পেজ স্পিড ইনসাইট এর ফলাফল এবং বিস্তারিত
পেজ স্পিড ইনসাইট/PageSpeed Insights একটি সাইটের স্পীড এবং পারফর্মেন্সকে শূণ্য (০) থেকে একশত (১০০) এর মধ্যে র্যাংক করে থাকে। যেখানে ১০০ এর অর্থ হলো ফস্টেস্ট স্পীড এবং ০ এর অর্থ হলো স্লোয়েস্ট।
উপরের ছবিটি লক্ষ্য করুন। এখানে ০ থেকে ৪৯ দ্বারা লো র্যাংক বোঝানো হচ্ছে। ৫০ থেকে ৮৯ মিডিয়াম স্কোর এবং ৯০ থেকে ১০০ কে হাই বা মানসম্মত স্কোর বোঝানো হচ্ছে। গুগল পেজ স্পিড ইনসাইট প্রথমে আপনাকে মোবাইল ডিভাইজের স্কোর প্রদর্শন করবে। অতপর আপনি যদি ডেস্কটপ স্কোর দেখতে চান তাহলে স্কোর মিটার এর উপরে বাম পাশে Desktop বাটনে ক্লিক করুন।
বিষয়টা যত সহজ মনে হচ্ছে আসলে পেজ স্পিড ইনসাইট/PageSpeed Insights এর ফলাফল পর্যালোচনা করা ততটা সহজ নয়। কেননা স্কোর এর মাধ্যমে আপনি যে কোন ওয়েবসাইটের স্পীড এবং পারফর্মেন্স সম্পর্কে জানতে পারবেন ঠিকই কিন্তু উক্ত ফলাফল পর্যালোচনা করে সেই অনুযায়ী কাজ করা একটু কষ্টসাধ্য কাজ বটে।
আর তাই আমি আজ আপনাদের সাথে পেজ স্পিড ইনসাইট/PageSpeed Insights এর ফলাফল কিভাবে পর্যালোচনা করবেন সেই বিষয়ে বিস্তারিত আলোচনা করবো।
Lab Data – পেজ স্পিড ইনসাইট
Lab Data আপশনে পেজ স্পিড ইনসাইট/PageSpeed Insights আপনাকে আপনার কাঙ্খিত ওয়েবসাইটের মেজর ফলাফল গুলো প্রদর্শন করবে।
First Contentful Paint
First Contentful Paint বা FCP হলো কোন একটি সাইটের লিংক টাইপ করে ইন্টার বাটর প্রেস করার পর থেকে উক্ত সাইটের সর্ব প্রথম যে টেক্সট, ছবি বা লিংক প্রদর্শন হয়ে থাকে। অর্থাৎ আপনি যখন কোন একটি সাইটের লিংকে ক্লিক করবেন তখন থেকে শুরু করে উক্ত সাইটের প্রথম যে ফিচারটি আপনাকে দেখানো হবে তার মধ্যকার সময়।
এখানে First Contentful Paint 2.6 সেকেন্ড দেখাচ্ছে। তার মানে হলো উক্ত সাইটের লিংকে ক্লিক করার ২.৬ সেকেন্ড পর সাইটের প্রথম পেজটি আংশিক প্রদর্শিত হয়েছে।
Time to Interactive
Time to Interactive হলো কত সময় পর আপনার কাঙ্খিত সাইটটি ব্যবহারের জন্য উপযুক্ত হয়েছে। এখানে Time to Interactive 4.8s অর্থাৎ ৪.৮ সেকেন্ড এর মধ্যে আপনার কাঙ্খিত সাইট এর ফিচার বা লিংক গুলো মোটামুটি ভাবে ব্যবহারের উপযুক্ত হয়েছে।
Speed Index
Speed Index হলো কত সময়ের মধ্যে আপনার সাইটটি সম্পূর্ন ভাবে লোড হয়েছে। অর্থাৎ ৫.৭ সেকেন্ড পর আপনার কাঙ্খিত সাইটটি সম্পূর্ন লোড হয়েছে বা উক্ত সাইটের লিংক, টেক্সট এবং ছবি গুলো পরিপূর্ন লোড হয়েছে।
Total Blocking Time
Total Blocking Time একটি সাইটের বা পেজের ব্যবহারযোগ্যতাকে প্রভাবিত করে। অর্থাৎ কোন একটি সাইটের মূল কন্টেন্ট প্রদর্শন হবার ক্ষেত্রে কোন এলিমেন্ট গুলোর জন্য কি পরিমান সময়ের বাধার সম্মুক্ষিন হয়েছে।
আরো সহজ ভাবে বলতে গেলে, কোন একটি পেজ সম্পূর্ন ইন্টারেক্টিভ হওয়ার আগে কতটা সময় প্রতিক্রিয়াহীন অবস্থায় ছিলো।
Largest Contentful Paint
Largest Contentful Paint দ্বারা আপনার কাঙ্খিত সাইট সবচেয়ে বড় এলিমেন্টটিকে বোঝানো হয়ে থাকে। অর্থাৎ স্বাভাবিক ভাবে একটি সাইটের হোম পেজে যে বিষয়গুলো থাকতে পারে, সাইটের লোগো, টেক্সট এবং ইমেজ এবং এর মধ্যে ইমেজটি হলো সবচেয়ে বড় কন্টেন্ট।
সুতরাং Largest Contentful Paint দ্বারা এক্ষেত্রে সাইটের ইমেজকেই বোঝাবে। এখানে Largest Contentful Paint 2.9s অর্থাৎ ২.৯ সেকেন্ড এর মধ্যে উক্ত সাইটের ইমেজ যথাযথ ভাবে লোড হয়েছে।
Opportunities – গুগল পেজ স্পিড ইনসাইট
পেজ স্পিড ইনসাইট এর Lab Data তে দেখানো হয়েছে আপনার কাঙ্খিত ওয়েবসাইট এর স্পীড টেস্ট এর ফলাফল এবং পারফর্মেন্স স্কোর। এখন Opportunities এ আপনি আপনার সাইটের সমস্যা সমাধানের উপায় সমুহ দেখতে পাবেন।
অর্থাৎ মোটকথা Opportunities অপশনে গুগল আপনার সাইটের পারফর্মেন্স স্কোর বৃদ্ধির উপায় গুলো খুজে বের করতে সহায়তা করবে।
Eliminate render-blocking resources
বেশির ভাগ ওয়েবসাইটের একটি কমন সমস্যা হলো Eliminate render-blocking resources। এই সমস্যা সমাধানের পূর্বে আপনাকে অবশ্যই Eliminate render-blocking resources সম্পর্কে জানতে হবে।
Eliminate render-blocking resources সম্পর্কে বিস্তারিত জানতে হলে আমাদের প্রথমে ওয়েবসাইটের স্ট্রাকচার এর দিকে লক্ষ্য করতে হবে। সাধারন ভাবে আমরা যে কোন ওয়েবসাইট লোড হবার পর লোগো, টেক্সট, লিংক এবং কিছু ইমেজ দেখে থাকি। কিন্তু কম্পিউটার যে কোন ওয়েবসাইটকে তার নিজের ভাষায় পড়ে থাকে।
অর্থাৎ কোন ব্রাউজারের মাধ্যমে যখন কোন ওয়েবসাইটে প্রবেশ করা হয় তখন ব্রাউজার উক্ত ওয়েবসাইটকে একটি টেক্সট ফাইল আকারে উপর থেকে নিচে পর্যন্ত পড়ে থাকে।
আরো সহজ ভাবে বলতে গেলে, আপনি যখন কোন ওয়েবসাইটের লিংক কোন ব্রাউজারে লিখে এন্টার বাটনে ক্লিক করবেন। তখন ব্রাউজার উক্ত ওয়েবসাইটের কোড সমুহকে ডাউনলোড করে পড়া শুরু করে এবং এভাবে Java script code, CSS code গুলো পড়ার পর উক্ত সাইটের ইমেজ এবং টেক্সট ফাইল গুলো ধীরে ধীরে লোড করতে থাকে এবং ব্রাউজারে প্রদর্শন করে থাকে।
এখানেই সবকিছু শেষ নয়। সবচেয়ে মাজার বিষয় হলো, সাধারনত একটি ওয়েবপেজের ৩টি পার্ট থাকে – টপ পার্ট, মিডিল পার্ট এবং লোয়ার পার্ট বা ফুটার। আর যখন কোন ভিজিটর আপনার সাইট ব্রাউজ করবে তখন সে একবারেই আপনার সাইটের সম্পূর্ন পার্ট ভিজিট করবে না।
অর্থাৎ যখন কোন ভিজিটর আপনার সাইটটি ভিজিট করবে তখন ব্রাউজার প্রথমে আপনার সাইটের আপার বা টপ পার্টটি প্রদর্শন করবে। এবং ধীরে ধীরে ভিজিটর যখন স্ক্রলিং করে নিচের দিকে যেতে থাকবে এবং মিডিল পার্ট এবং লোয়ার পার্ট প্রদর্শন করবে।
কিন্তু ব্রাউজারে যখন কোন ওয়েবসাইট ব্রাউজ করা হয় তখন উক্ত ব্রাউজার ওয়েবসাইটের উক্ত পেজের সম্পূর্ন কোড গুলো ডাউনলোড করে পড়া শুরু করে দেয়। সুতরাং ভিজিটর যখন আপনার ওয়েবসাইটের কোন একটি পেজের টপ পার্টটি পড়া বা দেখার জন্য অপেক্ষা করছে তখন সেই মুহুর্তে ব্রাউজার আপনার মিডিল এবং লোয়ার পার্ট সহ পুরো ওয়েবসাইট লোড করার কাজে ব্যস্ত রয়েছে।
অর্থাৎ এই কোড গুলো বা প্রসেসটি আপনার সাইটের আপার বা টপ পার্ট প্রদর্শন করতে বাধা দিচ্ছে বা রেন্ডারকে ব্লক করছে। আর একেই মূলত Eliminate render-blocking resources বলা হয়।
সুতরাং গুগল এখানে বলছে Eliminate render-blocking resources অর্থাৎ যে কোড বা স্ক্রীপট গুলো আপনার ওয়েবসাইটের টপ বা আপার পার্ট প্রদর্শন করতে কাজে লাগবে সেই কোড গুলো বাকি কোড গুলো থেকে আলাদা করতে হবে। যাতে করে ব্রাউজার প্রথমে আপনার ওয়েবসাটের টপ পার্ট এর কোড বা স্ক্রিপট গুলোকে ডাউনলোড করে পড়া শুরু করবে এবং ভিজিটর যখন আপনার সাইটের টপ পার্টটি পড়তে থাকবে সেই সময়ে ব্রাউজার ধীরে সুস্তে মিডিল এবং লোয়ার পার্ট গুলোর কোড ডাউনলোড করবে।
এতে করে ভিজিটরের আপনার সাইটটি সম্পূর্ন লোড হবার জন্য অপেক্ষা করতে হবে না এবং খুব দ্রুত আপনার সাইটটি লোড হবে।
Serve images in next-gen formats
Serve images in next-gen formats গুগল আরো বিভিন্ন ভাবে দেখাতে পারে যেমন, Serve images in correct size এবং Optimize Images। এই সবগুলো মূলত একই বিষয়।
এর অর্থ হলো গুগল আপনার সাইটের ইমেজ গুলোকে সঠিক সাইজ এবং সঠিক ফরমেটে কনভার্ট করতে বলছে। কারন সচারচার আমার মোবাইল বা ক্যামেরা দিয়ে যে ছবি গুলো তুলে থাকি সেই ইমেজ গুলো অনেক বেশি মেগাপিক্সেলের হয়ে থাকে। যা ওয়েবপেজের জন্য সঠিক নয়।
কেননা, এত বড় ইমেজ ওয়েবপেজ বেশিরভাগ সময়ে লোড করতে ব্যার্থ হয় বা অনেক বেশি সময় নেয়। আর তাই যে কোন ইমেজ আপলোড করার পূর্বে দেখে নিন আপনি যে থিমটি ব্যবহার করছেন সেই থিমের কোন স্থানে কোন সাইটের ইমেজ ব্যবহার করার কথা বলছে।
শুধু তাই নয়। স্বাভাবিক ভাবে আমরা ইমেজ মূলত তিনটি ফরমেটে বেশি ব্যবহার করে থাকি সেগুলো হলো PNG, BMG এবং JPG। কিন্তু এই ফরমেট গুলোর ইমেজ সাধারনত অনেক বেশি হেবি হয়ে থাকে। যা ওয়েবপেজের জন্য যথাযথ নয়।
ওয়েবপেজের জন্য webP এবং JPG2000 সবচেয়ে ভালো এবং গ্রহনযোগ্য ফরমেট হিসাবে বিবেচনা করা হয়ে থাকে। কেননা এই ফরমেট ব্যবহারে আপনি আপনার ইমেজের কোন প্রকার কোয়ালিটি লুজ না করেই খুবই কম সাইজের মধ্যে নিয়ে আনতে পারবে। যা ওয়েবপেজে খুব দ্রুত লোড হবে।
Remove unused CSS
Remove unused CSS এর মাধ্যমে গুগল বলতে চাচ্ছে, আপনার সাইটে এমন কিছু CSS কোড রয়েছে যা আপনার সাইটে কোন কাজেই লাগছে না। কিন্তু ব্রাউজার প্রতিনিয়ত উক্ত কোড গুলো ডাউনলোড করছে যার জন্য কেবল সময়েরই অপচয় হচ্ছে না বরং আপনার সাইটের লোড টাইম বৃদ্ধি পাচ্ছে।
সুতরাং যে CSS কোড গুলো আপনার সাইটে ব্যবহৃত হচ্ছে না সেই কোড গুলো চিহ্নিত করে সেগুলো রিমুভ করুন।
Minify CSS / Minify JavaScript
Minify CSS / Minify JavaScript হলো আমরা আমাদের ওয়েবসাইটে যে সি এস এস কোড বা জাভা স্ক্রিপ্ট ব্যবহার করি তার মধ্যে অনেক অব্যবহৃত স্পেস থাকে যা মিনিফাই করার মাধ্যমে কোডিং এর মাঝে সেই অপ্রয়োজনীয় স্পেস গুলো দূর হয় এবং সাইট খুব দ্রুত লোড হয়।
CSS এবং JavaScript কোড গুলো মিনিফাই করার জন্য আপনি ওয়ার্ডপ্রেসে অনেক প্লাগইন পেয়ে যাবেন তাদের যে কোন একটা ব্যবহার করুন। যেমন, যে কোন ক্যাশ প্লাগইনে আপনি এই অপশন পেয়ে যাবেন। আবার আপনি যদি ক্লাউড ফ্লেয়ার ব্যবহার করেন তাহলে সেখানে ও CSS এবং JavaScript কোন মিনিফাই করার অপশন পেয়ে যাবেন।
তবে খেয়াল রাখবেন যে কোন একটি জায়গা থেকে বা একটি প্লাগইন থেকে এই অপশনটি ব্যবহার করুন। যেমন, ক্যাশ প্লাগইনে CSS এবং JavaScript কোড গুলো মিনিফাই ব্যবহার করলে ক্লাউড ফ্লেয়ারে এই অপশনটি ব্যবহার করবেন না।
Preload key requests
ওয়ার্ডপেস ওয়েবসাইট গুলোতে প্রিলোড এর দারুন একটি ফিচার রয়েছে। যেমন, কোন একজন ভিজিটর যখন সাইটে প্রবেশ করবে তখন উক্ত ভিজিটর সাইটের কোন একটি লিংকে মাউস পয়েন্ট রাখলে সে সেখানে ক্লিক করুক বা নাই করুক উক্ত লিংকটি অটোমেটিক ভাবে ব্যাকগ্রাউন্ডে লোড হওয়া শুরু করে।
যার মাধ্যমে ভিজিটর যদি সেই লিংকে ক্লিক করে তাহলে খুবই কম সময়ের মধ্যে উক্ত পেজটি লোড হয়ে যায়। এটা মূলত কোন সাইট ব্যবহারের ইউজার এক্সপেরিয়েন্স কে প্রভাবিত করে।
তবে এই অপশনটি ব্যবহারের একটা অসুবিধা ও রয়েছে। যেমন, এই প্লাগইন বা অপশনটি মাঝে মাঝে আপনার সাইটের লোড টাইম বৃদ্ধি করে দিতে পারে। যেমনটি এখানে দেখাচ্ছে।
Efficiently encode images
এই অপশটি বা সমস্যা নিয়ে মূলত বিস্তারিত বলার তেমন কিছু নেই। কেননা Serve images in next-gen formats এই সমস্যা সমাধান করার মাধ্যমে যখন আপনি আপনার সাইটে সঠিক জায়গার সঠিক সাইজ এবং সঠিক ফরমেটের ইমেজ ব্যবহার করবেন তখন আপনাকে Efficiently encode images এর সমস্যায় পড়তে হবে না।
Reduce initial server response time
মূলত শেয়ার্ড হোস্টিং সাভার গুলোতে Reduce initial server response time সমস্যা বেশি দেখা যায়। এই ধরনের সমস্যা দূর করার জন্য হোস্টিং পরিবর্তন ছাড়া কোন উপায় নেই। কেননা, আমরা জানি শেয়ার্ড হোস্টিং এর স্পীড স্বাভাবিক ভাবে অনেক কম হয় এবং তা অতিরিক্ত লোড নিতে সক্ষম নয়।
তাই initial server response time কমাতে হলে ভালো কোন হোস্টিং এ আপনার সাইটটি ট্রান্সফার করুন।
=শেষ কথা=
আশা করি আমার সল্প জ্ঞ্যান থেকে পেজ স্পিড ইনসাইট সম্পর্কে মোটামুটি ধারনা দিতে পেরেছি।
আর্টিকেলটির শেষে আমি আবার ও বলবো কখনই ১০০ তে ১০০ স্কোর করার পিছনে ছুটবেন না। কেননা, বিভিন্ন ওয়েবসাইট স্পিড টেস্ট সাইট গুলো বিভিন্ন লোকেশন থেকে আপনার সাইটটি এনালাইসিস করে থাকে।
তাই বাস্তবের স্পিড আর বিভিন্ন ওয়েবসাইটের এনালাইসিস করা স্পিড এক নাও হতে পারে। তবে Opportunities এ প্রদত্ত নির্দেশনার দিকে বিশেষ গুরুত্ব দিন। এখানে আপনার ওয়েবসাইট এর স্ট্রাকচার এর বিষয়ে আলোচনা করা হয়ে থাকে যা আপনার সাইটের পারফর্মেন্স বৃদ্ধির ক্ষেত্রে অপরিহার্য ভুমিকা পালন করতে পারে।
পরবর্তী আর্টিকেলে বিভিন্ন জনপ্রিয় ওয়েবসাইট স্পীড টেস্ট এবং পারফর্মেন্স চেকার সম্পর্কে আলোচনা করা হবে। সেই পর্যন্ত ভালো থাকবেন সুস্থ থাকবেন।