Next.js 15 पूर्ण-स्टैक वेब ऐप · पाठ

Core Web Vitals और निगरानी

Q: क्या “Core Web Vitals और निगरानी” पाठ निःशुल्क है?

हाँ — Next.js 15 पूर्ण-स्टैक वेब ऐप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Core Web Vitals और निगरानी” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Q: क्या Next.js 15 पूर्ण-स्टैक वेब ऐप शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

Q: “Core Web Vitals और निगरानी” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

Q: क्या मैं इस Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

LCP, INP और CLS को समझें, वास्तविक उपयोगकर्ताओं में उनका मापन करें और अपने प्रोडक्शन ऐप को तेज़ बनाए रखने के लिए Next.js सुविधाओं तथा अवलोकनीयता टूल का उपयोग करें।

पाठ 4, कुल 4 में से13 चरण

Core Web Vitals और निगरानी, CoddyKit पर Next.js 15 पूर्ण-स्टैक वेब ऐप का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Next.js 15 पूर्ण-स्टैक वेब ऐप सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Core Web Vitals क्या हैं

Core Web Vitals, Google के उपयोगकर्ता-केंद्रित प्रदर्शन मेट्रिक्स हैं, जो UX और SEO रैंकिंग दोनों को प्रभावित करते हैं। वर्तमान तीन मेट्रिक्स हैं:

LCP — Largest Contentful Paint (लोड होने की गति)
INP — Interaction to Next Paint (प्रतिक्रियाशीलता)
CLS — Cumulative Layout Shift (दृश्य स्थिरता)

LCP: लोड होने की गति

LCP यह मापता है कि सबसे बड़ा दिखाई देने वाला तत्व (अक्सर hero image या heading) रेंडर होना कब पूरा करता है। लक्ष्य 2.5 सेकंड से कम रखें। image optimization, प्राथमिकता वाले लोडिंग और server rendering से इसे बेहतर बनाएँ।

import Image from 'next/image';

<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

INP: प्रतिक्रियाशीलता

INP ने FID का स्थान लिया है। यह पूरे विज़िट के दौरान उपयोगकर्ता की interactions की latency मापता है। लक्ष्य 200ms से कम रखें। मुख्य thread पर लंबे JavaScript tasks INP को सबसे अधिक नुकसान पहुँचाते हैं।

CLS: दृश्य स्थिरता

CLS अप्रत्याशित layout shifts को मापता है। लक्ष्य 0.1 से कम रखें। images पर हमेशा स्पष्ट width और height निर्धारित करें तथा ads और embeds के लिए स्थान सुरक्षित रखें।

लैब बनाम वास्तविक डेटा

Lab data नियंत्रित रन (Lighthouse) से आता है। Field data (RUM) वास्तविक उपकरणों पर वास्तविक उपयोगकर्ताओं से आता है। रैंकिंग के लिए field data वास्तविक आधार है; debugging के लिए lab data बहुत उपयोगी है।

useReportWebVitals से रिपोर्ट करना

Next.js वास्तविक उपयोगकर्ता मेट्रिक्स एकत्र करने और उन्हें अपने analytics endpoint पर भेजने के लिए useReportWebVitals उपलब्ध कराता है।

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function Vitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

मेट्रिक का वर्गीकरण

किसी मेट्रिक के मान को good / needs-improvement / poor में वर्गीकृत करें। यह शुद्ध तर्क है, जिसे आप कहीं भी चला सकते हैं।

function rateLCP(ms) {
  if (ms <= 2500) return 'good';
  if (ms <= 4000) return 'needs-improvement';
  return 'poor';
}
console.log(rateLCP(1800));
console.log(rateLCP(3200));
console.log(rateLCP(5000));

मुख्य thread का काम घटाना

INP सुधारने के लिए कम JavaScript भेजें और गैर-महत्वपूर्ण काम को बाद के लिए टालें। भारी क्लाइंट कंपोनेंट को code-split करने के लिए dynamic imports का उपयोग करें।

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });

सर्वर कंपोनेंट मदद करते हैं

React Server Components सर्वर पर रेंडर होते हैं और ट्री के उस हिस्से के लिए क्लाइंट को कोई JavaScript नहीं भेजते, जिससे bundle size सीधे घटता है और INP तथा LCP बेहतर होते हैं।

प्रोडक्शन निगरानी टूल

निरंतर observability सेट अप करें:

Vercel Speed Insights — अंतर्निहित RUM के लिए।
Vercel Analytics — ट्रैफ़िक के लिए।
Sentry / OpenTelemetry — त्रुटियों और traces के लिए।

जब कोई मेट्रिक अपनी सीमा से नीचे चला जाए, तो alert भेजें।

प्रदर्शन बजट निर्धारित करना

बजट निर्धारित करें (जैसे LCP < 2.5s, JS < 170KB) और उन्हें CI में लागू करें, ताकि उपयोगकर्ताओं तक पहुँचने से पहले ही regressions के कारण build विफल हो जाए।

त्वरित जाँच

कौन-सा Core Web Vital उपयोगकर्ता interactions की प्रतिक्रियाशीलता मापता है और उसका लक्ष्य क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने उत्पादन को तेज़ बनाए रखना सीखा:

अपने लक्ष्यों के साथ LCP (लोड होने की गति), INP (प्रतिक्रियाशीलता) और CLS (स्थिरता)।
प्रयोगशाला और वास्तविक उपयोग के डेटा के बीच अंतर।
useReportWebVitals के साथ RUM एकत्र करना।
कोड विभाजन और सर्वर कंपोनेंट्स के साथ JS कम करना, साथ ही निगरानी और बजट निर्धारित करना।

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Core Web Vitals और निगरानी” पाठ निःशुल्क है?

हाँ — Next.js 15 पूर्ण-स्टैक वेब ऐप अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Core Web Vitals और निगरानी” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Next.js 15 पूर्ण-स्टैक वेब ऐप पाठ्यक्रम में कुल 4 पाठ शामिल हैं।