TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পেজ লোডিং স্পিড কিভাবে উন্নত করা যায়?

15

এইচটিএমএল হল ইন্টারনেটের ভিত্তি এবং ওয়েব সার্ভার ব্রাউজারের ফ্রন্টএন্ডে এইচটিএমএল পেজ পাঠায়। ক্রোমের মতো ব্রাউজার, এইচটিএমএল মার্কআপ ব্যাখ্যা করে এবং পাঠযোগ্য উপায়ে পৃষ্ঠার সামগ্রী প্রদর্শন করে। এই ধারণাটি সেই সাইটগুলির জন্য একই যা পিএইচপি ব্যবহার করে ওয়ার্ডপ্রেসের মতো সামগ্রী ব্যবস্থাপনা সিস্টেমের সাথে। যাইহোক, একটি ওয়েবসাইট তৈরি করা এই দিনে যথেষ্ট নয়। ভাল সার্চ ইঞ্জিন র‍্যাঙ্কিং এবং ব্যবহারকারীর অভিজ্ঞতা পেতে আপনাকে দ্রুত লোডিংয়ের জন্য আপনার সাইটকে অপ্টিমাইজ করতে হবে। এই নিবন্ধে, আমরা আপনার স্ট্যাটিক এইচটিএমএল ওয়েবসাইটকে কিভাবে গতিশীল করব এবং গুগল সার্চ ফলাফলে আপনার সাইটকে শীর্ষে নিয়ে যাওয়ার সম্ভাবনা উন্নত করব তা আমরা অনুসন্ধান করব।

আমরা শুরু করার আগে – স্ট্যাটিক এইচটিএমএল ওয়েবসাইট

মনে রাখবেন, এই নিবন্ধে আমরা আপনার নিজের তৈরি করা স্ট্যাটিক এইচটিএমএল ওয়েবসাইট সম্পর্কে কথা বলছি। আপনি আপনার নিজস্ব ডিজাইন দিয়ে HTML ওয়েবসাইট তৈরি করতে পারেন বা বুটস্ট্র্যাপের মত রেডিমেড ফ্রেমওয়ার্ক ব্যবহার করতে পারেন। সাধারণভাবে, আপনি আপনার সার্ভারে HTML পৃষ্ঠা এবং অন্যান্য সম্পদ (ছবি / CSS / JS) আপলোড করতে পারেন এবং ব্রাউজার থেকে সাইটটি অ্যাক্সেস করতে পারেন। ডোমেইন নেম এবং হোস্টিং একাউন্ট ছাড়া অন্য কোন থার্ড-পার্টি টুলের প্রয়োজন নেই এই উদ্দেশ্যে। বিকল্পভাবে, আপনি স্ট্যাটিক এইচটিএমএল পৃষ্ঠা তৈরি করতে এবং এফটিপি-র মাধ্যমে আপলোড করার জন্য মবিরিসের মতো তৃতীয় পক্ষের সরঞ্জাম ব্যবহার করতে পারেন।

আমরা নিম্নলিখিত ক্ষেত্রে আলোচনা করছি না:

  • ওয়ার্ডপ্রেসের মত বিষয়বস্তু ব্যবস্থাপনা সিস্টেম – ওয়ার্ডপ্রেস আপনার ওয়েবসাইটের লোডিং গতি উন্নত করার জন্য সম্পূর্ণ অপ্টিমাইজেশান স্যুট প্রদান করে। ওয়ার্ডপ্রেস সাইটের পৃষ্ঠা লোড করার সময় অপ্টিমাইজ করার বিষয়ে আমাদের নিবন্ধটি দেখুন ।
  • Weebly, Wix, ইত্যাদি ওয়েবসাইট নির্মাতা সরঞ্জাম – এই প্ল্যাটফর্মগুলি ওপেন সোর্স সলিউশন নয় যার মানে হল আপনার প্ল্যাটফর্মের মধ্যে অপ্টিমাইজ করার সীমিত বিকল্প আছে। আপনি এই নিবন্ধে প্রস্তাবিত কিছু বিকল্প ব্যবহার করতে পারেন। যাইহোক, আপনি সার্ভার অ্যাক্সেস করতে না পারার কারণে CSS/JS কে একত্রিত করা, রেন্ডার ব্লকিং রিসোর্স ইত্যাদি অপসারণ করতে পারেন।

গুগল পেজস্পিড ইনসাইট টুলে পেজ স্পিড চেক করুন

এখন যেহেতু প্রেক্ষাপট পরিষ্কার, আমরা আরও এগিয়ে যাব। অপ্টিমাইজেশন শুরু করার সর্বোত্তম উপায় হল প্রথমে আপনার সাইটে বিদ্যমান মৌলিক সমস্যাগুলি বোঝা। গতি সম্পর্কিত সমস্যাগুলি খুঁজে পেতে, গুগল পেজস্পিড ইনসাইট সরঞ্জামগুলিতে যান এবং আপনার ওয়েবসাইটের স্কোর পরীক্ষা করুন। প্রথমে স্কোর নিয়ে বেশি চিন্তা করবেন না, নিচে স্ক্রোল করুন এবং স্কোর উন্নত করার জন্য সুযোগ বিভাগ দেখুন।

স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পেজ লোডিং স্পিড কিভাবে উন্নত করা যায়?

গুগল পেজস্পিড ইনসাইট সাজেশন

মনে রাখবেন যে PageSpeed ​​Insights টুলে দেখানো সুযোগগুলি স্কোরকে সরাসরি প্রভাবিত করবে না। একটি সাধারণ নিয়ম হিসাবে, আপনার ওয়েবসাইটের ভাঁজ (হেডার বিভাগ) বিভাগে সমস্যা থাকলে স্কোর কম হবে। এতে রেন্ডার ব্লকিং রিসোর্স, ফন্ট এবং ইমেজ প্রিলোডিং, থার্ড-পার্টি কোড সহ ক্রমবর্ধমান লেআউট শিফট ইত্যাদি রয়েছে। অতএব, আপনি আপনার স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পেজ লোডিং স্পিড উন্নত করতে সুযোগ এবং সাধারণ নিয়মগুলিকে একত্রিত করতে পারেন।

স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পেজ লোডিং স্পিড কিভাবে উন্নত করা যায়?

আপনি আপনার সাইটের গতি উন্নত করতে নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

1 সিএসএস এবং জেএস ফাইলগুলিকে একত্রিত এবং ছোট করা

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

  • আপনার সিএসএস / জেএস / এইচটিএমএল ফাইলে অপ্রয়োজনীয় স্পেস এবং মন্তব্যগুলি সরিয়ে ফেলা আপনার প্রথম জিনিস। এটাকে বলা হয় মিনিফিকেশন যা ফাইলের আকার কমায় এবং পেজ লোডিং স্পিড উন্নত করে। ফাইল থেকে অপ্রয়োজনীয় বিশৃঙ্খলা দূর করতে এই CSS, JS এবং HTML minification টুল ব্যবহার করুন। মনে রাখবেন, ছোট করা CSS এবং JS ফাইলে .min.css এবং .min.js এর মতো এক্সটেনশন থাকবে।
  • আপনার হোস্টিং কোম্পানির সাথে চেক করুন এবং আপনার HTML বিষয়বস্তু সংকুচিত করতে GZIP কম্প্রেশন সক্ষম করুন। এটি ব্রাউজারে পরিবেশন করা ফাইলের আকার হ্রাস করবে এবং পৃষ্ঠার গতিকে ব্যাপকভাবে উন্নত করবে। আপনার সাইট ব্যবহার GZIP কম্প্রেশন ব্যবহার করছে কিনা আপনি যাচাই করতে পারেন এই টুল এবং আকার সঞ্চয় খুঁজে।
  • CSS এবং JS ফাইলগুলির সমন্বয় আপনাকে আপনার সার্ভারে HTTP অনুরোধের সংখ্যা কমাতে সাহায্য করবে। অতএব, আপনি বিভিন্ন স্টাইলশীটে স্টাইল ব্যবহার করার পরিবর্তে CSS ফাইলগুলিকে একত্রিত করতে পারেন। যাইহোক, এটি প্রয়োজন হয় না যদি আপনার হোস্টিং সার্ভার HTTP/2 প্রোটোকল সমর্থন করে যা সমান্তরাল HTTP অনুরোধ সমর্থন করে । উপরন্তু, JS ফাইলগুলিকে একত্রিত করলে লেআউটটি ভেঙে যেতে পারে যদি না আপনি ফাইলের ভিতরে সঠিকভাবে কোড একত্রিত করতে জানেন।

2 রেন্ডার ব্লকিং রিসোর্স অপসারণ

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

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

মনে রাখবেন, সব পরিস্থিতিতে ফাইলটিকে ফুটার এলাকায় সরানো সম্ভব নয়। আপনার সাইটের লেআউট চেক করুন এবং ফাংশনগুলো ঠিকঠাক কাজ করছে যখন আপনি ফাইলগুলিকে আবার সাজান। উপরন্তু, কোন রিসোর্স ফাইল ঝামেলা সৃষ্টি করছে তা খুঁজে পেতে আপনাকে ফাইলগুলিকে একত্রিত করতে অক্ষম করতে হতে পারে।

3 কনটেন্ট ডেলিভারি নেটওয়ার্ক ব্যবহার করুন (CDN)

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

  • আপনি আপনার সার্ভারে এটি করার পরিবর্তে CDN নেটওয়ার্ক ব্যবহার করে ফাইলগুলিকে একত্রিত এবং ছোট করতে পারেন।
  • গতি বাড়ান, বিশেষ করে যদি আপনি আন্তর্জাতিক ব্যবহারকারীদের জন্য সামগ্রী পরিবেশন করছেন।
  • স্বয়ংক্রিয় বটগুলি ব্লক করে এবং নিষ্ঠুর শক্তি এবং DDoS সুরক্ষা দিয়ে সুরক্ষা উন্নত করুন।

মৌলিক ক্লাউডফ্লেয়ার সিডিএন বিনামূল্যে যা বেশিরভাগ স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের জন্য যথেষ্ট। আপনি একক ক্লিকের সাহায্যে ফাইলগুলিকে একত্রিত এবং ছোট করতে পারেন এবং পরীক্ষা করতে পারেন যে এটি কীভাবে আপনার পৃষ্ঠা লোডিং গতির উপর প্রভাব ফেলে গুগল পেজস্পিড ইনসাইটস টুলে। আপনি যদি বুটস্ট্র্যাপের মত ফ্রেমওয়ার্ক ব্যবহার করেন, তাহলে আপনার সার্ভার থেকে সোর্স ফাইল সার্ভিস করার পরিবর্তে CDN রিসোর্স অন্তর্ভুক্ত করতে ভুলবেন না।

4 থার্ড-পার্টি কোড এড়িয়ে চলুন

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

  • পৃষ্ঠা লোড হওয়ার সময় দৃশ্যমান এলাকার নিচে গুগল অ্যাডসেন্সের মতো বিজ্ঞাপন রাখুন। দুর্ভাগ্যবশত, এটি সরাসরি আপনার উপার্জনকে প্রভাবিত করবে CTR এবং পৃষ্ঠাভিউ হ্রাস করে।
  • বডি সেকশনের পরে গুগল অ্যানালিটিক্স বা অন্য কোন ট্র্যাকিং কোড োকান।
  • সামাজিক ভাগ করার জন্য হেডারে কোড সন্নিবেশ করা এড়িয়ে চলুন।
  • আপনি যদি গুগল ফন্ট ব্যবহার করে থাকেন, তাহলে কম ফন্টের ওজন এবং ফন্টের পরিবারের সাথে একটি সহজ পদ্ধতিতে ব্যবহার করতে ভুলবেন না। এটি আপনাকে ফাইলের সংখ্যা কমাতে এবং গুগলের সার্ভার থেকে দ্রুত পেতে সাহায্য করবে।

5 প্রিলোডিং ফন্ট এবং ছবি

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

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

এটি খুব দরকারী বিশেষ করে যখন আপনার সাইটে ফন্ট অসাধারণ আইকন ব্যবহার করে ।

6 টি ছবি-কম্প্রেস করুন এবং নেক্সট-জেনারেল ফরম্যাট ব্যবহার করুন

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

  • কিছু ওয়েব সার্ভারে আপলোড করার সময় ছবি সংকুচিত করার বিকল্প থাকে। আপনার হোস্টিং কোম্পানির সাথে চেক করুন যে তারা এই উদ্দেশ্যে কোন টুল অফার করে কিনা।
  • অন্যথায়, গুণমান না হারিয়ে আপনার চিত্রের আকার কমাতে ইমেজ কম্প্রেশন সরঞ্জাম ব্যবহার করুন ।
  • উপরন্তু, আপনি ইমেজ ফরম্যাটকে JPEG-2000 বা JPEG XR এ রূপান্তর করতে পারেন। সাধারণত, ভিপিএস সার্ভারে ওয়েবপ ফরম্যাটে ইমেজ সার্ভার করার একটি বিকল্প থাকে যা আপনি আপনার হোস্টিং কোম্পানির সাথে নিশ্চিত করতে পারেন। এই ক্ষেত্রে, আপনার কোন রূপান্তরের প্রয়োজন নেই কারণ এটি স্বয়ংক্রিয়ভাবে প্রতিটি ছবির জন্য সার্ভার সাইড থেকে ঘটবে। ওয়েবপ, জেপিইজি -২০০০ বা জেপিইজি এক্সআর-এ ইমেজ ব্যবহার করা আপনাকে গুগল পেজস্পিড ইনসাইটস টুল -এ নেক্সট- জেনারেশন ফর্ম্যাটের ইমেজ ঠিক করতে সাহায্য করবে।

7 সমালোচনামূলক CSS ব্যবহার করুন

যখন আপনার সাইট জুড়ে একই শিরোলেখ বিভাগ থাকে, তখন লোডিং গতি উন্নত করার একটি সহজ উপায় রয়েছে। হেডারে সম্পূর্ণ CSS ফাইল লোড করার পরিবর্তে, আপনি শুধুমাত্র ব্রাউজার উইন্ডোতে পৃষ্ঠা লোড হলে দৃশ্যমান হেডার বিভাগের জন্য CSS ব্যবহার করতে পারেন। এটিকে সমালোচনামূলক CSS বলা হয় যা আপনি তৃতীয় পক্ষের সরঞ্জামগুলি থেকে তৈরি করতে পারেন।

  • গুরুত্বপূর্ণ CSS জেনারেটর টুলে যান এবং আপনার ওয়েবসাইটের URL প্রদান করুন।
  • সমালোচনামূলক CSS তৈরি করুন এবং বিষয়বস্তু অনুলিপি করুন।
  • আপনার এইচটিএমএল সাইটের হেডার বিভাগের ভিতরে… ট্যাগের মধ্যে কপি করা স্টাইলগুলি পৃষ্ঠা করুন।
  • রেন্ডার ব্লকিং CSS ইস্যু এড়াতে আপনি প্রধান স্টাইলশীটকে ফুটার বিভাগে পিছিয়ে দিতে পারেন।

স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পেজ লোডিং স্পিড কিভাবে উন্নত করা যায়?

গুরুত্বপূর্ণ CSS জেনারেটর

চূড়ান্ত শব্দ

উল্লিখিত হিসাবে, আপনার স্ট্যাটিক এইচটিএমএল ওয়েবসাইটের পৃষ্ঠা লোডিং গতি ব্রাউজারে ভাঁজ এলাকার উপরে রেন্ডার করার উপর নির্ভর করে। আপনি গুগল পেজস্পিড ইনসাইটস টুলে দেখানো বেশিরভাগ সমস্যা এবং সুযোগগুলি ঠিক করতে হেডার বিভাগে CSS এবং স্ক্রিপ্টগুলি হ্রাস করতে পারেন। সেরা বিকল্প হল সিডিএন ব্যবহার করা এবং হেডার বিভাগে তৃতীয় পক্ষের সামগ্রী এড়িয়ে চলা।

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত