ওয়েবসাইটের স্পীড ১০০% করার খাটি ও কার্যকর উপায় 2022 - Islamic Plp File

সাইটের স্পীড ১০০% করার খাটি ও কার্যকর উপায়

 প্রমাণ সহ আজ ধারাবাহিক ভাবে সম্পূর্ণ গাইড লিখে ফেললাম। স্পীড অপটিমাইজ করতে তিনটা জিনিস মাথায় রাখতে হবে, CLS, FID আর LCP, আগে একটা সময় ছিলো মোটামুটি একটা স্পীড স্কোর থাকলেই চলতো। বর্তমানে core web vatils আসার কারণে স্পীড স্কোরে শুধু ফোকাস করে কোনো লাভ নেই। স্পীড অপটিমাইজ করতে LCP, FID, CLS বিষয় গুলো মাথায় রাখতে হবে।

তো সব কিছু ঠিক রেখে স্পীড স্কোর ১০০% কিভাবে করা যায় তা নিয়ে আলোচনা করবো। আর কাজ গুলো কিভাবে করবেন, কোন প্লাগইন ব্যাবহার করবেন, setting কিভাবে করবেন সব দেখাবো। একজন বিগিনার যেনো কাজ গুলো সহজে করতে পারে।


ওয়েবসাইটের স্পীড ১০০% করার খাটি ও কার্যকর উপায় 2022 - Islamic Plp File


এছাড়া এইখানে দেখানো সেম পদ্ধতি তিনটা সাইটে প্রয়োগ করে ১০০% করার সাকসেস প্রুফ দেওয়া হয়েছে। গাইড টা সম্পূর্ণ পড়ুন, একটু লম্বা হয়ে গেছে। এড়িয়ে এড়িয়ে পড়লে কিছুই বুঝতে পারবেন না। বাড়তি কিছু কথার মধ্যে, ইম্পর্ট্যান্ট বিষয় ঢুকিয়ে দেওয়া আছে। আপনার ১০ মিনিট সময় বেশি কিছু নয়। যাইহোক,

শুধু প্লাগইন ব্যাবহার করেই স্পীড ১০০% করা সম্ভব নয়। প্রথমে আপনাকে একটা ভালো হোস্টিং নিতে হবে। আপনি যদি  Namechep ব্যাবহার করেন, এই পোস্টে দেখানো মেথড আপনাকে ১০০% স্কোর দিবে না।

এর পরের বিষয় যেটা, একটা রেসপনসিভ থিম সাইটে ইউজ করতে হবে। আমার দেখা মতে জেনারেট প্রেস, আর Astra Pro সেরা। দুটো থিম আমার খুব পছন্দের। আমি অনেক লোককে দেখি DIV থিম ব্যাবহার করতে। আপনি যদি তাদের মধ্যে একজন হন, বা অন্য কোনো ভারি থিম ব্যাবহার করে থাকেন, তাহলে আপনার স্পীড স্কোর ১০০% আশা করা চরম বোকামি।

আর সাইটের ডিজাইন যে খুব রঙা চঙ্গা করতে হবে এর কোনো মানে হয় না। ইউজার কখনো সাইটের ডিজাইন দেখতে আসবে না। Search Engine থেকে সাইটে আসে কন্টেন্ট পড়ার জন্য। সুতরাং কনটেন্ট ডিজাইন ভালো হলেই যথেষ্ট। আর ইউজার যেনো সাইটের কোথায় কি আছে সহজে বুঝতে পারে এমন এবিলিটি থাকলেই হল। তাই হালকা থিম ব্যাবহার করে মাঝারি একটা লুক দেন।

আপনার যদি থিম এবং হোস্টিং ঠিক থাকে তাহলে আপনি নিচের ধাপে যেতে পারেন। যদি ইতোমধ্যে ভারি কোনো থিম premium নিয়ে ফেলেছেন, তাহলে আপনি জেনারেট প্রেস অথবা Astra ফ্রী ভার্সন ব্যাবহার করতে পারেন। পরে যখন টাকা হবে তখন premium টা নিয়ে ফেলবেন। আপনি যদি বলেন ফ্রী ভার্সনে তো অনেক কিছুই পাওয়া যায়না। তাহলে আপনি থামেন। ফ্রী তে এই দুটো থিমে যা পাওয়া যায়, এইটাই যথেষ্ট একটা সাইটের জন্য। কিছুদিন আগে একটা সাইট দেখেছি ১৭k ট্রাফিক পাচ্ছে, কিন্ত থিম জেনারেট প্রেস ফ্রী ভার্সন। তার যদি চলে তাহলে আপনার চলবে না কেনো??

এর পরের বিষয় হলো, সাইটে যদি অনেক প্লাগইন থাকে তাহলে সেগুলো রিমুভ করে দিন। ছোট ছোট কাজের জন্য প্লাগইন ইউজ করার মানেই হয় না। সাধারণ Wp লগইন ইউআরএল Hide করতে এবং Table of Content তৈরি করতে কোনো প্লাগইন ব্যাবহার করার প্রয়োজীয়তা নেই। এই কাজ গুলো একটু google করলে দুই চার মিনিটে করে ফেলা সম্ভব কোনো প্লাগইন ছাড়া।

এছাড়া অনেকে Contact form 7 ইউজ করেন। আমাকে বলেন তো, এইটা affilite সাইটে কোনো কাজে আসে? যদি বিজনেস সাইট হয় সেটা অন্য কথা। কন্ট্যাক্ট পেজ আপনি অল্প দুইচার লাইন লিখে Email দিলেই তো হয়। ইউজারের প্রয়োজন হলে ডিরেক্ট ইমেইল করবে। এই ধরনের প্লাগইন গুলো যত তাড়াতাড়ি সম্ভব সরিয়ে ফেলুন। প্রায় সব প্লাগইন সাইট কে ভারি করার ওস্তাদ। একটা affilite সাইটে ৭-১৫ টা প্লাগইন যথেষ্ট।

একটা মজার ঘটনা বলি, গত মাসে fiverr এ এক Client মেসেজ করে তার সাইটের স্পীড ঠিক করার জন্য। তার সাইটে লগইন করে দেখি, ৭৮ টা প্লাগইন ব্যাবহার করেছে। কোন যে ডেভলপার ওই সাইট ডিজাইন করেছে, আল্লাহ ভালো জানে। ছোট ছোট কাজগুলোর জন্য প্লাগইন। আহা বেচারা Core Web Vitals ইস্যুর জন্য রাঙ্ক ড্রপ করেছে। একটা সাধারণ বিজনেস সাইটে এত প্লাগইন ইউজ করার দরকার ছিলো না। Higest ১৭ টা প্লাগইন দরকার ছিলো ওই সাইটের জন্য।

যাইহোক অনেক বাড়তি কথা বলে ফেললাম, এখন মূল আলোচনায় আসা যাক।

সাইটের স্পীড ১০০% করার টেকনিক।

আপনার যদি উপরের আলোচিত বিষয় গুলো ঠিক থাকে তাহলে এই প্লাগইন গুলো লিস্ট করে নিন।

১. Wp-Rocket

২. ইমেজ optimization plugin ( Smush/ Imagefy/ Robin ) যে কোনো একটা হলেই হলো।

৩. Webp Express

৪. Remove google font

ধাপ ১: WP-ROCKET কনফিগারেশন পদ্ধতি।

আপনার যদি Wp-Rocket প্লাগইন না থাকে, তাহলে এখান থেকে (https://cutt.ly/eIgIDxt) ডাউনলোড করে নিবেন। এই প্লাগইন টা ডেভলপার ভার্সন, শুধু পরীক্ষা করার জন্য ব্যাবহার করতে পারেন। কতটা কাজে আসে। কোনো সমস্যা নাই ঐটার মধ্যে, কিন্ত ডেভলপার ভার্সন না ব্যাবহার করাই ভালো। আমি প্রায় ৬ মাস ব্যাবহার করেছিলাম এইটা। পরে একদিন আমার এক Client আনলিমিটেড টা কিনে আমাকে স্পীড অপটিমাইজ করতে দেয়। তাকে বলে আমার সাইটে প্লাগইন টা এক্টিভ করে নিয়েছি।

তা যাইহোক, যাদের এই প্লাগইন টা নাই অ্যান্ড $৫০ দিয়ে একটা সাইট বা $২৪৯ দিয়ে একা কেনা সম্ভব নয়। তারা কমেন্ট এ জানাবেন। ২০-৩০ জন হলে আনলিমিটেড ভার্সন টা কিনে নেওয়া হবে, যদি ৩০ জন হয় তাহলে ২৪৯/৩০ = $৮.৩ পড়ে একজনের জন্য। আরো লোকসংখ্যা বাড়লে আর চার্জ কমে আসবে। আনলিমিটেড সাইটে ইউজ করতে পারবেন। আর সবাইকে অ্যাকসেস দিয়ে দেওয়া হবে। নিজে নিজে ডাউনলোড করে নিবেন।

এখন কিভাবে কনফিগারেশন করা যায় তা শুরু করি।

১. প্রথমে প্লাগইন টা ইনস্টল করে এক্টিভ করে নিন।

২. Wp Dashboard থেকে setting এ ক্লিক করে দেখেন Wp-Rocket অপশন দেখাচ্ছে।

৩. Wp rocket এ একটা ক্লিক করলে, এর ড্যাশবোর্ডে আপনাকে নিয়ে যাবে।

৪. Cache অপশনে ক্লিক করে "Enable caching for Mobile devices" এই অপশনে একটা টিক মার্ক দিন। এর আন্ডারে থাকা অন্য দুটো অপশনে টিক দিয়ে নিন।

Screenshot দেখে নিন: https://prntscr.com/10x7v6r

৫. এইবার File Optimization এ একটা ক্লিক করুন।

এর পর এই অপশন গুলোতে একটা করে টিক দিয়ে নিন। " Optimize Google Font" "Minify CSS file" "Minify JavaScript File" and " Load JavaScript Deferred" এইবার Save এ ক্লিক করে দিন। তারপর Clear Cache এ ক্লিক করুন। এই অপশন টা পাবেন Wp- Dashboard এর উপরের বারে। যেখানে Yoast আর গ্রীন সিগন্যাল টা দেখায় ঐটার পাশে। এইবার Page Speed Insights Tool এ গিয়ে দেখুন কি রেজাল্ট দেখায়। যদি দেখেন Eliminate render-blocking resources, Remove Unused CSS, Remove Unused JS, সমস্যা ঠিক হয়ে গেছে তাহলে আপনি ইমেজ অপটিমাইজেশন পার্ট এ চলে যান। আর যদি না ঠিক হয় তাহলে নিচের মেথড গুলো ফলো করুন।

৬. আবার File Optimization a click করে "Combine CSS File" and "Combine Javascript file" এ টিক মার্ক দিন। এরপর Remove query strings from static resources আর Remove jQuery Migrate এ ঠিক মার্ক দিন আর সেভ করুন। সম্পূর্ণ কনফিগারেশন স্ক্রীনশট এইখান থেকে দেখুন: ১. https://prntscr.com/10x80pm

২.https://prntscr.com/10x7zma

এইবার PSI তে search করে দেখুন সব Css and Js জনিত প্রবলেম গুলো ঠিক হয়ে গেছে এবং স্পীড স্কোর বেড়ে গেছে।

৭. এইবার Media তে ক্লিক করুন আর এই স্ক্রীনশট এ দেওয়া অপশন গুলোতে টিক মার্ক করে সেভ করে দিন।

চেক স্ক্রীনশট: https://prntscr.com/10x83hi

আপনি যদি উপরের কাজ গুলো ঠিক মত করে থাকেন তাহলে Eliminate render-blocking resources, Remove Unused CSS, Remove Unused JS, এই ধরনের যত css এবং js জনিত প্রবলেম আছে সব ঠিক হবে। এর পরেও যদি কোনো এরর দেখেন, এই গাইড টা পড়তে থাকেন, সমাধান পেয়ে যাবেন।

ধাপ ২: ইমেজ অপটিমাইজেশন।

আপনাকে CLS সম্পর্কে খুব সচেতন হতে হবে। অনেকে বুঝতে পারবেন না CLS টা আসলে কি??

CLS বলতে, যখন আপনি আপনার সাইট ভিজিট করেন, পেজ গুলো লোড হওয়ার সময় লক্ষ্য করে দেখবেন, সাইট টা কিছু টা জাম্প করছে। আর এই জাম্প করাটা হলো CLS।

Core web vatils এর অন্য ইস্যু গুলো দ্রুত ফিক্স করা গেলেও CLS ঠিক করা একটু কঠিন কাজ। সাধারণত ইমেজ সাইজ, এম্বেড ভিডিও সাইজ, লগোর জন্য এই সমস্যা দেখা যায়। অনেক সময় স্পীড অপটিমাইজেশন প্লাগইন, আর ইমেজ অপটিমাইজেশন প্লাগইন গুলোর জন্য হয়ে থাকে।

সব সময় চেষ্টা করবেন এক সাইজের ইমেজ ইউজ করতে। আলাদা আলাদা সাইজের ইমেজের কারণে CLS দেখা দেয়। আমার একটা সাইটে বিভিন্ন সাইজের ইমেজ ছিলো, যার কারণে CLS দেখা দেয়। প্রথমে আমি এই বিষয়টি বুঝতে পারি নি। পরে যখন সব গুলো ইমেজ এক সাইজে যুক্ত করলাম, দেখি CLS চাঁন্দের দেশে চলে গেছে।

(এইগুলো আমার ব্যাক্তিগত মতামত, আজ পর্যন্ত এইগুলোর জন্য CLS সমস্যা লক্ষ্য করেছি। আপনার এই বিষয়ে আরো ভালো ধারণা থাকলে কমেন্টে Share করার অনুরোধ রইল)

আপনি যদি জেনারেট প্রেস বা astra pro ইউজার হন তাহলে ফিচার ইমেজ গুলো ১০২৪*৬৪৯ সাইজে সেটআপ করে নিন। এই সাইজ টা সেরা এই থিম দুটোর জন্য। সব ইমেজ সাইজ এক সাইজে যুক্ত করার পর ইমেজ অপটিমাইজেশন শুরু করবেন, তাছাড়া আপনি CLS সমস্যায় পরে যাবেন।

ইমেজ গুলোর কোয়ালিটি ঠিক রেখে অপটিমাইজেশন করার উপায়।

১. আপনি Robin দিয়ে search করে প্লাগইন টা এক্টিভ করে নিন। অন্যান্য প্লাগইন গুলো ইমেজ অপটিমাইজ করতে কম বেশি সমস্যা তৈরি করে। কিন্ত এই প্লাগইন টা সাইটে কোনো ধরনের সমস্যা তৈরি করে না।

২. এইবার setting থেকে Robin Image Optimizer এ ক্লিক করলে, এই প্লাগইনের ড্যাশবোর্ডে আপনাকে নিয়ে যাবে। এরপর ঐখানে একটা Setting নামে অপশন পাবেন। ঐটাতে ক্লিক করে save করে দিন।

৩. এইবার Bulk Optimization এ ক্লিক করে, Run নামে একটা অপশন পাবেন। একটা ক্লিক মেরে দিবেন, এইটা ইমেজ optimization শুরু করে দিবে। ১০০% হলে আপনার আর কিছু করা লাগবে না।

স্ক্রীনশট দেখুন: https://prntscr.com/10x87l9

৪. এইবার lazy load যে কোনো একটা প্লাগইন ইনস্টল করে এক্টিভ করে নিন। আপনি smush টা এক্টিভ করে নিতে পারেন। আর সাতে কনফিগার করে নিন। আমার জানা মতে সবাই কম বেশী এইটার সাথে পরিচিত। তাই এর কনফিগারেশন সমন্ধে আর কিছু লিখছি না। যদি দেখেন smush CLS ইস্যু তৈরি করেছে তাহলে Imagefy টা কনফিগার করে নিন।

৫. উপরের ইমেজ অপটিমাইজেশন প্লাগইন গুলো ব্যাবহারের ফলে server images in nextgen format সমস্যা তৈরি হবে। এইটা ঠিক করার জন্য আপনি Webp Express Plugin টা ইনস্টল করে, এক্টিভ করে সেভ করে দিন। আর কিছু করা লাগবে না। সম্পূর্ণভাবে এই সমস্যা সমাধান করে ফেলবে। ( অন্য lazy load plugin গুলোতে এই অপশন টা আছে, তবে খুব একটা কাজ করে না, যতটা এই প্লাগইন করে।)

৬. শেষবারের মত remove google font প্লাগইন টা ইনস্টল করে এক্টিভ করুন। আর কিছু করা লাগবে না। অনেক সময় google ফন্টের জন্য কিছু css বা js স্ক্রিপ্ট তৈরি হয়, যা loading স্পীডের উপর প্রভাব ফেলে। এইটা এক্টিভ করে নিলে এই প্রবলেম গুলো সমাধান করে ফেলবে। ( Wp-Rocket এ এই অপশন টা থাকলেও কোনো ভালো রেজাল্ট আসে না। তাই এই অতিরিক্ত প্লাগইন টা ব্যাবহার করা দরকার)

উপরের মেথড সাম্পর্ণভাবে তিনটা সাইটে apply করা হয়েছে, এর বাড়তি কোনো কিছুই করা হয় নি। দুইটা সাইটের রেজাল্ট মোবাইল ডেস্কটপ ১০০% Pagespeed insight tool এ, আর একটা সাইটের ডেস্কটপ ১০০ মোবাইল ৯২, (সেম রিপোর্ট প্রত্যেকটা পেজের জন্য পাওয়া গেছে) স্ক্রীনশট নিচে দেওয়া হলো। আর যে সাইটে মোবাইল ৯২ পাওয়া গেছে ঐটা ১০০% হতো। কিন্ত সার্ভার রেসপন্স টাইম অনেক বেশি। আর client খুব খারাপ মনের হোস্টিং ইউজ করেন।

১. https://prntscr.com/10x8wf8

২.https://prntscr.com/10x92x9

৩.https://prntscr.com/10x965t

Data report একটা সাইটের ডেওয়া হলো, প্রত্যেকটা প্রায় একই।

Check screenshot: https://prntscr.com/10x99vh

এইবার Pagespeed insights tools সার্চ করে দেখুন আপনার স্পীড স্কোর ৯০+ হয়ে গেছে। যদি স্পীড স্কোর ৯০+ হয় , তাহলে লুঙ্গি ড্যান্স করার কিছুই নেই। এইবার আপনার সাইটের প্রত্যেকটা পেজ চেক করুন দেখুন, ঠিক আছে কি না। যদি ঠিক থাকে তো আপনি sucess। আর সাথে আপনার সাইট নিজে মোবাইল দিয়ে and ডেস্কটপ দিয়ে ভিজিট করে দেখুন লোড হওয়ার সময় জাম্প করে কি না। যদি খুব বেশী জাম্প করে তাহলে CLS ঠিক করতে হবে। আর PSI যে CLS রিপোর্ট দেয় এইটা অরজিনাল না। মানুয়ালি চেক করা ভালো। যদি হালকা পরিমাণ থাকে তাহলে সমস্যা নাই।

শেষ মন্তব্য:- 

আমার দেখানো মেথড সব সাইটে কাজ না করতেও পারে। বিভিন্ন সময় সাইটে বিভিন্ন ধরনের টেকনিকাল ইস্যু থাকে। যার কারণে Pagespeed Insights Tool বিভিন্ন সমস্যা দেখাতে পারে । তাই অবস্থা দেখে ব্যাবস্থা নিতে হবে। 

আমার লেখায় ছোটোখাটো ভুল থাকলে এড়িয়ে যাবেন। আর আপনার ভালো আরো কিছু টিপস থাকলে, share করবেন কমেন্টে, তাহলে আমরা আরো উপকৃত হবো। এছাড়া কোনো অভিযোগ থাকলে সরাসরি জানাবেন। ধন্যবাদ

ক্রেডিট : Md Julhas Khan



Post a Comment

Previous Post Next Post