Next.js SSR vs CSR: ಉತ್ತಮ Lighthouse ಸ್ಕೋರ್‌ಗಳಿಗಾಗಿ Core Web Vitals ಅನ್ನು ಹೇಗೆ ಸರಿಪಡಿಸುವುದು

ಮೂಲ ವೆಬ್ ವೈಟಲ್ಸ್: ಹೇಗೆ Next.js SSR Lighthouse ಸ್ಕೋರ್‌ಗಳನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ

ಕಳೆದ ಎಂಟು ವರ್ಷಗಳಿಂದ React ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇನೆ. ಮೊದಲ ಐದು ವರ್ಷ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರ್ಡ್ (CSR) ಆ್ಯಪ್‌ಗಳನ್ನು ಶಿಪ್ ಮಾಡಿದೆ. ನನ್ನ ಲೋಕಲ್ ಮಷೀನ್‌ನಲ್ಲಿ ಅವು ವೇಗವಾಗಿ ಕಾಣುತ್ತಿದ್ದವು. ಆದರೆ ನೈಜ ಜಗತ್ತಿನಲ್ಲಿ ಅವು ನಿಧಾನವಾಗಿದ್ದವು.

Then Google 2021ರಲ್ಲಿ Core Web Vitals ಶ್ರೇಯಾಂಕ ಅಂಶಗಳಾಗುತ್ತವೆ ಎಂದು ಘೋಷಿಸಲಾಯಿತು. ನನ್ನ Lighthouse ಸ್ಕೋರ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿದ್ದು ನೆನಪಿದೆ. ಅವು ಭಯಾನಕವಾಗಿದ್ದವು. LCP 4 ಸೆಕೆಂಡುಗಳಿಗಿಂತ ಹೆಚ್ಚಿತ್ತು. CLS ಹೆಚ್ಚಿತ್ತು. JavaScript ಬಂಡಲ್‌ಗಳು ಉಬ್ಬಿದ್ದವು.

ನಾನು Next.js ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಗೆ ಬದಲಾಯಿಸಿದೆ. ಅದು ಎಲ್ಲವನ್ನೂ ಬದಲಾಯಿಸಿತು.

ಈ ಬ್ಲಾಗ್ ಸಿದ್ಧಾಂತವಲ್ಲ. ನಾನು ಇದನ್ನು ಇ-ಕಾಮರ್ಸ್, SaaS ಮತ್ತು ಮಾರ್ಕೆಟಿಂಗ್ ಪುಟಗಳಿಗೆ ಉತ್ಪಾದನಾ ಸೈಟ್‌ಗಳಲ್ಲಿ ಬಳಸಿದ್ದೇನೆ. ನಿಖರ ಮೆಟ್ರಿಕ್‌ಗಳು, ಹೋಲಿಕೆ ಕೋಷ್ಟಕ ಮತ್ತು ತಪ್ಪಿಸಲು ಕೆಲವು ತಪ್ಪುಗಳನ್ನು ನಾನು ತೋರಿಸುತ್ತೇನೆ.

ಮೂಲಭೂತಗಳಿಂದ ಶುರು ಮಾಡೋಣ.

ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಸ್ ಎಂದರೇನು?

ಮೂಲ ವೆಬ್ ವೈಟಲ್ಸ್ ಎಂದರೆ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಅಳೆಯಲು 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 ಘಟಕ. ಇದು ಚಿತ್ರಗಳನ್ನು ಸೋಮಾರಿಯಾಗಿ-ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಸರಿಯಾದ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು WebP ನಂತಹ ಆಧುನಿಕ ಸ್ವರೂಪಗಳನ್ನು ಬಳಸುತ್ತದೆ.

Next.js ತಂಡದ ಅಧ್ಯಯನ (2022) SSR ಜೊತೆಗೆ ಚಿತ್ರ ಆಪ್ಟಿಮೈಸೇಶನ್ ಬಳಸುವ ಪುಟಗಳು ಸರಾಸರಿ LCP ಅನ್ನು 50% ಕ್ಕಿಂತ ಹೆಚ್ಚು ಕಡಿಮೆ ಮಾಡಿದೆ ಎಂದು ತೋರಿಸಿದೆ.

ಸುಧಾರಿತ ಫಸ್ಟ್ ಇನ್‌ಪುಟ್ ಡಿಲೇ (FID)

SSR ಪರಸ್ಪರ ಕ್ರಿಯೆಗೆ ಮೊದಲು ಚಲಾಯಿಸಬೇಕಾದ JavaScript ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಸರ್ವರ್ ಪರಸ್ಪರ ಕ್ರಿಯಾತ್ಮಕ HTML ಕಳುಹಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಜೋಡಿಸಬೇಕಷ್ಟೇ.

Next.js ಪುಟದಲ್ಲಿ ನಾನು FID ಅನ್ನು 32ms ಎಂದು ಅಳೆದಿದ್ದೇನೆ. 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 ಬಳಸಿ, ಅಥವಾ ಹೆಚ್ಚಾಗಿ ಬದಲಾಗದ ಪುಟಗಳಿಗೆ ಇನ್‌ಕ್ರಿಮೆಂಟಲ್ ಸ್ಟ್ಯಾಟಿಕ್ ರಿಜನರೇಶನ್ (ISR) ಗೆ ಬದಲಾಯಿಸಿ.

ತಪ್ಪು 2: ನಿಧಾನ API ಕರೆಗಳಿಂದ ರೆಂಡರ್ ತಡೆಯುವುದು

ನಿಮ್ಮ ಬಾಹ್ಯ API ಎರಡು ಸೆಕೆಂಡು ತೆಗೆದುಕೊಂಡರೆ, ನಿಮ್ಮ TTFB ನರಳುತ್ತದೆ. ಬಳಕೆದಾರ ಖಾಲಿ ಪುಟ ನೋಡುತ್ತಾರೆ.

Fix: Next.js ಸ್ಟ್ರೀಮಿಂಗ್ ಬಳಸಿ HTML ಅನ್ನು ಸ್ಟ್ರೀಮ್ ಮಾಡಿ, ಅಥವಾ ಇದನ್ನು ಬಳಸಿ loading ಸ್ಥಿತಿಗಳು. ಇನ್ನೂ ಉತ್ತಮ, API ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸರ್ವರ್‌ನಲ್ಲಿ ಕ್ಯಾಶ್ ಮಾಡಿ.

ತಪ್ಪು 3: ಕ್ಷೇತ್ರದಲ್ಲಿ ಅಳೆಯದಿರುವುದು

ನಿಮ್ಮ ಲೋಕಲ್ ಲ್ಯಾಬ್‌ನಲ್ಲಿನ Lighthouse ದಾರಿತಪ್ಪಿಸಬಹುದು. ನೈಜ ಬಳಕೆದಾರರು ಬೇರೆ ಬೇರೆ ನೆಟ್‌ವರ್ಕ್ ವೇಗಗಳನ್ನು ಹೊಂದಿರುತ್ತಾರೆ.

Fix: Chrome ಬಳಕೆದಾರ ಅನುಭವ ವರದಿ (CrUX) ಅಥವಾ SpeedCurve ನಂತಹ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಪ್ರಯೋಗಾಲಯ ಮತ್ತು ಫೀಲ್ಡ್ ದತ್ತಾಂಶವನ್ನು ಹೋಲಿಸಿ.

ತಪ್ಪು 4: SSR ಅನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದು

ಪ್ರತಿ ಪುಟಕ್ಕೆ SSR ಅಗತ್ಯವಿಲ್ಲ. ಮಾರ್ಕೆಟಿಂಗ್ ಪುಟಗಳು, ಬ್ಲಾಗ್‌ಗಳು ಮತ್ತು ಉತ್ಪನ್ನ ಪುಟಗಳು ಹೆಚ್ಚು ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ. ಆದರೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಆ್ಯಪ್ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್‌ನೊಂದಿಗೆ ಉತ್ತಮವಾಗಿರಬಹುದು.

Fix: ಪ್ರತಿ ಮಾರ್ಗವನ್ನು ಲೆಕ್ಕಪರಿಶೋಧಿಸಿ. ಸ್ಥಿರ ಉತ್ಪಾದನೆಯನ್ನು ಬಳಸಿ (getStaticProps ) ಪ್ರತಿ ಬಳಕೆದಾರರಿಗೆ ಬದಲಾಗದ ಪುಟಗಳಿಗಾಗಿ.

ಮೊದಲು ರೆಂಡರಿಂಗ್ ಸರಿಪಡಿಸಿ, ನಂತರ ಅಳೆಯಿರಿ

ನಾವು ಇದನ್ನು ಹೇಗೆ ಪರಿಶೀಲಿಸಿದೆವು (ಸೆಪ್ಟೆಂಬರ್ 2026): ನಾವು ಸೆಪ್ಟೆಂಬರ್ 2026ರಲ್ಲಿ ಕ್ಲೈಂಟ್ ನಿರ್ಮಾಣಗಳ ಮೇಲೆ Lighthouse SSR-vs-CSR ಹೋಲಿಕೆಗಳನ್ನು ಮರುಚಲಾಯಿಸಿದೆವು; ಉಲ್ಲೇಖಿಸಲಾದ 56% LCP ಮತ್ತು 71% FID ಸುಧಾರಣೆಗಳು ಈ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ತಿಳಿಸಲಾದ ಪ್ರಕರಣ ಸಂಖ್ಯೆಗಳಾಗಿವೆ.

ರೆಂಡರಿಂಗ್ SEO ಹೋರಾಟದ ಅರ್ಧ. ಈ ಮಾರ್ಗದರ್ಶಿಗಳು ಉಳಿದ ಅರ್ಧವನ್ನು ಒಳಗೊಂಡಿವೆ:

• Next.js SEO: SSR vs ISR vs SSG — ಪ್ರತಿ ಮಾರ್ಗಕ್ಕೆ ಸರಿಯಾದ ರೆಂಡರಿಂಗ್ ಮೋಡ್ ಆಯ್ಕೆಮಾಡಿ
• ವೆಬ್‌ಸೈಟ್ SEO ವಿಶ್ಲೇಷಕ ವಾಕ್‌ಥ್ರೂ — ನಿಮ್ಮ ಉಳಿದ ತಾಂತ್ರಿಕ SEO ಅನ್ನು ಆಡಿಟ್ ಮಾಡಿ
• Googlebot ಗಾಗಿ ಲಾಗ್ ಫೈಲ್ ವಿಶ್ಲೇಷಣೆ — ಕ್ರಾಲರ್‌ಗಳು ನಿಮ್ಮ ವೇಗದ ಪುಟಗಳನ್ನು ನೋಡುತ್ತವೆ ಎಂದು ಪರಿಶೀಲಿಸಿ

FAQ

1. Next.js SSR ಯಾವಾಗಲೂ Lighthouse ಸ್ಕೋರ್‌ಗಳನ್ನು ಸುಧಾರಿಸುತ್ತದೆಯೇ?

ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಲ್ಲ. ನೀವು ಸರ್ವರ್‌ನಲ್ಲಿ ನಿಧಾನ ಡೇಟಾವನ್ನು ಫೆಚ್ ಮಾಡಿದರೆ ಅಥವಾ ಚಿತ್ರ ಆಪ್ಟಿಮೈಸೇಶನ್ ಬಿಟ್ಟುಬಿಟ್ಟರೆ, ನಿಮಗೆ ಇನ್ನೂ ಕಳಪೆ ಸ್ಕೋರ್‌ಗಳು ಸಿಗುತ್ತವೆ. ಆದರೆ ಸರಿಯಾಗಿ ಬಳಸಿದಾಗ, SSR ಬಹುತೇಕ ಯಾವಾಗಲೂ CSR ಅನ್ನು ಮೀರಿಸುತ್ತದೆ. ಸರಾಸರಿ 44-ಪಾಯಿಂಟ್ Lighthouse ಹೆಚ್ಚಳವನ್ನು ನಾನು ನೋಡಿದ್ದೇನೆ.

2. ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯಕ್ಕೆ (TTFB) Next.js SSR ನಿಧಾನವೇ?

ಹೌದು, ಕೆಲವೊಮ್ಮೆ. ಸರ್ವರ್ ಅದನ್ನು ಕಳುಹಿಸುವ ಮೊದಲು 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 ಆಡಿಟ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ವರದಿ ಪಡೆಯಿರಿ →