আপনার React অথবা Next.js অ্যাপটি প্রতিটি রিলিজের সাথে ধীরে ধীরে ধীর হয়ে গেছে। বান্ডেল বড় হয়েছে, ছবিগুলি সম্পূর্ণ আকারে পাঠানো হয়, একটি তৃতীয় পক্ষের স্ক্রিপ্ট প্রথম পেইন্টকে ব্লক করে, প্রতিটি কীস্ট্রোকে একটি তালিকা পুনরায় রেন্ডার হয়। আমি পরিমাপ করি এর মধ্যে কোনটি আসলে আপনার ব্যবহারকারীদের সময় নষ্ট করে, তারপর যেগুলি ঠিক করার মতো সেগুলি ঠিক করি।
আমি আপনার React অথবা Next.js অ্যাপের প্রোফাইল তৈরি করব এবং এটিকে দ্রুততর করব, সংখ্যা সহ
আপনার অ্যাপের একটি পৃষ্ঠায় লাইটহাউস এবং প্রোফাইলার, ফলাফলগুলি উপার্জনের ভিত্তিতে র্যাঙ্ক করা হয়েছে।
- একটি পৃষ্ঠা প্রোফাইল করা হয়েছে, র্যাঙ্ক করা হয়েছে
অডিট, তারপর যে সমাধানগুলি সংখ্যা পরিবর্তন করে, আগে এবং পরে পরিমাপ করা হয়।
- অডিট এবং প্রধান সমাধানগুলি
- সোর্স কোড
5 পর্যন্ত রুট, রেন্ডারিং এবং ক্যাশিং, CI-তে একটি বান্ডেল বাজেট, সম্পূর্ণ তুলনা।
- গভীর পাস, 5 পর্যন্ত রুট
- সোর্স কোড
একটি কাস্টম অফার অনুরোধ করুন
একটি কাস্টম অফারের জন্য লগ ইন করুন
এই Zinner থেকে একটি ব্যক্তিগতকৃত অফার অনুরোধ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা লগ ইন করুন৷
লগ ইন / রেজিস্টার করুনবিক্রয়-পূর্ব প্রশ্ন জিজ্ঞাসা করুন
প্রশ্ন জিজ্ঞাসা করতে লগ ইন করুন
প্ল্যাটফর্ম স্প্যাম কমাতে, প্রাক-বিক্রয় বার্তা শুধুমাত্র লগইন করা ব্যবহারকারীরা পাঠাতে পারবেন।
একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা এই Zinner-কে সরাসরি মেসেজ করতে লগ ইন করুন।
লগ ইন / রেজিস্টার করুনলগ ইন করা প্রয়োজন
এই Zinner-কে মেসেজ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন অথবা লগ ইন করুন।
লগ ইন / রেজিস্টার করুনলগ ইন করা প্রয়োজন
একটি ব্যক্তিগতকৃত অফার অনুরোধ করতে একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করুন বা লগ ইন করুন।
লগ ইন / রেজিস্টার করুনএক নজরে
এই পরিষেবা সম্পর্কে মূল বিবরণ যা আপনাকে সিদ্ধান্ত নিতে সাহায্য করবে। Zinn Hub দ্বারা তৈরি, বিক্রেতা দ্বারা নয়।
মূল্য অবস্থান
Measurement Approach
ফ্রেমওয়ার্ক কভার করা হয়েছে
Metrics Reported
ডেলিভারি পদ্ধতি
আপনি কি পাবেন
সম্পূর্ণ বিবরণ
আপনি যদি মনে করেন যে ধীর পৃষ্ঠাগুলি আপনার সাইনআপ বা অনুসন্ধান ট্র্যাফিকের ক্ষতি করছে এবং আপনি আপনার বর্তমান অ্যাপটি রাখতে চান তবে এটি অর্ডার করুন। React এবং Next.js ইতিমধ্যেই একটি দ্রুত অ্যাপের জন্য প্রয়োজনীয় বেশিরভাগ জিনিস সরবরাহ করে, তাই লাভগুলি স্ট্যাক পরিবর্তন করার পরিবর্তে সেই সরঞ্জামগুলি ভালভাবে ব্যবহার করার মাধ্যমে আসে।
আপনি সংখ্যা পান, বিশেষণ নয়: LCP, CLS, INP এবং প্রতিটি রুটের বান্ডেল আকার, একই থ্রটলড সংযোগে আগে এবং পরে পরিমাপ করা হয়, একটি টেবিলে।
স্টার্টার হল একটি পৃষ্ঠার অডিট: রান, উপার্জনের ভিত্তিতে র্যাঙ্ক করা ফলাফল, কোনো কোড পরিবর্তন করা হয়নি। স্ট্যান্ডার্ড সেই অডিট থেকে শুরু হয় এবং বাকি সময় সেই সংখ্যাগুলি পরিবর্তন করে এমন সমাধানগুলিতে ব্যয় করে। অ্যাডভান্সড 5 পর্যন্ত রুট কভার করে, রেন্ডারিং এবং ক্যাশিং টিউন করে, এবং CI-তে একটি বান্ডেল বাজেট রাখে যাতে পরবর্তী রিলিজ নীরবে কাজটি বাতিল করতে না পারে।
কাজ আপনার রিপোজিটরির একটি শাখায় হয়, কমিট বাই কমিট, প্রতিটি তার কারণ সহ। আপনি না চাইলে আমার দ্বারা কিছুই স্থাপন করা হয় না।
কোনো কল নেই। আমার সাথে দ্বিমত পোষণকারী পরিমাপ সহ সবকিছু লিখিতভাবে।
আপনার প্রজেক্ট সম্পূর্ণ করার ধাপগুলি
1. আপনার ব্যবহারকারীরা আসলে কী পান তা পরিমাপ করুন - আপনার লাইভ পেজগুলিতে লাইটহাউস এবং ধীরগতির পেজগুলিতে একটি থ্রটলড সংযোগে একটি রিঅ্যাক্ট প্রোফাইলার সেশন। LCP, CLS, INP এবং প্রতি রুটে বান্ডেল সাইজ, কিছু স্পর্শ করার আগে লিখে রাখুন।
2. সবচেয়ে বেশি খরচ কীসে হয় তা খুঁজে বের করুন - বান্ডেল এবং নেটওয়ার্ক ওয়াটারফল: কী পাঠানো হয় যা কেউ ব্যবহার করে না, কী প্রথম পেইন্টকে ব্লক করে, কোন কম্পোনেন্টগুলি পুনরায় রেন্ডার হয় এবং কেন। প্রতিটি অনুসন্ধানে মিলিসেকেন্ড বা কিলোবাইটে আনুমানিক সঞ্চয় থাকে।
3. এটি ঠিক করুন, সবচেয়ে বড় লাভ প্রথমে - কোড স্প্লিটিং, ছবি এবং ফন্ট হ্যান্ডলিং, রেন্ডার-ব্লকিং কাজ, যেখানে প্রোফাইলার এটি চায় সেখানে মেমোাইজেশন, ডেটা ফেচিং ক্রিটিক্যাল পাথ থেকে সরানো। প্রতিটি পরিবর্তনের জন্য একটি কমিট, প্রতিটি তার কারণ সহ।
4. আবার পরিমাপ করুন, পাশাপাশি - পরিবর্তিত বিল্ডে একই রান: একটি টেবিলে আগে এবং পরে, প্রতি রুট এবং প্রতি মেট্রিক। যদি একটি পরিবর্তন কিছু খারাপ করে থাকে, তাহলে টেবিলটি তা বলে এবং পরিবর্তনটি ফিরিয়ে নেওয়া হয়।
5. আপনার রিপোজিটরিতে হস্তান্তর - আপনার রিপোতে একটি শাখা বা প্যাচ, রিপোর্ট এবং আমি যা করিনি এবং এর মূল্য কী হবে তার একটি সৎ তালিকা। ডিপ্লয়মেন্ট আপনার হাতেই থাকে।
Zinner গুণমান গ্যারান্টি
প্রতিটি Zinner প্ল্যাটফর্মে যোগদানের আগে পর্যালোচনা এবং অনুমোদিত হয়।
সমস্ত পরিষেবা আমাদের গুণমান নিশ্চিতকরণ প্রতিশ্রুতির দ্বারা সমর্থিত।
আপনার পেমেন্ট সুরক্ষিত থাকে যতক্ষণ না আপনি বিতরণ করা কাজটি অনুমোদন করেন।
প্যাকেজ তুলনা করুন
| ফাংশন | স্টার্টার | স্ট্যান্ডার্ড | উন্নত |
|---|---|---|---|
| ডেলিভারি সময় | 2 দিন | 4 দিন | 8 দিন |
| পুনর্বিবেচনা | 0 | 2 | 3 |
| ব্যাপ্তি | একটি পেজ প্রোফাইল করা হয়েছে, র্যাঙ্ক করা হয়েছে | অডিট এবং প্রধান ফিক্স | গভীর পাস, 5 রুট পর্যন্ত |
| সোর্স কোড | ✕ | ✓ | ✓ |
পোর্টফোলিও
এই Zinn সম্পর্কিত বিক্রেতার কাজের উদাহরণ।
ফর্মলাইন: স্ট্রাইপ সহ Next.js স্টোর
একটি স্টোরফ্রন্ট যেখানে আপনি ক্লিক করতে পারবেন: 16 পোস্টার 4 সংগ্রহে, ফিল্টার এবং অনুসন্ধান যা URL-এ থাকে, একটি কার্ট, হালকা এবং গাঢ় থিম, এবং একটি চেকআউট যা একটি ডেমো অর্ডার বা টেস্ট মোডে একটি বাস্তব স্ট্রাইপ চেকআউট সেশনে শেষ হয়। আমি এটি Next.js স্ট্যাটিক এক্সপোর্ট হিসাবে টাইপস্ক্রিপ্ট সহ Tailwind CSS ব্যবহার করে তৈরি করেছি। কার্ড পেমেন্টগুলি একটি Cloudflare Worker-এর মাধ্যমে যায় যা সার্ভারে কার্টের মূল্য পুনরায় নির্ধারণ করে এবং স্ট্রাইপের ওয়েবহুক স্বাক্ষর যাচাই করে।
Next.js-এ দ্বিভাষিক ব্যক্তিগত সাইট
ইংরেজি এবং রাশিয়ান ভাষায় একটি এক-পৃষ্ঠার ব্যক্তিগত সাইট, যেখানে একটি পরিষেবা বিভাগ এবং আমার ডেমো প্রকল্পগুলির লিঙ্ক রয়েছে। আমি এটি Next.js, React এবং TypeScript ব্যবহার করে একটি স্ট্যাটিক এক্সপোর্ট হিসাবে ডিজাইন এবং তৈরি করেছি, সাধারণ CSS মডিউল এবং কোনো UI ফ্রেমওয়ার্ক ছাড়াই স্টাইল করা হয়েছে। এতে হালকা এবং গাঢ় থিম রয়েছে এবং প্রতিটি ভাষার জন্য একটি সামাজিক পূর্বরূপ চিত্র বিল্ড টাইমে তৈরি করা হয়। GitHub Actions এটি তৈরি করে এবং Bunny CDN-এ স্থাপন করে, যা নিরাপত্তা হেডার যোগ করে এবং www এবং প্লেইন HTTP কে প্রধান HTTPS ঠিকানায় রিডাইরেক্ট করে।
পরিষেবার বিবরণ
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
না, এবং আপনার কোড দেখার আগে যে কেউ এর প্রতিশ্রুতি দেয় তাদের সাথে সতর্ক থাকুন। একটি চেকআউট উইজেট বা একটি বিজ্ঞাপন স্ক্রিপ্ট আমি যাই করি না কেন স্কোরকে সীমিত করতে পারে। অডিট আপনাকে আপনার সর্বোচ্চ সীমা এবং এটি অর্জনের খরচ বলে দেয়।
না। Vite, CRA, Remix বা একটি সাধারণ SPA সবই একই ভাবে প্রোফাইল করে। শুধুমাত্র ফ্রেমওয়ার্ক-নির্দিষ্ট ফিক্সগুলি ভিন্ন: নেক্সট.জেএস রেন্ডারিং মোডের পরিবর্তে রুট-লেভেল স্প্লিটিং এবং ক্যাশিং।
হ্যাঁ। স্ট্যান্ডার্ড একই অডিট দিয়ে শুরু হয় এবং বাকি সময় এটি যা খুঁজে পায় তা ঠিক করতে ব্যয় করে। স্টার্টার এমন দলগুলির জন্য বিদ্যমান যারা নিজেরাই কাজটি করবে এবং কেবল কোথায় খনন করতে হবে তা জানতে চায়।
অডিট তা দেখে: সার্ভার প্রতিক্রিয়া সময় রেন্ডার এবং স্ক্রিপ্ট খরচ থেকে আলাদাভাবে দেখায়। API বা কোয়েরিগুলির প্রোফাইলিং হল অ্যাড-অন, Node, Express, NestJS বা Rust-এ।
রিপোজিটরিতে পড়ার অ্যাক্সেস, অথবা সোর্সের একটি আর্কাইভ, প্লাস পেজের URL। স্ট্যান্ডার্ড এবং অ্যাডভান্সড-এ আমি ফিক্সগুলি একটি শাখায় পুশ করি, তাই আমার একটি তৈরি করার অনুমতি প্রয়োজন। যদি আপনি এটি দিতে না চান, আমি পরিবর্তে একটি প্যাচ পাঠাই। আমার কখনই ডিপ্লয় অ্যাক্সেসের প্রয়োজন হয় না।
আপনার লাইভ প্রোডাকশন পেজগুলিতে ডিফল্টরূপে, যাতে সংখ্যাগুলি আপনার ব্যবহারকারীরা যা পান তার সাথে মেলে। যদি পেজটি একটি লগইনের পিছনে থাকে বা এখনও ডিপ্লয় করা না হয়, একটি স্টেজিং লিঙ্ক, একটি টেস্ট অ্যাকাউন্ট বা স্থানীয়ভাবে এটি চালানোর ধাপগুলি সবই কাজ করে, এবং রিপোর্টে বলা হয় সংখ্যাগুলি কোথা থেকে এসেছে।
গ্রাহক পর্যালোচনা
আমাদের গ্রাহকরা এই Zinn সম্পর্কে কী বলেন তা দেখুন
বিভাগসমূহ
Zinner নীতিসমূহ
সম্পর্কিত Zinns
