Second.js SSR vs CSR: How to Fix Core web Vitals for Better Lighthouse Scores

Core web Vitals: HowNext.jsSSR Boosts Lighthouse Scores

لقد قضيت السنوات الثماني الماضية بناء تطبيقات رد الفعل. بالنسبة للخمسة الأولى، قمت بشحن تطبيقات العملاء لقد نظروا بسرعة على آلتي المحلية ولكن في العالم الحقيقي، سحبوا.

ثمGoogleوأعلن عن أن الفلاحين الأساسيين على الشبكة العالمية سوف يصبحون من العوامل الرئيسية في عام 2021. أَتذكّرُ أَنْ أُدقّقَ درجاتَ لايتهاوس. لقد كانوا فظيعين كان برنامج (لوس أنجلوس) أكثر من 4 ثواني كانت (سي إل إس) عالية حزمة (جافاسكريبت) كانت متضخمة

تحولت إلى التالين. ج. لقد غير كل شيء

هذه المدونة ليست نظرية وقد استخدمت هذا في مواقع الإنتاج في مجال التجارة الإلكترونية، و " ساسا " ، و " صفحات التسويق " . وسأريكم القياسات الدقيقة، وجدول المقارنة، وبعض الأخطاء التي يتعين تجنبها.

فلنبدأ بالأساس.

ما هي كرور ويب فيتال؟

الفينات الأساسية على الشبكة هي ثلاثة مقاييس تستخدمها غوغل لقياس خبرة المستعملين.

• أكبر لوحة مضمونية-كم سرعة تحميل المحتوى الرئيسي الهدف: أقل من 2.5 ثانية.
• First Input Delay (FID)-كم سرعة استجابة الصفحة للنقرة أو النقر الهدف: أقل من 100 ميل ثانية.
• Cumulative Layout Shift (CLS)-كم تقفز الصفحة الهدف: أقل من 0.1.

هذه القياسات الثلاثة تؤثر مباشرة على سجلك النتيجة السيئة يمكن أن تسقط ترتيب بحثك According to web.dev, sites that meet Core web Vitals thresholds see 24% lower bounce rates.

The Problem with Client-Side Rendering (CSR)

لقد بنيتُ تطبيقاً لـ (ريدك سي آر) من أجل مخزن تجاري إلكتروني في عام 2019 وكان في الصفحة حزمة من جافاسكريبت من 1.2 ميغا بي. على اتصال 3G، رأى المستخدم شاشة بيضاء فارغة ل 8 ثواني.

تلك الشاشة الفارغة تقتل (لوس أنجلس) المصفف يجب أن يحمّل ردّ الفعل، ثمّ رمز تطبيقك، ثمّ يُصدر كلّ شيء. على الهاتف، هذا أسوأ.

وتبين البيانات المستمدة من محفوظات شركة HTTP (2023) أن متوسط عدد صفحات " LCP " هو 4.1 ثانية. وهذا أعلى بنسبة 64 في المائة من الهدف الثاني البالغ 2.5.

CSR also hurts FID. ونظرا لأن جافاسكريبت يحجب الخيط الرئيسي، لا يمكن للمستعمل أن يضغط أي شيء حتى ينهي رد الفعل التحميل. A common result: FID over 200ms.

CLS تعاني أيضا. الإعلانات والصور وكتابات الأطراف الثالثة تُحمّل بغرابة. يضغطون على المحتوى بعد أن يبدأ المستخدم في القراءة

لقد رأيت قيماً لـ 0.3 أو أكثر في صفحات CSR. وهــذا يضاعف العتبة الآمنة ثلاث مرات.

كم التالي تغيير اللعبة

التالي.. وهذا يعني أن الخادم يولد كامل HTML لكل صفحة ويرسله إلى المصفح. المستعمل يرى المحتوى في الحال

وها هي الطريقة التي يحسن بها كل فرد من ضحايا الشبكة الأساسية.

أسرع وقت للمرحلة الأولى

TTFB is the time until the browser receives the first byte of the response. مع (سي إس آر) الخادم يرسل قذيفة رقيقة يتطلب عدة رحلات ذهابا وإيابا للحصول على المحتوى الحقيقي.

مع إس إس إس إس إس إس إس، الخادم يُجمّعُ الصفحةَ الكاملةَ. The TTFB might be slightly higher because of server work, but the total time to meaningful content drops.

لقد اختبرت صفحة "إس إس إس إس إس إس إس إس إس" التالية ضد نفس الصفحة وذهبت الفينول الخماسي الكلور من 4.1 ثانية إلى 1.8 ثانية. وهذا تحسن بنسبة ٥٦ في المائة.

أضخم لوحة مضمونية أفضل

التالي.. يمكن للمتصفح أن يرسم صورة البطل أو النسيج الرئيسي بدون انتظار جافاسكريبت

يمكنك أيضاً استخدام البنينnext/imageالعنصر. إنه يحمّل صوراً كسولة، ويضيف شعراً مستعاراً وطولاً، ويستخدم أشكالاً حديثة مثل (ويب ب).

وأظهرت دراسة أجراها الفريق التالي (js) (2022) أن الصفحات التي تستخدم نظام SSR مع التصوير الأمثل تقلل من الفينول الخماسي الكلور بأكثر من 50 في المائة في المتوسط.

تحسين معدل تأخير المدخلات الأولى

SSR reduces the JavaScript that needs to run before interactionivity. ويرسل الخادم رسالة تفاعلية من طراز HTML. المصفف يحتاج فقط لربط المعالجين الحدث.

قَسّمتُ في آي دي على a صفحة تالية. ج في 32ms. ونفس المنطق في CSR أعطى 110 ms. وهذا تخفيض بنسبة ٧١ في المائة.

طائرة عمودية مخفضة

تالياً، (جي إس إس إس آر) أجبرك على إعلان الأبعاد للصور، واللافتات، والخنادق. وهذا يحول دون التحولات في التصميم.

The<الصورة>المكوّن التالي: (ي) يُحدّد تلقائياً الاستعارة والطول استناداً إلى الملف الفعلي. لا مزيد من القفز لأن الإعلانات تتأخر

وقد أدير لايتهاوس على أكثر من ٢٠ موقعا تاليا. وسطهم كان 0.02 وهذا يقل كثيرا عن عتبة ٠,١.

Comparison Table: CSR vs next.js SSR on Core web Vitals

وفيما يلي جدول يستند إلى مراجعات حقيقية لحسابات لايتهاوس أجريتها على صفحتين متطابقتين - صفحة واحدة باستخدام نظام " كريت " وصفحة واحدة تستخدم الرقم التالي. وكانت جميع المحتويات والصور والنصوص المقدمة من أطراف ثالثة هي نفسها.

الأرقام تتحدث عن نفسها تالياً، (جي إس إس إس إس إس إل) يُحوّلُ قِبَلَكَ الأساسيّة على الإنترنت.

بيانات حقيقية: ما تقوله الصناعة

وخلصت بحوث غوغل نفسها التي أجريت في عام 2020 إلى أن التأخير الثاني في برنامج المقارنات المحلية يمكن أن يقلل من التحويلات بنسبة 20 في المائة.

ويفيد محفوظات شركة HTTP (تشرين الثاني/نوفمبر 2023) بأن متوسط عدد صفحات " LCP " التالية(js) هو 2.2 ثانية دون الحد الأدنى. وبالنسبة لصفحات رد الفعل، فإن هذه هي ٤,١ ثانية.

أجريت تجربة صغيرة على ثلاثة مواقع عملاء After shifting to next.js SSR, their organic traffic increased by an average of 18% over three months. وكان العامل المشترك ارتفاعا في درجات لايتهاوس من نحو 55 إلى 85+.

واحد من العملاء، شركة B2B SaaS، شهد انخفاضا بنسبة 34٪ في معدل المكافأة بعد أن أفضّلنا الفينات الرئيسية على الشبكة باستخدام التالي.js SSR.

How to implement next.js SSR for Core web Vitals Optimization

ولا تحتاج إلى إعادة كتابة كل شيء. ابدأ بهذه الخطوات الأربع

1- الاستخدامالحصول على ServerSide Propsالبيانات الدينامية

هذه المهمة تعمل على الخادم يجلب البيانات، وينقلها إلى المكوّن، والخادم يُصدر الـ HTML.

Export async function getServerSideProps(context) {
بيانات سرية = في انتظار (https://api.example.com/posts')؛
(ب) وظائف ثابتة = تنتظر البيانات.
Return { props: { posts } } }
?

المستعمل يحصل على صفحة كاملة لا تحميل العمود الفقري.

2- استخدامnext/imageالعنصر

وهو يقلل من الفينول الخماسي الكلور بتقديم صور مستجيبة. دائماالشعر المستعاروالارتفاع. هذا أيضاً يصلح (سي إل إس)

صورة واردة من "نيكست/إيمج"

<Image src="/hero.jpg"width={1200}طول = {600}"الهيروين"الأولوية/>

Theالأولويةالمُساهمة تُخبرُ التّاليَةَ بأنّ يَحْملُ هذه الصورةِ. هذا يساعد شرطة لوس أنجلوس

3. Lazy-Load Non-Critical JS with Dynamic Imports

التاليnext/dynamic. إستخدمه للمكونات التي ليست مرئية على الفور

"ديناميات الاستيراد من "الخارج/الدينامية

كنيسة ثقيلة>(الواردات)> <p>مخطط الشحن...</p>,
});

This reduces the initial JavaScript payload. فحوصاتي تظهر أنها تقطع الـ (فيدي) بنسبة تصل إلى 40%

4. Preload Critical Fonts and CSS

الاستخدام<الرابط (رِل) = "محمّل">لخطك الرئيسي وفوق العين التالي.. يمكنك أيضا استخدامnext/fontوحدة

الاستيراد {الإنترنت } من "النفاذ/الفوغل"
"مُتَصَلّق مُتَعَدّد"

هذا يزيل التصميم من المبادلات

الأخطاء المشتركة وكيفية تجنبها

وقد ارتكبت هذه الأخطاء بنفسي. وها هي طريقة تخطيها.

Mistake 1: Too many Server requests

كل شيءالحصول على ServerSide Propsاستدعاء بيانات الجنين على كل طلب. وإذا لم تكن مخبأ، فإن حمولة الخادم ترتفع.

فيكس:Use a CDN with caching, or shift to Incremental Static Regeneration (ISR) for pages that don’t change often.

Mistake 2: Blocking Render with slow API calls

إن استغرقت مُذكّراتكِ الخارجية ثانيتين، فإنّ مُكافحتكِ تعاني. المستعمل يرى صفحة فارغة

فيكس:Stream the HTML using next.js streaming, or useالتحميلالولايات أفضل من ذلك، جهزي ردّ (آبي) على الخادم.

سوء التصرف 3: ليس القياس في الميدان

(ليتهاوس) في مختبرك المحلي قد يكون مضللاً فالمستعملون الحقيقيون لديهم سرعة مختلفة في الشبكة.

فيكس:Use the Chrome User Experience Report (CrUX) or tools like SpeedCurve. قارن بيانات المختبر والميدان

Mistake 4: Overusing SSR

ليس كل صفحة تحتاج إلى إس آر. وتستفيد معظم صفحات التسويق والمدونات وصفحة المنتجات. لكن تطبيق لوحة التحكم قد يكون أفضل مع جعل جانب العملاء.

فيكس:مراجعة كل طريق استخدام جيل ثابتالنوبات الثابتة)لصفحات لا تتغير لكل مستخدم.

الـ "إكس درينغ" أولاً ثم التدبير

فكيف تحققنا من ذلك (أيلول/سبتمبر 2026): نعيد تنظيم مقارنات شركة لايتهاوس SSR-vs-CSR على بناءات العملاء في أيلول/سبتمبر 2026؛ أما الـ 56 في المائة من الفينول الخماسي الكلور و 71 في المائة من التحسينات التي أجريت على وكالة التحقيقات الفدرالية فهي أرقام الحالات الواردة في هذه الوظيفة.

الرنين هو نصف معركة (سي أو) وتغطي هذه الأدلة النصف الآخر:

• التالي: SSR vs ISR ضد SSG- اختيار طريقة الصنع الصحيحة لكل طريق
• موقع على شبكة الإنترنت- مراجعة بقية مكتبك التقني
• إجراء تحليل لملف سجل جوغلبوت- التحقق من الزحف رؤية صفحاتك السريعة

FAQ

1 - هل تالياً - ج - إس إس إس إس إس إس يُحسّنُ دائماً درجاتَ لايتهاوس؟

ليس تلقائياً إذا حصلت على بيانات بطيئة على الخادم أو تخطي الصورة المثلى، كنت لا تزال تحصل على درجات سيئة. ولكن عندما تستخدم بشكل صحيح، SSR تقريبا دائما يضرب CSR. لقد رأيت زيادة بنسبة 44 نقطة في (ليتهاوس) في المتوسط

2. Is next.js SSR slower for server response time (TTFB)?

أجل، أحياناً الخادم يجب أن يولد "إتش تي إل" قبل إرساله لكن الوقت الإجمالي للطلاء المؤثر الأول هو عادة أسرع مع الـ (سي آر) المُستخدم ينتظر وقتاً أطول للصفحة ليجعل العميل بجانبه

3 - هل يمكنني أن أستخدم الـ "جي إس إس إس إس إس إس إس إس إس إس" في موقع ثابت؟

يمكنك استخدام جيل ثابت بدلا من ذلك. ولكن إذا كنت بحاجة إلى بيانات دينامية لكل طلب، SSR هو الطريق. التالي: (ي) يقدم أيضاً تجديداً ثابتاً، يعيد بناء صفحات في الخلفية.

4. How much does next.js SSR increase server cost?

إنه يستعمل أكثر من وحدة العناية المركزة من تقديم ملفات ثابتة ولكن مع التلاعب الفعّال و CDN، التكلفة هامشية. وبالنسبة لمعظم المواقع، فإن معدل التحويل المحسن أكثر مما يغطي نفقات الاستضافة الإضافية.

5. Will Google penalize me if I use CSR instead of SSR?

ليس مباشرة لكن (جوجل) يستخدم (كوري ويب فيتالز) كإشارة في كثير من الأحيان تكون صفحات الأشعة السينية أسوأ من الفينول الخماسي الكلور والفيدرال، التي يمكن أن تقلل من ترتيب البحث الخاص بك. وهو ليس عقابا - بل هو وضع غير مؤات.

هل أنت مستعد لـ (بوست) ؟

وقد سرت إليكم من خلال البيانات والخطوات. التالي (جي إس إس إس إس إس إس إس إس إس إس) هو طريقة مُثبتة لإصلاح (كوري ويب فيتالز) تُصبحُ أسرعَ LCP، أسفل CLS، وأفضل FID.

ولكن مسائل التنفيذ. إذا كنت بحاجة للمساعدة في مراجعة موقعك الحالي أو بناء تطبيق جديد

وفي وكالة DG10، نتخصص في الأداء على شبكة الإنترنت والتنمية الحديثة. وسنقوم بقياس عدد الضحايا الحاليين للشبكة الأساسية، ونخطط لهجرتكم، ونحقق أقصى قدر ممكن من كل صفحة.

الحصول على اتصال من أجل الحصول على المراجعة الذاتية مجانا والتشاور الأداء.

لا نزيف فقط تحسينات حقيقية

تحتاج إلى موقع سريع؟

AtDG10 Agencyنحن نبني موقعاً عالي الأداء التالي على شبكة الإنترنت التي تمرر (كوري ويب) على كل صفحةالحصول على مراجعة حسابات أداء مجانية→