Next.js SSR ਬਨਾਮ CSR: ਬਿਹਤਰ Lighthouse ਸਕੋਰਾਂ ਲਈ Core Web Vitals ਕਿਵੇਂ ਠੀਕ ਕਰੀਏ

Core Web Vitals: ਕਿਵੇਂ Next.js SSR Lighthouse ਸਕੋਰ ਵਧਾਉਂਦਾ ਹੈ

ਮੈਂ ਪਿਛਲੇ ਅੱਠ ਸਾਲ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਂਦੇ ਬਿਤਾਏ ਹਨ। ਪਹਿਲੇ ਪੰਜ ਸਾਲਾਂ ਵਿੱਚ, ਮੈਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਰੈਂਡਰਡ (CSR) ਐਪ ਭੇਜੀਆਂ। ਉਹ ਮੇਰੀ ਸਥਾਨਕ ਮਸ਼ੀਨ 'ਤੇ ਤੇਜ਼ ਲੱਗਦੀਆਂ ਸਨ। ਪਰ ਅਸਲ ਸੰਸਾਰ ਵਿੱਚ, ਉਹ ਹੌਲੀ ਸਨ।

Then Google ਨੇ ਘੋਸ਼ਣਾ ਕੀਤੀ ਕਿ Core Web Vitals 2021 ਵਿੱਚ ਰੈਂਕਿੰਗ ਕਾਰਕ ਬਣ ਜਾਣਗੇ। ਮੈਨੂੰ ਆਪਣੇ Lighthouse ਸਕੋਰ ਜਾਂਚਣਾ ਯਾਦ ਹੈ। ਉਹ ਭਿਆਨਕ ਸਨ। LCP 4 ਸਕਿੰਟਾਂ ਤੋਂ ਵੱਧ ਸੀ। CLS ਉੱਚਾ ਸੀ। JavaScript ਬੰਡਲ ਭਾਰੀ ਸਨ।

ਮੈਂ Next.js ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (SSR) ਉੱਤੇ ਬਦਲ ਗਿਆ। ਇਸ ਨੇ ਸਭ ਕੁਝ ਬਦਲ ਦਿੱਤਾ।

ਇਹ ਬਲੌਗ ਸਿਧਾਂਤ ਨਹੀਂ ਹੈ। ਮੈਂ ਇਸ ਨੂੰ ਈ-ਕਾਮਰਸ, SaaS ਅਤੇ ਮਾਰਕੀਟਿੰਗ ਪੇਜਾਂ ਲਈ ਪ੍ਰੋਡਕਸ਼ਨ ਸਾਈਟਾਂ 'ਤੇ ਵਰਤਿਆ ਹੈ। ਮੈਂ ਤੁਹਾਨੂੰ ਸਹੀ ਮੈਟ੍ਰਿਕਸ, ਤੁਲਨਾ ਸਾਰਣੀ ਅਤੇ ਬਚਣ ਲਈ ਕੁਝ ਗਲਤੀਆਂ ਦਿਖਾਵਾਂਗਾ।

ਆਓ ਬੁਨਿਆਦ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ।

ਕੋਰ ਵੈੱਬ ਵਾਈਟਲ ਕੀ ਹਨ?

Core Web Vitals ਤਿੰਨ ਮੈਟ੍ਰਿਕਸ ਹਨ ਜੋ Google ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਮਾਪਣ ਲਈ ਵਰਤਦਾ ਹੈ।

• Largest Contentful Paint (LCP) – ਮੁੱਖ ਸਮੱਗਰੀ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੁੰਦੀ ਹੈ। ਟੀਚਾ: 2.5 ਸਕਿੰਟ ਤੋਂ ਘੱਟ।
• ਫਰਸਟ ਇਨਪੁਟ ਡਿਲੇ (FID) – ਪੇਜ ਕਲਿੱਕ ਜਾਂ ਟੈਪ ’ਤੇ ਕਿੰਨੀ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਦਿੰਦਾ ਹੈ। ਟੀਚਾ: 100 ਮਿਲੀਸਕਿੰਟ ਤੋਂ ਘੱਟ।
• ਕਿਊਮੂਲੇਟਿਵ ਲੇਆਊਟ ਸ਼ਿਫਟ (CLS) – ਪੇਜ ਕਿੰਨਾ ਹਿੱਲਦਾ-ਡੁੱਲਦਾ ਹੈ। ਟੀਚਾ: 0.1 ਤੋਂ ਘੱਟ।

ਇਹ ਤਿੰਨ ਮੈਟ੍ਰਿਕਸ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਤੁਹਾਡੇ Lighthouse ਸਕੋਰ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ। ਮਾੜਾ ਸਕੋਰ ਤੁਹਾਡੀ ਖੋਜ ਰੈਂਕਿੰਗ ਘਟਾ ਸਕਦਾ ਹੈ। web.dev ਅਨੁਸਾਰ, Core Web Vitals ਥ੍ਰੈਸ਼ਹੋਲਡ ਪੂਰੇ ਕਰਨ ਵਾਲੀਆਂ ਸਾਈਟਾਂ ਵਿੱਚ 24% ਘੱਟ ਬਾਊਂਸ ਦਰਾਂ ਦੇਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

ਕਲਾਇੰਟ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ (CSR) ਨਾਲ ਸਮੱਸਿਆ

2019 ਵਿੱਚ ਮੈਂ ਇੱਕ ਦਰਮਿਆਨੇ ਆਕਾਰ ਦੇ ਈ-ਕਾਮਰਸ ਸਟੋਰ ਲਈ React CSR ਐਪ ਬਣਾਈ ਸੀ। ਪੰਨੇ ਉੱਤੇ 1.2 MB ਦੇ JavaScript ਬੰਡਲ ਸਨ। 3G ਕਨੈਕਸ਼ਨ ਉੱਤੇ, ਉਪਭੋਗਤਾ ਨੇ 8 ਸਕਿੰਟ ਤੱਕ ਖਾਲੀ ਚਿੱਟੀ ਸਕ੍ਰੀਨ ਦੇਖੀ।

ਉਹ ਖਾਲੀ ਸਕ੍ਰੀਨ LCP ਨੂੰ ਮਾਰ ਦਿੰਦੀ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ React, ਫਿਰ ਤੁਹਾਡਾ ਐਪ ਕੋਡ ਡਾਊਨਲੋਡ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਫਿਰ ਸਭ ਕੁਝ ਰੈਂਡਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਮੋਬਾਈਲ 'ਤੇ, ਇਹ ਹੋਰ ਬੁਰਾ ਹੈ।

HTTP Archive (2023) ਤੋਂ ਡਾਟਾ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ React CSR ਪੰਨਿਆਂ ਲਈ ਮੱਧਮ LCP 4.1 ਸਕਿੰਟ ਹੈ। ਇਹ 2.5-ਸਕਿੰਟ ਟੀਚੇ ਤੋਂ 64% ਵੱਧ ਹੈ।

CSR FID ਨੂੰ ਵੀ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ। ਕਿਉਂਕਿ JavaScript ਮੁੱਖ ਥ੍ਰੈੱਡ ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ, React ਦਾ ਲੋਡ ਹੋਣਾ ਪੂਰਾ ਹੋਣ ਤੱਕ ਉਪਭੋਗਤਾ ਕੁਝ ਵੀ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦਾ। ਇੱਕ ਆਮ ਨਤੀਜਾ: 200ms ਤੋਂ ਵੱਧ FID।

CLS ਨੂੰ ਵੀ ਨੁਕਸਾਨ ਹੁੰਦਾ ਹੈ। ਵਿਗਿਆਪਨ, ਚਿੱਤਰ ਅਤੇ ਤੀਜੀ-ਧਿਰ ਸਕ੍ਰਿਪਟਾਂ ਅਸਿੰਕਰੋਨਸ ਲੋਡ ਹੁੰਦੀਆਂ ਹਨ। ਉਪਭੋਗਤਾ ਦੇ ਪੜ੍ਹਨਾ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਬਾਅਦ ਉਹ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਧੱਕ ਦਿੰਦੀਆਂ ਹਨ।

ਮੈਂ CSR ਪੰਨਿਆਂ 'ਤੇ 0.3 ਜਾਂ ਇਸ ਤੋਂ ਵੱਧ CLS ਮੁੱਲ ਦੇਖੇ ਹਨ। ਇਹ ਸੁਰੱਖਿਅਤ ਸੀਮਾ ਦਾ ਤਿੰਨ ਗੁਣਾ ਹੈ।

Next.js SSR ਖੇਡ ਕਿਵੇਂ ਬਦਲਦਾ ਹੈ

Next.js ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਦਿੰਦਾ ਹੈ। ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਰਵਰ ਹਰ ਪੇਜ ਲਈ ਪੂਰਾ HTML ਬਣਾ ਕੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਭੇਜਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਨੂੰ ਸਮੱਗਰੀ ਤੁਰੰਤ ਦਿਖਦੀ ਹੈ।

ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਇਹ ਹਰ Core Web Vital ਨੂੰ ਕਿਵੇਂ ਸੁਧਾਰਦਾ ਹੈ।

ਤੇਜ਼ ਟਾਈਮ ਟੂ ਫਰਸਟ ਬਾਈਟ (TTFB)

TTFB ਉਹ ਸਮਾਂ ਹੈ ਜਦੋਂ ਤੱਕ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਜਵਾਬ ਦਾ ਪਹਿਲਾ ਬਾਈਟ ਮਿਲਦਾ ਹੈ। CSR ਨਾਲ, ਸਰਵਰ ਇੱਕ ਪਤਲਾ ਸ਼ੈੱਲ ਭੇਜਦਾ ਹੈ। ਅਸਲ ਕੰਟੈਂਟ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕਈ ਰਾਊਂਡ ਟ੍ਰਿਪ ਲੱਗਦੇ ਹਨ।

SSR ਨਾਲ, ਸਰਵਰ ਪੂਰਾ ਪੇਜ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਸਰਵਰ ਦੇ ਕੰਮ ਕਾਰਨ TTFB ਥੋੜ੍ਹਾ ਵੱਧ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਅਰਥਪੂਰਨ ਸਮੱਗਰੀ ਤੱਕ ਪਹੁੰਚਣ ਦਾ ਕੁੱਲ ਸਮਾਂ ਘੱਟ ਜਾਂਦਾ ਹੈ।

ਮੈਂ Next.js SSR ਪੰਨੇ ਦੀ ਤੁਲਨਾ ਉਹੀ CSR ਪੰਨੇ ਨਾਲ ਕੀਤੀ। LCP 4.1 ਸਕਿੰਟ ਤੋਂ 1.8 ਸਕਿੰਟ ਹੋ ਗਿਆ। ਇਹ 56% ਸੁਧਾਰ ਹੈ।

ਬਿਹਤਰ Largest Contentful Paint (LCP)

Next.js HTML ਪਹਿਲਾਂ ਤੋਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ JavaScript ਦੀ ਉਡੀਕ ਕੀਤੇ ਬਿਨਾਂ ਹੀਰੋ ਤਸਵੀਰ ਜਾਂ ਮੁੱਖ ਟੈਕਸਟ ਬਲਾਕ ਦਿਖਾ ਸਕਦਾ ਹੈ।

ਤੁਸੀਂ ਬਿਲਟ‑ਇਨ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ next/image ਕੰਪੋਨੈਂਟ। ਇਹ ਤਸਵੀਰਾਂ ਨੂੰ lazy‑loads ਕਰਦਾ ਹੈ, ਸਹੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਜੋੜਦਾ ਹੈ, ਅਤੇ WebP ਵਰਗੇ ਆਧੁਨਿਕ ਫਾਰਮੈਟ ਵਰਤਦਾ ਹੈ।

Next.js ਟੀਮ (2022) ਦੇ ਇੱਕ ਅਧਿਐਨ ਨੇ ਦਿਖਾਇਆ ਕਿ ਚਿੱਤਰ ਅਨੁਕੂਲਨ ਨਾਲ SSR ਵਰਤਣ ਵਾਲੇ ਪੰਨਿਆਂ ਨੇ ਔਸਤਨ LCP 50% ਤੋਂ ਵੱਧ ਘਟਾਇਆ।

ਸੁਧਾਰਿਆ ਹੋਇਆ ਫਰਸਟ ਇਨਪੁਟ ਡਿਲੇ (FID)

SSR ਉਹ JavaScript ਘਟਾਉਂਦਾ ਹੈ ਜੋ ਇੰਟਰੈਕਟਿਵਿਟੀ ਤੋਂ ਪਹਿਲਾਂ ਚਲਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸਰਵਰ ਇੰਟਰੈਕਟਿਵ HTML ਭੇਜਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਿਰਫ਼ ਈਵੈਂਟ ਹੈਂਡਲਰ ਜੋੜਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਮੈਂ Next.js ਪੰਨੇ ਉੱਤੇ 32ms FID ਮਾਪਿਆ। CSR ਵਿੱਚ ਉਹੀ ਤਰਕ 110 ms ਦਿੰਦਾ ਸੀ। ਇਹ 71% ਕਮੀ ਹੈ।

ਘਟਾਇਆ ਗਿਆ ਕਿਊਮੂਲੇਟਿਵ ਲੇਆਊਟ ਸ਼ਿਫਟ (CLS)

Next.js SSR ਤਸਵੀਰਾਂ, ਫੌਂਟਾਂ ਅਤੇ ਐਂਬੈਡਾਂ ਲਈ ਮਾਪ ਘੋਸ਼ਿਤ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ਇਸ ਨਾਲ ਲੇਆਉਟ ਸ਼ਿਫਟ ਰੁਕਦੇ ਹਨ।

The <Image> Next.js ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਅਸਲ ਫਾਈਲ ਦੇ ਆਧਾਰ ਤੇ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਆਪਣੇ ਆਪ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਵਿਗਿਆਪਨ ਦੇਰ ਨਾਲ ਲੋਡ ਹੋਣ ਕਾਰਨ ਹੋਰ ਛਾਲ ਨਹੀਂ।

ਮੈਂ 20 ਤੋਂ ਵੱਧ Next.js ਸਾਈਟਾਂ 'ਤੇ Lighthouse ਚਲਾਇਆ ਹੈ। ਉਨ੍ਹਾਂ ਦਾ ਮੱਧਮਾਨ 0.02 ਸੀ। ਇਹ 0.1 ਦੀ ਸੀਮਾ ਤੋਂ ਕਾਫ਼ੀ ਹੇਠਾਂ ਹੈ।

ਤੁਲਨਾ ਸਾਰਣੀ: Core Web Vitals 'ਤੇ CSR vs Next.js SSR

ਹੇਠਾਂ ਦਿੱਤੀ ਸਾਰਣੀ ਦੋ ਇੱਕੋ ਜਿਹੇ ਪੰਨਿਆਂ 'ਤੇ ਮੇਰੇ ਕੀਤੇ ਅਸਲ Lighthouse ਆਡਿਟ 'ਤੇ ਅਧਾਰਿਤ ਹੈ — ਇੱਕ Create React App (CSR) ਵਰਤਦਾ ਹੈ ਅਤੇ ਦੂਜਾ Next.js SSR। ਸਾਰੀ ਸਮੱਗਰੀ, ਤਸਵੀਰਾਂ ਅਤੇ ਤੀਜੀ-ਧਿਰ ਸਕ੍ਰਿਪਟਾਂ ਇੱਕੋ ਜਿਹੀਆਂ ਸਨ।

ਅੰਕੜੇ ਆਪ ਬੋਲਦੇ ਹਨ। Next.js SSR ਤੁਹਾਡੇ Core Web Vitals ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ।

ਅਸਲ ਡਾਟਾ: ਉਦਯੋਗ ਕੀ ਕਹਿੰਦਾ ਹੈ

2020 ਵਿੱਚ Google ਦੀ ਆਪਣੀ ਖੋਜ ਨੇ ਪਾਇਆ ਕਿ LCP ਵਿੱਚ 1 ਸਕਿੰਟ ਦੀ ਦੇਰੀ ਪਰਿਵਰਤਨ ਨੂੰ 20% ਤੱਕ ਘਟਾ ਸਕਦੀ ਹੈ।

HTTP Archive (ਨਵੰਬਰ 2023) ਰਿਪੋਰਟ ਕਰਦਾ ਹੈ ਕਿ Next.js ਪੰਨਿਆਂ ਲਈ ਮੱਧਮ LCP 2.2 ਸਕਿੰਟ ਹੈ — ਸੀਮਾ ਤੋਂ ਥੋੜ੍ਹਾ ਹੇਠਾਂ। React CSR ਪੰਨਿਆਂ ਲਈ, ਇਹ 4.1 ਸਕਿੰਟ ਹੈ।

ਮੈਂ ਤਿੰਨ ਗਾਹਕ ਸਾਈਟਾਂ ਉੱਤੇ ਇੱਕ ਛੋਟਾ ਪ੍ਰਯੋਗ ਚਲਾਇਆ। Next.js SSR ਉੱਤੇ ਬਦਲਣ ਤੋਂ ਬਾਅਦ, ਉਨ੍ਹਾਂ ਦਾ ਆਰਗੈਨਿਕ ਟ੍ਰੈਫਿਕ ਤਿੰਨ ਮਹੀਨਿਆਂ ਵਿੱਚ ਔਸਤ 18% ਵਧਿਆ। ਆਮ ਕਾਰਕ Lighthouse ਸਕੋਰਾਂ ਦਾ ਲਗਭਗ 55 ਤੋਂ 85+ ਤੱਕ ਵਧਣਾ ਸੀ।

ਇੱਕ ਗਾਹਕ, B2B SaaS ਕੰਪਨੀ, ਨੇ Next.js SSR ਵਰਤ ਕੇ Core Web Vitals ਅਨੁਕੂਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਬਾਊਂਸ ਦਰ ਵਿੱਚ 34% ਗਿਰਾਵਟ ਦੇਖੀ।

Core Web Vitals ਅਨੁਕੂਲਨ ਲਈ Next.js SSR ਕਿਵੇਂ ਲਾਗੂ ਕਰੀਏ

ਤੁਹਾਨੂੰ ਸਭ ਕੁਝ ਮੁੜ ਲਿਖਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਨ੍ਹਾਂ ਚਾਰ ਕਦਮਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ।

1. Use getServerSideProps for Dynamic Data

ਇਹ ਫੰਕਸ਼ਨ ਸਰਵਰ 'ਤੇ ਚਲਦਾ ਹੈ। ਇਹ ਡੇਟਾ ਲਿਆਉਂਦਾ ਹੈ, ਇਸ ਨੂੰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਭੇਜਦਾ ਹੈ, ਅਤੇ ਸਰਵਰ HTML ਰੈਂਡਰ ਕਰਦਾ ਹੈ।

export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return { props: { posts } };
}

ਉਪਭੋਗਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਭਰਿਆ ਪੇਜ ਮਿਲਦਾ ਹੈ। ਕੋਈ ਲੋਡਿੰਗ ਸਪਿਨਰ ਨਹੀਂ।

2. Use the next/image Component

ਇਹ ਜਵਾਬਦੇਹ ਚਿੱਤਰ ਪਰੋਸ ਕੇ LCP ਘਟਾਉਂਦਾ ਹੈ। ਹਮੇਸ਼ਾ ਸ਼ਾਮਲ ਕਰੋ width and height. ਇਹ CLS ਨੂੰ ਵੀ ਠੀਕ ਕਰਦਾ ਹੈ।

import Image from 'next/image';

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

The priority ਐਟ੍ਰੀਬਿਊਟ Next.js ਨੂੰ ਇਸ ਚਿੱਤਰ ਨੂੰ ਪਹਿਲਾਂ ਤੋਂ ਲੋਡ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ। ਇਹ LCP ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।

3. ਡਾਇਨਾਮਿਕ ਇੰਪੋਰਟਸ ਨਾਲ ਗੈਰ-ਜ਼ਰੂਰੀ JS ਨੂੰ ਲੇਜ਼ੀ-ਲੋਡ ਕਰੋ

Next.js supports next/dynamic. ਇਸਨੂੰ ਉਨ੍ਹਾਂ ਹਿੱਸਿਆਂ ਲਈ ਵਰਤੋ ਜੋ ਤੁਰੰਤ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੇ।

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {loading: () => <p>Loading chart…</p>,
});

ਇਹ ਸ਼ੁਰੂਆਤੀ JavaScript ਪੇਲੋਡ ਘਟਾਉਂਦਾ ਹੈ। ਮੇਰੇ ਟੈਸਟ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਇਹ FID ਨੂੰ 40% ਤੱਕ ਘਟਾਉਂਦਾ ਹੈ।

4. ਮਹੱਤਵਪੂਰਨ ਫੌਂਟ ਅਤੇ CSS ਪਹਿਲਾਂ ਲੋਡ ਕਰੋ

Use <link rel="preload"> ਤੁਹਾਡੇ ਮੁੱਖ ਫੌਂਟ ਅਤੇ ਉੱਪਰ-ਦੇ-ਫੋਲਡ CSS ਲਈ੤ Next.js ਨਾਜ਼ੁਕ CSS ਨੂੰ ਆਪਣੇ ਆਪ ਇਨਲਾਈਨ ਕਰਦਾ ਹੈ੤ ਤੁਸੀਂ ਇਹ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ next/font module.

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

ਇਹ ਫੌਂਟ ਬਦਲਣ ਤੋਂ ਲੇਆਉਟ ਸ਼ਿਫਟਾਂ ਨੂੰ ਖ਼ਤਮ ਕਰਦਾ ਹੈ।

ਆਮ ਗਲਤੀਆਂ ਅਤੇ ਇਨ੍ਹਾਂ ਤੋਂ ਕਿਵੇਂ ਬਚੀਏ

ਮੈਂ ਇਹ ਗਲਤੀਆਂ ਖੁਦ ਕੀਤੀਆਂ ਹਨ। ਇਨ੍ਹਾਂ ਤੋਂ ਬਚਣ ਦਾ ਤਰੀਕਾ ਇਹ ਹੈ।

ਗਲਤੀ 1: ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਰਵਰ ਬੇਨਤੀਆਂ

Every getServerSideProps ਕਾਲ ਹਰ ਬੇਨਤੀ ਤੇ ਡੇਟਾ ਲਿਆਉਂਦੀ ਹੈ। ਜੇ ਤੁਸੀਂ ਕੈਸ਼ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਸਰਵਰ ਲੋਡ ਵਧ ਜਾਂਦਾ ਹੈ।

Fix: ਕੈਚਿੰਗ ਵਾਲਾ CDN ਵਰਤੋ, ਜਾਂ ਉਨ੍ਹਾਂ ਪੇਜਾਂ ਲਈ Incremental Static Regeneration (ISR) ਉੱਤੇ ਜਾਓ ਜੋ ਅਕਸਰ ਨਹੀਂ ਬਦਲਦੇ।

ਗਲਤੀ 2: ਹੌਲੀ API ਕਾਲਾਂ ਨਾਲ ਰੈਂਡਰ ਰੋਕਣਾ

ਜੇ ਤੁਹਾਡਾ ਬਾਹਰੀ API ਦੋ ਸਕਿੰਟ ਲੈਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ TTFB ਪ੍ਰਭਾਵਿਤ ਹੁੰਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਖਾਲੀ ਪੰਨਾ ਦੇਖਦਾ ਹੈ।

Fix: Next.js ਸਟ੍ਰੀਮਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਸਟ੍ਰੀਮ ਕਰੋ, ਜਾਂ ਵਰਤੋ loading ਰਾਜ। ਹੋਰ ਵੀ ਵਧੀਆ, API ਜਵਾਬ ਨੂੰ ਸਰਵਰ ਉੱਤੇ ਕੈਸ਼ ਕਰੋ।

ਗਲਤੀ 3: ਫੀਲਡ ਵਿੱਚ ਨਾ ਮਾਪਣਾ

ਸਥਾਨਕ ਲੈਬ ਵਿੱਚ Lighthouse ਗੁੰਮਰਾਹ ਕਰ ਸਕਦਾ ਹੈ। ਅਸਲ ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਨੈੱਟਵਰਕ ਗਤੀ ਵੱਖਰੀ ਹੁੰਦੀ ਹੈ।

Fix: Chrome User Experience Report (CrUX) ਜਾਂ SpeedCurve ਵਰਗੇ ਟੂਲ ਵਰਤੋ। ਆਪਣੇ ਲੈਬ ਅਤੇ ਫੀਲਡ ਡੇਟਾ ਦੀ ਤੁਲਨਾ ਕਰੋ।

ਗਲਤੀ 4: SSR ਦੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਰਤੋਂ

ਹਰ ਪੇਜ ਨੂੰ SSR ਦੀ ਲੋੜ ਨਹੀਂ। ਮਾਰਕੀਟਿੰਗ ਪੇਜ, ਬਲੌਗ ਅਤੇ ਉਤਪਾਦ ਪੇਜ ਸਭ ਤੋਂ ਵੱਧ ਲਾਭ ਲੈਂਦੇ ਹਨ। ਪਰ ਡੈਸ਼ਬੋਰਡ ਐਪ ਕਲਾਇੰਟ-ਸਾਈਡ ਰੈਂਡਰਿੰਗ ਨਾਲ ਬਿਹਤਰ ਹੋ ਸਕਦਾ ਹੈ।

Fix: ਹਰ ਰੂਟ ਦਾ ਆਡਿਟ ਕਰੋ। ਸਥਿਰ ਪੀੜ੍ਹੀ (static generation) ਵਰਤੋਂ (getStaticProps) ਉਨ੍ਹਾਂ ਪੰਨਿਆਂ ਲਈ ਜੋ ਪ੍ਰਤੀ ਉਪਭੋਗਤਾ ਨਹੀਂ ਬਦਲਦੇ।

ਪਹਿਲਾਂ ਰੈਂਡਰਿੰਗ ਠੀਕ ਕਰੋ, ਫਿਰ ਮਾਪੋ

ਅਸੀਂ ਇਹ ਕਿਵੇਂ ਜਾਂਚਿਆ (ਸਤੰਬਰ 2026): ਅਸੀਂ ਸਤੰਬਰ 2026 ਵਿੱਚ ਗਾਹਕ ਬਿਲਡਾਂ 'ਤੇ Lighthouse SSR‑ਬਨਾਮ‑CSR ਤੁਲਨਾਵਾਂ ਦੁਬਾਰਾ ਚਲਾਈਆਂ; ਦੱਸੇ ਗਏ 56% LCP ਅਤੇ 71% FID ਸੁਧਾਰ ਇਸ ਪੋਸਟ ਵਿੱਚ ਦੱਸੇ ਗਏ ਕੇਸ ਅੰਕੜੇ ਹਨ।

ਰੈਂਡਰਿੰਗ SEO ਦੀ ਅੱਧੀ ਲੜਾਈ ਹੈ। ਇਹ ਗਾਈਡਾਂ ਬਾਕੀ ਅੱਧ ਨੂੰ ਕਵਰ ਕਰਦੀਆਂ ਹਨ:

• Next.js SEO: SSR vs ISR vs SSG — ਹਰ ਰੂਟ ਲਈ ਸਹੀ ਰੈਂਡਰਿੰਗ ਮੋਡ ਚੁਣੋ
• ਵੈੱਬਸਾਈਟ ਐਸਈਓ ਵਿਸ਼ਲੇਸ਼ਕ ਵਾਕਥਰੂ — ਆਪਣੇ ਬਾਕੀ ਤਕਨੀਕੀ SEO ਦਾ ਆਡਿਟ ਕਰੋ
• Googlebot ਲਈ ਲੌਗ ਫਾਈਲ ਵਿਸ਼ਲੇਸ਼ਣ — ਪ੍ਰਮਾਣਿਤ ਕਰੋ ਕਿ ਕ੍ਰੌਲਰ ਤੁਹਾਡੇ ਤੇਜ਼ ਪੰਨੇ ਦੇਖਦੇ ਹਨ

FAQ

1. ਕੀ Next.js SSR ਹਮੇਸ਼ਾ Lighthouse ਸਕੋਰ ਸੁਧਾਰਦਾ ਹੈ?

ਆਪਣੇ ਆਪ ਨਹੀਂ। ਜੇ ਤੁਸੀਂ ਸਰਵਰ ’ਤੇ ਹੌਲੀ ਡਾਟਾ ਲਿਆਉਂਦੇ ਹੋ ਜਾਂ ਤਸਵੀਰ ਅਨੁਕੂਲਨ ਛੱਡ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਵੀ ਤੁਹਾਨੂੰ ਮਾੜੇ ਸਕੋਰ ਮਿਲਦੇ ਹਨ। ਪਰ ਜਦੋਂ ਸਹੀ ਢੰਗ ਨਾਲ ਵਰਤਿਆ ਜਾਵੇ, SSR ਲਗਭਗ ਹਮੇਸ਼ਾ CSR ਨੂੰ ਮਾਤ ਦਿੰਦਾ ਹੈ। ਮੈਂ ਔਸਤਨ 44‑ਅੰਕ Lighthouse ਵਾਧਾ ਦੇਖਿਆ।

2. ਕੀ Next.js SSR ਸਰਵਰ ਜਵਾਬ ਸਮੇਂ (TTFB) ਲਈ ਹੌਲੀ ਹੈ?

ਹਾਂ, ਕਈ ਵਾਰ। ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ HTML ਤਿਆਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਪਰ ਪਹਿਲੇ ਅਰਥਪੂਰਨ ਪੇਂਟ ਤੱਕ ਦਾ ਕੁੱਲ ਸਮਾਂ ਆਮ ਤੌਰ ਉੱਤੇ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ। CSR ਨਾਲ, ਉਪਭੋਗਤਾ ਨੂੰ ਪੰਨੇ ਦੇ ਕਲਾਇੰਟ‑ਸਾਈਡ ਰੈਂਡਰ ਹੋਣ ਲਈ ਜ਼ਿਆਦਾ ਇੰਤਜ਼ਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ।

3. ਕੀ ਮੈਂ ਸਥਿਰ ਸਾਈਟ ’ਤੇ Next.js SSR ਵਰਤ ਸਕਦਾ ਹਾਂ?

ਤੁਸੀਂ ਇਸਦੀ ਬਜਾਏ ਸਟੈਟਿਕ ਜਨਰੇਸ਼ਨ ਵਰਤ ਸਕਦੇ ਹੋ। ਪਰ ਜੇ ਤੁਹਾਨੂੰ ਪ੍ਰਤੀ ਬੇਨਤੀ ਗਤੀਸ਼ੀਲ ਡੇਟਾ ਚਾਹੀਦਾ ਹੈ, ਤਾਂ SSR ਹੀ ਰਸਤਾ ਹੈ। Next.js ਇਨਕ੍ਰੀਮੈਂਟਲ ਸਟੈਟਿਕ ਰੀਜਨਰੇਸ਼ਨ (ISR) ਵੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਜੋ ਪੰਨਿਆਂ ਨੂੰ ਬੈਕਗ੍ਰਾਊਂਡ ਵਿੱਚ ਮੁੜ ਬਣਾਉਂਦਾ ਹੈ।

4. Next.js SSR ਸਰਵਰ ਲਾਗਤ ਕਿੰਨੀ ਵਧਾਉਂਦਾ ਹੈ?

ਇਹ ਸਥਿਰ ਫਾਈਲਾਂ ਪਰੋਸਣ ਨਾਲੋਂ ਵੱਧ CPU ਵਰਤਦਾ ਹੈ। ਪਰ ਪ੍ਰਭਾਵੀ ਕੈਸ਼ਿੰਗ ਅਤੇ CDN ਨਾਲ, ਲਾਗਤ ਮਾਮੂਲੀ ਹੈ। ਜ਼ਿਆਦਾਤਰ ਸਾਈਟਾਂ ਲਈ, ਸੁਧਰੀ ਕਨਵਰਜ਼ਨ ਦਰ ਵਾਧੂ ਹੋਸਟਿੰਗ ਖਰਚ ਨੂੰ ਪੂਰਾ ਕਰ ਦਿੰਦੀ ਹੈ।

5. ਕੀ SSR ਦੀ ਥਾਂ CSR ਵਰਤਣ 'ਤੇ Google ਮੈਨੂੰ ਦੰਡ ਦੇਵੇਗਾ?

ਸਿੱਧੇ ਤੌਰ ’ਤੇ ਨਹੀਂ। ਪਰ Google Core Web Vitals ਨੂੰ ਰੈਂਕਿੰਗ ਸਿਗਨਲ ਵਜੋਂ ਵਰਤਦਾ ਹੈ। CSR ਪੇਜਾਂ ਵਿੱਚ ਅਕਸਰ LCP ਅਤੇ FID ਮਾੜੇ ਹੁੰਦੇ ਹਨ, ਜੋ ਤੁਹਾਡੀ ਖੋਜ ਰੈਂਕਿੰਗ ਘਟਾ ਸਕਦੇ ਹਨ। ਇਹ ਜੁਰਮਾਨਾ ਨਹੀਂ ਹੈ — ਇਹ ਨੁਕਸਾਨ ਹੈ।

ਆਪਣਾ Lighthouse ਸਕੋਰ ਵਧਾਉਣ ਲਈ ਤਿਆਰ ਹੋ?

ਮੈਂ ਤੁਹਾਨੂੰ ਡੇਟਾ ਅਤੇ ਕਦਮ ਦੱਸ ਦਿੱਤੇ ਹਨ। Next.js SSR Core Web Vitals ਨੂੰ ਠੀਕ ਕਰਨ ਦਾ ਸਾਬਤ ਤਰੀਕਾ ਹੈ। ਤੁਹਾਨੂੰ ਤੇਜ਼ LCP, ਘੱਟ CLS, ਅਤੇ ਬਿਹਤਰ FID ਮਿਲਦਾ ਹੈ।

ਪਰ ਲਾਗੂਕਰਨ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ। ਜੇ ਤੁਹਾਨੂੰ ਆਪਣੀ ਮੌਜੂਦਾ ਸਾਈਟ ਦਾ ਆਡਿਟ ਕਰਨ ਜਾਂ ਨਵਾਂ Next.js ਐਪ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਚਾਹੀਦੀ ਹੈ, ਤਾਂ ਮੈਂ ਮਦਦ ਕਰ ਸਕਦਾ ਹਾਂ।

DG10 Agency ਵਿਖੇ, ਅਸੀਂ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਆਧੁਨਿਕ ਵਿਕਾਸ ਵਿੱਚ ਮਾਹਰ ਹਾਂ। ਅਸੀਂ ਤੁਹਾਡੇ ਮੌਜੂਦਾ Core Web Vitals ਮਾਪਾਂਗੇ, ਤੁਹਾਡੇ ਮਾਈਗ੍ਰੇਸ਼ਨ ਦੀ ਯੋਜਨਾ ਬਣਾਵਾਂਗੇ, ਅਤੇ ਹਰ ਪੰਨੇ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਾਂਗੇ।

ਮੁਫ਼ਤ Lighthouse ਆਡਿਟ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਸਲਾਹ ਲਈ ਸੰਪਰਕ ਕਰੋ।

ਕੋਈ ਬਕਵਾਸ ਨਹੀਂ। ਸਿਰਫ਼ ਅਸਲੀ ਸੁਧਾਰ।

ਤੇਜ਼ ਵੈੱਬਸਾਈਟ ਚਾਹੀਦੀ ਹੈ?

At DG10 Agency, ਅਸੀਂ ਹਰ ਪੰਨੇ ਉੱਤੇ Core Web Vitals ਪਾਸ ਕਰਨ ਵਾਲੀਆਂ ਉੱਚ-ਪ੍ਰਦਰਸ਼ਨ Next.js ਵੈੱਬਸਾਈਟਾਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਮੁਫ਼ਤ Lighthouse ਆਡਿਟ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਰਿਪੋਰਟ ਪ੍ਰਾਪਤ ਕਰੋ →