ถัดไป.js SSR vs CSSR: วิธีการแก้ไขเว็บหลักที่สําคัญสําหรับคะแนนแสงดีขึ้น

เว็บ หลัก: ทํา อย่าง ไรNext.jsคะแนน SSR

ผม ใช้ เวลา แปด ปี ใน การ สร้าง ปฏิรูป. สําหรับห้าครั้งแรก ผมส่งแอพลูกความด้านที่แปลแล้ว (CSR) พวกเขาดูรวดเร็วในเครื่องท้องถิ่นของฉัน แต่ในโลกแห่งความจริง พวกเขาลาก

งั้นกูเกิ้ล2021 ประกาศว่า Core web Cources จะกลายเป็นปัจจัยการจัดอันดับในปี ค.ศ. ฉันจําได้ว่าเช็คคะแนนไลท์เฮาส์ พวกเขาแย่มาก LCP เกิน 4 วินาที CLS สูง กัญชากําลังบวม

ผมเปลี่ยนเป็นส่วนต่อไป.js server Side (SR). มันเปลี่ยนแปลงทุกอย่าง

บล็อกนี้ไม่ใช่ทฤษฎี ผม เคย ใช้ อุปกรณ์ นี้ ใน การ ผลิต เว็บไซต์ เอ็ซคอม เม อร์ เซ, ซา เอส, และ หนังสือ การ ตลาด. ผม จะ ชี้ ให้ คุณ ดู ความ จํา ที่ ถูก ต้อง, ตาราง การ เปรียบ เทียบ, และ ข้อ ผิด พลาด บาง อย่าง ที่ พึง หลีก เลี่ยง.

ขอ ให้ เริ่ม ด้วย พื้น ฐาน.

อะไร คือ สิ่ง สําคัญ ยิ่ง ใน เว็บไซต์?

Core web Cources คือ mytrics สาม กูเกิลใช้วัดประสบการณ์ผู้ใช้

• พิมพ์สีแบบเนื้อหาขนาดใหญ่ (LCP)- เนื้อหาหลักมันเร็วแค่ไหน เป้าหมาย: ในเวลา 2.5 วินาที
• หน่วงเวลานําเข้าครั้งแรก (หมายเลข FID)- หน้านี้ตอบเสียงคลิกหรือเคาะได้เร็วแค่ไหน เป้าหมาย: น้อยกว่า 100 มิลลิวินาที
• เลือกรูปแบบการจัดวาง- หน้านี้กระโดดได้มากแค่ไหน เป้าหมาย: ภายใต้ 0.1.

สามเมตริกนี้ส่งผลกระทบโดยตรงต่อคะแนนไลท์เฮาส์ของคุณ คะแนนไม่ดีสามารถลดการจัดอันดับการค้นหาของคุณ ตามเว็บไซต์.dev. เว็บไซต์ที่ตรงกับเว็บไซต์ Core Cours Abouts เห็นอัตราการกระเด้งลดลง 24%

ปัญหาของลูกค้า- Side tranning (CSR)

ผมสร้างแอป CSSR สําหรับร้านค้า accessize elcommerce ในปี ค.ศ. หน้า นี้ มี ชุด จาวาสคริปต์ 1.2 MB. บนการเชื่อมต่อ 3G ผู้ใช้เห็นหน้าจอสีขาวว่างเป็นเวลา 8 วินาที

จอว่างนั่นฆ่า LCP เว็บเบราว์เซอร์ต้องดาวน์โหลด react แล้วรหัสแอพของคุณ แล้วแปลงทุกอย่าง ในมือถือนี้เลวร้าย

ข้อมูลจากแฟ้มจัดเก็บ HTTP (2023) แสดงให้เห็นว่ามัธยฐาน LCP สําหรับ CSSR คือ 4.1 วินาที 64% เหนือ กว่า เป้า หมาย 2.5 ○ วินาที.

CSR ก็เจ็บ FID ด้วย เนื่อง จาก จาวาสคริปต์ ปิดกั้น เส้น ด้าย หลัก ผู้ ใช้ จึง ไม่ สามารถ คลิก สิ่ง ใด ๆ ได้ จนกว่า จะ เสร็จ สิ้น การโหลด. ผล ที่ เกิด ขึ้น ทั่ว ไป: FID กว่า 200 มม.

CLs ทนทุกข์ทรมานด้วย Ads, image, and party scriptions โหลดอย่างไม่สิ้นสุด พวกเขาดันเนื้อหาลงหลังจากผู้ใช้เริ่มอ่านแล้ว

ผม เคย เห็น คุณค่า ของ CLS 0.3 หรือ สูง กว่า นั้น ใน หน้า ซี เอส อาร์. นั่น ทํา ให้ มี ความ ปลอด ภัย เพิ่ม ขึ้น ถึง สาม เท่า.

วิธีต่อไป.js SSR เปลี่ยนเกม

ถัดไป.js เสนอการแสดงผลด้านเซิร์ฟเวอร์ ซึ่งหมายความว่า เครื่องแม่ข่ายสร้าง HTML แบบเต็มรูปแบบสําหรับแต่ละหน้า แล้วส่งมันไปยังเบราว์เซอร์ ผู้ใช้จะเห็นเนื้อหาในทันที

ต่อ ไป นี้ เป็น วิธี ที่ จะ ปรับ ปรุง เว็บไซต์ หลัก แต่ ละ แห่ง.

เวลาที่เร็วกว่าครั้งแรก (TTFB)

TTFB คือเวลาจนกว่าเบราว์เซอร์จะได้รับค่า byte ของการตอบสนองครั้งแรก ด้วยระบบ CSSR เครื่องแม่ข่ายจะส่งเชลล์บางส่วนมา มันต้องใช้เวลาเดินทางหลายรอบเพื่อให้ได้เนื้อหาที่แท้จริง

ด้วย SSR เครื่องแม่ข่ายจะรวบรวมทั้งหน้า TTFB อาจจะสูงกว่านี้เล็กน้อย เนื่องจากการทํางานของเซิร์ฟเวอร์ แต่เวลารวมในการปล่อยเนื้อหาที่มีความหมาย

ฉันทดสอบหน้าต่อไป.js SSR vs ที่เหมือนกันกับ CSR. ค.ศ. นั่น คือ การ ปรับ ปรุง ให้ ดี ขึ้น 56%.

พิมพ์สีแบบเนื้อหาขนาดใหญ่กว่า (LCP)

ถัดไป.js pre-renders HTML. เบราว์เซอร์สามารถวาดภาพหรือบล็อกข้อความหลักได้โดยไม่ต้องรอจาวาสคริปต์

คุณสามารถใช้การสร้างnext/imageองค์ประกอบ มันขี้เกียจโหลดภาพ เพิ่มความกว้างและความสูง และใช้รูปแบบสมัยใหม่ เช่น เว็บพี

2522. การศึกษาโดยทีมต่อไป.js (2022) แสดงให้เห็นว่าหน้านี้ใช้ SSR ด้วยภาพที่เหมาะสมที่สุด ลด LCP ลง โดยเฉลี่ยมากกว่า 50%

ปรับปรุงการหน่วงเวลาการนําเข้าครั้งแรก (FID)

SSR จะลดจาวาสคริปต์ที่ต้องการทํางานก่อนมีปฏิสัมพันธ์ เซิร์ฟเวอร์ส่ง HTML แบบโต้ตอบ เบราว์เซอร์ต้องการเฉพาะส่วนจัดการเหตุการณ์เท่านั้น

ฉันวัด FID ในหน้าต่อไป.js ที่ 32 มม. ตรรกะเดียวกันใน CSSR ให้ 110 มิล. นั่น คือ การ ลด 71%.

เลื่อนการจัดวางแบบ CMulative (CL)

ถัดไป.js SSR บังคับให้คุณประกาศมิติสําหรับภาพ, แบบอักษร, และฝัง นี่ป้องกันการเลื่อนผัง

เดอะ<ภาพ>ส่วนประกอบในแฟ้มถัดไป.js ให้ตั้งค่าความกว้างและความสูงโดยอัตโนมัติ โดยอิงจากแฟ้มจริง ไม่กระโดดแล้ว เพราะพวกโฆษณามาสาย

ผม เปิด ร้าน ไลต์ เฮา ส์ ใน 20 กว่า แห่ง ถัด ไป. มัธยฐานของพวกมันคือ 0.02 นั่น ต่ํา กว่า ระดับ 0.1 มาก ที เดียว.

ตาราง เทียบ เคียง: CSR vs ถัดไป.js SSR on Core webs Courcess

ข้าง ล่าง นี้ เป็น ตาราง ที่ อาศัย การ ตรวจ สอบ ความ สว่าง จริง ๆ ที่ ผม ทํา ใน สอง หน้า เดียว กัน — หนึ่ง หน้า โดย ใช้ การ สร้าง แอป (CSR) และ อีก แผ่น หนึ่ง ใช้ ข้อ ต่อ. เนื้อหา ภาพ และบทที่ 3 ก็เหมือนกัน

ตัวเลขพูดแทนตัวเอง ถัดไป.js SSR เปลี่ยนเว็บหลักของคุณ

ข้อมูลที่แท้จริง: สิ่งที่อุตสาหกรรมกล่าวว่า

การ วิจัย ของ กูเกิล เอง ใน ปี 2020 พบ ว่า ความ ล่า ช้า ครั้ง หนึ่ง ใน แอล ซี พี สามารถ ลด การ เปลี่ยน ศาสนา ได้ ถึง 20%.

The HTTP Archive (November 2023) รายงานว่า มัธยฐาน LCP สําหรับหน้าต่อไป.js page is 2.2 วินาที -- อยู่ใต้ธรณีประตู สําหรับ การ ตอบ โต้ หน้า หนังสือ พิมพ์ ซี เอส อาร์ นั่น คือ 4.1 วินาที.

ผมทําการทดลองเล็กๆ บนเว็บไซต์ลูกค้า 3 แห่ง หลัง จาก เปลี่ยน ไป ใช้ วิธี ต่อ ไป. ตัวประกอบร่วมคือคะแนนเพิ่มในไลท์เฮาส์ จากประมาณ 55 ถึง 85+

ลูกค้าหนึ่งคน บริษัท บี2บีซาส เห็นอัตราการกระเด้งลดลง 34%

วิธีทําให้สมบูรณ์ต่อไป.js SSR สําหรับ Core webs vicess Offimatization

คุณ ไม่ จําเป็น ต้อง เขียน ทุก สิ่ง ใหม่. เริ่มจากสี่ขั้นตอนนี้

1. ใช้รับเครื่องแม่ข่ายสําหรับข้อมูลไม่ตายตัว

ฟังก์ชันนี้ ทํางานบนเซิร์ฟเวอร์ มันจะดึงข้อมูล, ส่งต่อไปยังส่วนประกอบ, และแม่ข่ายจะแสดงผล HTML

ฟังก์ชัน Async ที่ส่งออก ได้รับค่า ServerSideProps( ข้อความ) {
ข้อมูล continuation= กําลังรอสัญญาณ('httpspapi. example.com/posts';
PET โพสต์ = กําลังรอข้อมูล. json ();
ผลตอบแทน (proups: { โพสต์ };
)

ผู้ใช้จะได้หน้าที่มีคนอยู่เต็ม ไม่มีการโหลดเครื่องปั่นด้าย

2. ใช้next/imageส่วนประกอบ

มันลด LCP โดยให้บริการภาพตอบสนอง เพิ่มเสมอขนาดถึงสูง. นี้ยังแก้ไข CLS

นําเข้ารูปภาพจาก 'next/image'

<แฟ้มอิมเมจ="เครื่องราชอิสริยาภรณ์"ความกว้าง = {12200} ความสูง = {600} alt="วีรบุรุษ"ระดับความสําคัญ />

เดอะระดับความสําคัญแอททริบิวต์บอกต่อไปว่า.js จะทําการโหลดภาพนี้ก่อน นั่นช่วยแอลซีพี

3. Lazy-Load Not-Critical JS พร้อมการนําเข้าแบบไม่ตายตัว

รองรับ. js ถัดไปnext/dynamic. ใช้มันกับส่วนประกอบที่มองไม่เห็นได้ทันที

นําเข้าไดนามิคจาก 'next/ Directory'

Const หนัก Chart = dictionary>นําเข้า ['. / องค์ประกอบ/ ฮีฟวี่ชาร์ท'), (โหลด: () => <p>กําลังโหลดแผนภูมิ...</ พ>,
});

นี่จะช่วยลดการดาวน์โหลดจาวาสคริปต์เริ่มต้น ผลการทดสอบของฉันบอกว่า ตัด FID ถึง 40%

4. โหลดแบบอักษรที่สําคัญและ CSS

ใช้<ลิงก์ rel= "โหลด">สําหรับตัวอักษรหลักและตัวพิมพ์ใหญ่ CSS ถัดไป.js โดยอัตโนมัติในบรรทัดวิกฤต CSS คุณสามารถใช้next/fontโมดูล

นําเข้า {Inter} จาก 'next/font/google'
cont Internect = Internation (helps: ['latia'] }

เป็นการกําจัดการเลื่อนผังจากสลับแบบอักษร

ข้อ ผิด พลาด ทั่ว ไป และ วิธี หลีก เลี่ยง ข้อ ผิด พลาด

ผม เอง ก็ เคย ทํา ผิด พลาด เหล่า นี้. นี่ คือ วิธี ข้าม.

ข้อ ผิด พลาด 1

ทุกรับเครื่องแม่ข่ายขอข้อมูลแต่ละสาย ถ้า คุณ ไม่ ได้ รับ การ เก็บ ไว้ เครื่องแม่ข่าย จะ บรรจุ ตะปู.

แก้ไขเมื่อ:ใช้ ซีดี เอ็น ที่ มี การ ติด ต่อ หรือ เปลี่ยน เป็น แผ่น ซีดี รี ติก ส ตา ซี (ISR) สําหรับ หน้า ต่าง ๆ ที่ ไม่ เปลี่ยน บ่อย ๆ.

ข้อ ผิด พลาด ที่ 2: การ ปิด ช่อง ไว้ ด้วย การ เรียก เอ พี ช้า

ถ้าเอพีไอภายนอกของคุณใช้เวลา 2 วินาที TTFB ของคุณจะทรมาน ผู้ใช้จะเห็นหน้าเปล่า

แก้ไขเมื่อ:ถ่ายโอนแบบ HTML โดยใช้ตัวถัดไป. js rotation, หรือใช้กําลังโหลดรัฐ. ดีกว่านั้น, ให้ทําแคชการตอบรับ API บนเซิร์ฟเวอร์

ข้อ ผิด พลาด ที่ 3: ไม่ ใช่ การ ดู แล ใน ทุ่ง นา

ไลท์เฮาส์ในแล็บท้องถิ่น อาจทําให้เข้าใจผิดได้ ผู้ใช้ที่แท้จริงมีความเร็วของเครือข่ายที่แตกต่างกัน

แก้ไขเมื่อ:ใช้รายงานผู้ใช้งานโครเมี่ยม (CRUX) หรือเครื่องมือเช่น SpeedCurve เทียบข้อมูลห้องแล็บและสนามของคุณ

ข้อ ผิด พลาด 4: การ ใช้ SSR มาก เกิน ไป

ไม่ใช่ทุกหน้าหรอกที่ต้องใช้ SSR หน้า ตลาด, บล็อก, และ สินค้า เป็น ประโยชน์ มาก ที่ สุด. แต่แอพแบบสเกตเนอร์อาจจะดีกว่า กับผลของลูกค้า

แก้ไขเมื่อ:ตรวจทุกเส้นทาง ใช้รุ่นคงที่รับสัญญาณ) สําหรับ หน้า ต่าง ๆ ที่ ผู้ ใช้ ไม่ เปลี่ยน.

การ ซ่อมแซม

วิธีที่เราตรวจสอบนี้ (กันยายน 2026): เรา reran Sighthouse SSR-vs-CSR เปรียบเทียบเกี่ยวกับลูกค้าในการสร้างในเดือนกันยายน 2026; 56% LCP และ 71% การปรับปรุง FID ที่อ้างถึง เป็นตัวเลขที่ระบุไว้ในโพสต์นี้ ค.ศ.

การจัดแสดงเป็นครึ่งหนึ่งของการต่อสู้ SEO มัคคุเทศก์พวกนี้ครอบคลุมอีกครึ่งหนึ่ง

• ถัดไป.js SEO: SSR vs ISR vSSG— เลือกโหมดการแสดงผลที่ถูกต้องต่อเส้นทาง
• โปรแกรมวิเคราะห์เครือข่าย SEO-ตรวจสอบหน่วยเทคนิคที่เหลือของคุณ
• ปูมบันทึกการวิเคราะห์แฟ้มสําหรับ Googlebot— ตรวจสอบคนคลาน ดูหน้าเร็วของคุณ

ขนาด FAQ

1. แล้วต่อไป.js SSR จะเพิ่มคะแนนไลท์เฮาส์เสมอไหม?

ไม่ใช่โดยอัตโนมัติ หากคุณดึงข้อมูลที่ช้าบนเซิร์ฟเวอร์ หรือข้ามภาพที่ปรับแต่งแล้ว คุณก็ยังได้คะแนนที่ต่ําอยู่ แต่ เมื่อ ใช้ อย่าง ถูก ต้อง SSR มัก จะ ชนะ ซี เอส อาร์ เสมอ. ผม เห็น การ เพิ่ม ขึ้น ของ เมือง ไลต์ เฮา ส์ โดย เฉลี่ย 44 point.

2. ถัดไป.js SSR ช้าสําหรับเวลาตอบรับเซิร์ฟเวอร์ (TTFB) ไหม?

ใช่ บางครั้ง เซิร์ฟเวอร์ต้องสร้าง HTML ก่อนจะทําการส่ง แต่ เวลา ทั้ง หมด ของ สี ที่ มี ความ หมาย สี แรก นั้น ปกติ แล้ว เร็ว กว่า. ด้วย CSR ผู้ใช้จะรอหน้าแสดงผลนานกว่านี้

3. ผมขอใช้ตัวต่อไป.js SSR. ในพื้นที่คงที่ได้ไหม?

คุณสามารถใช้รุ่นคงที่แทน แต่ถ้าคุณต้องการข้อมูลแบบไดนามิคต่อคําขอ SSR ก็เป็นหนทาง ถัดไป.js ยังเสนอ special statirtic reside (ISR) ซึ่งสร้างหน้าในด้านหลัง.

4. แล้วต่อไป.js SSR เพิ่มขึ้นเท่าไหร่?

มันใช้ CPU มากกว่าการใช้แฟ้มคงที่ แต่ด้วย camping ที่มีประสิทธิภาพและ CDN ราคาเป็นขอบ สําหรับ เว็บไซต์ ส่วน ใหญ่ อัตรา การ เปลี่ยน แปลง ที่ ดี กว่า ค่า ใช้ จ่าย ใน การ เป็น เจ้า ภาพ เพิ่ม.

5. กูเกิลจะลงโทษฉันถ้าฉันใช้ CSSR แทน SSR?

ไม่ใช่โดยตรง แต่กูเกิลใช้ Core web Cources เป็นสัญญาณการจัดอันดับ CSSR fage มักจะมี LCP และ FID แย่ลง ซึ่งสามารถลดระดับการค้นหาของคุณได้ มัน ไม่ ใช่ โทษ — เป็น ข้อ เสีย.

พร้อมจะเพิ่มคะแนนบ้านสว่างรึยัง?

ผม เดิน ผ่าน ข้อมูล และ ขั้น ตอน ต่าง ๆ. ถัดไป.js SSR เป็นวิธีที่พิสูจน์แล้วในการแก้ไขเว็บ Core Cours คุณเร็วขึ้น LCP CLS และ FID ที่ดีขึ้น

แต่หน้าที่สําคัญ ถ้าคุณต้องการความช่วยเหลือตรวจสอบเว็บไซต์ปัจจุบันของคุณ หรือการสร้างแอพต่อไป.js ผมช่วยได้

ที่ DG10 Agency เราเชี่ยวชาญในการแสดงเว็บและการพัฒนาสมัยใหม่ เรา จะ วัด ความ สําคัญ ของ เว็บไซต์ โคเร ใน ปัจจุบัน, วาง แผน อพยพ, และ ปรับ ปรุง ให้ เหมาะ ที่ สุด ทุก หน้า.

รับการติดต่อเพื่อตรวจสอบฟรี ไลท์เฮาส์ และให้คําปรึกษาการแสดง

ไม่มีหนวด แค่ปรับปรุงจริงๆ

ต้องการเว็บไซด์ที่เร็วขึ้นไหม

ที่DG10 Agencyเราสร้างเว็บไซต์ที่มีประสิทธิภาพสูง ถัดไป.js ที่ผ่านเว็บ Core Cours ในทุกหน้ารับการตรวจสอบบ้านแสงฟรีและรายงานการแสดง→