คู่มือนักการตลาดสำหรับการแสดงผลฝั่งเซิร์ฟเวอร์

ภาษาการเขียนโปรแกรมไม่ใช่แนวคิดที่เข้าใจได้ง่าย โดยเฉพาะอย่างยิ่งเมื่องาน SEO ของคุณมุ่งเน้นไปที่ด้านที่ไม่ใช่ด้านเทคนิคเป็นหลัก แต่นี่คือสิ่งที่เกี่ยวกับเทคนิค SEO: ความรู้เกี่ยวกับ SEO จะช่วยให้คุณเข้าใจการเปลี่ยนแปลงที่เว็บไซต์ของคุณต้องทำเพื่อให้อันดับของเครื่องมือค้นหาดีขึ้น
ในขณะที่ Google เปิดตัว Core Web Vitals ในเดือนมิถุนายน ซึ่งเป็นส่วนหนึ่งของการอัปเดต Page Experience นักการตลาดทุกคนที่ไม่ได้พิจารณา SEO ด้านเทคนิคอย่างละเอียดจะต้องการทำเช่นนั้นในตอนนี้
และเมื่อเว็บไซต์ของคุณสร้างขึ้นบนเฟรมเวิร์ก JavaScript ส่วนหนึ่งที่ต้องเจาะลึกก็คือการแสดงผลฝั่งเซิร์ฟเวอร์

การเรนเดอร์ฝั่งเซิร์ฟเวอร์คืออะไร?

การเรนเดอร์ฝั่งเซิร์ฟเวอร์คือกระบวนการในการดึงหน้าเว็บ การดึงโค้ด แสดงเนื้อหาบนหน้าจอ ทั้งหมดนี้เกิดขึ้นบนเซิร์ฟเวอร์
ใน SSR:

• เซิร์ฟเวอร์ส่งการตอบสนองที่พร้อมแสดงผลไปยังเบราว์เซอร์
• เบราว์เซอร์แสดงหน้า ทำให้พร้อมสำหรับการดู จากนั้นเบราว์เซอร์จะดาวน์โหลด JavaScript
• เบราว์เซอร์จะดำเนินการ React เนื่องจากหน้าพร้อมที่จะดูและ
• หน้าเว็บนั้นพร้อมสำหรับการโต้ตอบ

วิธีที่เกิดขึ้นทั้งหมดทำให้เป็นตัวเลือกที่ดีกว่าสำหรับการแสดงผลประเภทอื่น: การเรนเดอร์ฝั่งไคลเอ็นต์ (โดยที่เบราว์เซอร์แสดงผล JavaScript หรือที่เรียกว่าไคลเอ็นต์) และการแสดงผลแบบไดนามิก (ที่ผู้ใช้ได้รับเนื้อหาที่แสดงผลไคลเอ็นต์ - เซิร์ฟเวอร์และเครื่องมือค้นหา รับเนื้อหาที่แสดงฝั่งเซิร์ฟเวอร์) แม้แต่ Google ก็สนับสนุนให้นักพัฒนาเว็บเลือกการแสดงผลฝั่งเซิร์ฟเวอร์
ทำไม

[กรณีศึกษา] การจัดการการรวบรวมข้อมูลบอทของ Google

ด้วยการอ้างอิงผลิตภัณฑ์มากกว่า 26,000 รายการ 1001Pneus จึงต้องการเครื่องมือที่เชื่อถือได้เพื่อตรวจสอบประสิทธิภาพ SEO ของตน และต้องแน่ใจว่า Google ได้ทุ่มเทงบประมาณในการรวบรวมข้อมูลในหมวดหมู่และหน้าเว็บที่ถูกต้อง เรียนรู้วิธีจัดการงบประมาณการรวบรวมข้อมูลสำหรับเว็บไซต์อีคอมเมิร์ซให้สำเร็จด้วย OnCrawl

อ่านกรณีศึกษา

ข้อดีของ SSR

• ช่วยโหลดหน้าเว็บเมื่อการเชื่อมต่ออินเทอร์เน็ตของผู้ใช้ช้า
• ช่วยให้โหลดหน้าเว็บได้รวดเร็ว ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น
• มันสร้างหน้า HTML แบบเต็ม ป้องกันไม่ให้กระบวนการดึงข้อมูลใช้เวลานาน
• อนุญาตให้โหลดหน้าเว็บพร้อมองค์ประกอบทั้งหมดแม้ว่าผู้ใช้จะมีอุปกรณ์ที่ใช้พลังงานต่ำเช่นสมาร์ทโฟนรุ่นเก่า
• มีส่วนทำให้ประสิทธิภาพ SEO เนื่องจากช่วยให้เครื่องมือค้นหาสามารถรวบรวมข้อมูลและจัดทำดัชนีหน้าเว็บได้อย่างถูกต้อง บอทสามารถรวบรวมข้อมูลหน้าได้ง่ายเนื่องจากเข้าใจ JS

โดยรวมแล้ว SSR ช่วยให้คุณให้บริการลูกค้าออนไลน์ได้ดียิ่งขึ้น เนื่องจากผู้เยี่ยมชมไซต์ของคุณไม่ต้องคอยรอให้หน้าเว็บแสดงบนอุปกรณ์ของพวกเขา การเปลี่ยนหน้าอย่างรวดเร็วยังช่วยให้แน่ใจว่าผู้ใช้ของคุณจะไม่มีวันได้รับหน้าว่าง ทำให้สามารถใช้ไซต์ของคุณได้ทันที
เนื่องจาก Google กำลังขยายแคมเปญเพื่อมอบผลลัพธ์ที่แม่นยำยิ่งขึ้นด้วยการปรับปรุงอัลกอริทึมที่สร้างขึ้นจากประสบการณ์ของผู้ใช้ SSR จะดีกว่าสำหรับประสิทธิภาพ SEO ของคุณเมื่อเทียบกับการแสดงผลไคลเอนต์-เซิร์ฟเวอร์
แต่เช่นเดียวกับทุกอย่างในการตลาดดิจิทัล แนวทางเดียวที่ไม่ค่อยได้ผลกับทุกคน ในบางกรณี การเรนเดอร์ฝั่งเซิร์ฟเวอร์อาจเป็นปัญหาได้ เช่นเดียวกับ Google กล่าวว่า SSR "ไม่ใช่สัญลักษณ์แสดงหัวข้อย่อยสีเงิน"

ข้อเสียของ SSR

• มันเกี่ยวข้องกับงานมากเพราะมันทำแอปพลิเคชันเดียวกันสองครั้ง: หนึ่งครั้งบนไคลเอนต์และในเซิร์ฟเวอร์
• อาจทำให้เวลาล่าช้าเป็น byte . แรก
• อาจส่งผลต่อการเชื่อมโยงภายในหรือคุณภาพของหน้า เนื่องจากไม่สามารถแสดง JS ของบุคคลที่สาม (เช่น เนื้อหาที่ผู้ใช้สร้างขึ้น บทวิจารณ์ผลิตภัณฑ์ เป็นต้น) หรือเนื้อหาใดๆ ที่ไม่ได้อยู่ใน HTML แบบคงที่ของคุณ บอทจะมองไม่เห็น
• URL ที่ไม่ได้อัปเดตอาจทำให้บ็อตไม่สามารถดูบทความใหม่ได้ ซึ่งอาจนำไปสู่การพลาดการเข้าชม

สิ่งสำคัญอีกประการหนึ่งของ SSR คือมันหมายถึงต้นทุนสำหรับธุรกิจตั้งแต่การเรนเดอร์เกิดขึ้นบนเซิร์ฟเวอร์ของคุณ แต่เป็นค่าใช้จ่ายที่คุณอาจต้องลงทุนเพราะการเรนเดอร์ประเภทนี้สามารถนำไปสู่การเพิ่มประสิทธิภาพ Core Web Vitals ได้

เหตุใด SSR จึงเกี่ยวข้องกับ CWV

นักพัฒนาเว็บและ SEO ทำงานกันมานานหลายเดือนเพื่อรอการเปิดตัว CWV ประมาณ 60 เปอร์เซ็นต์ของหน่วยงาน SEO ที่ทำการสำรวจกำลังยุ่งอยู่กับการปรับปรุงคะแนน CWV ของลูกค้า หากคุณใช้ SSR คุณอาจไม่ต้องทำงานมากมายเพื่อให้เป็นไปตามความคาดหวัง
เนื่องจาก SSR อำนวยความสะดวกด้านความเร็ว เว็บไซต์ของคุณจึงทำได้ดีกับหนึ่งในตัวชี้วัด: Largest Contentful Paint (LCP)
LCP มุ่งเน้นไปที่ประสบการณ์การโหลดที่รับรู้ โดยจะวัดเวลาในการโหลดหน้าเว็บเมื่อรูปภาพหรือข้อความที่ใหญ่ที่สุดของหน้าเว็บปรากฏในวิวพอร์ต สิ่งที่คุณต้องการตั้งเป้าเพื่อให้ได้คะแนนที่ดีคือการโหลดหน้าเว็บ 75 เปอร์เซ็นต์ที่ <2.5 วินาที
ความท้าทายหลักในการรับ LCP ที่ดีคือการบล็อกการแสดงผล JS และ CSS; เวลาโหลดทรัพยากรช้า การตอบสนองของเซิร์ฟเวอร์ช้า และการแสดงผลฝั่งไคลเอ็นต์
การเปลี่ยนไปใช้ SSR เป็นเพียงวิธีหนึ่งในการปรับปรุงคะแนน LCP เนื่องจากปัญหาของคุณอาจไม่ได้จำกัดอยู่แค่ CSR คุณจะต้องทำงานร่วมกับนักพัฒนาเว็บเพื่อระบุสาเหตุที่ LCP ของคุณเกิดความล่าช้าก่อน
หากแหล่งที่มาของหน้าเปิดเผยโค้ดที่ไม่สมเหตุสมผล (และนักพัฒนาของคุณจะบอกคุณ) ปัญหาก็อาจมาจาก CSR หากนักพัฒนาของคุณพบว่า TTFB ไม่ดี แสดงว่าคุณอาจกำลังเผชิญกับเวลาตอบสนองของเซิร์ฟเวอร์ที่ช้า
ตัวชี้วัด CWV อื่นๆ ได้แก่:

• First Input Delay ซึ่งมุ่งเน้นไปที่การตอบสนองและ
• Cumulative Layout Shift ซึ่งเน้นที่ความเสถียรของภาพ

ทั้งสองไม่เกี่ยวข้องกับ SSR ดังนั้นเมตริกเหล่านี้จึงเป็นเมตริกที่คุณอาจต้องการใช้มากขึ้น เนื่องจาก SSR จะดูแล LCP บางส่วน

จะทราบได้อย่างไรว่า SSR แสดงผลหน้าเว็บถูกต้องหรือไม่

วิธีที่ดีที่สุดในการบอกว่า SSR กำลังแสดงหน้าเว็บของคุณถูกต้องหรือไม่คือการใช้เครื่องมือ หนึ่งในนั้นคือการทดสอบความเป็นมิตรกับมือถือ เป็นเครื่องมือที่ให้ภาพรวมว่าหน้าเว็บของคุณจะปรากฏต่อ Googlebots อย่างไร และแสดงข้อผิดพลาดระหว่างการแสดงผล หากมี
Google Search Console ยังมีเครื่องมือตรวจสอบ URL ที่ช่วยให้คุณเห็นว่าเครื่องมือค้นหาแสดงหน้าเว็บของคุณหรือไม่ ใช้เพื่อตรวจสอบเนื้อหาที่ขาดหายไปหรือข้อผิดพลาดใดๆ ที่เกี่ยวข้องกับ JavaScript หรือ CSS ที่ถูกบล็อก
คุณยังสามารถไปที่ View Render Source ซึ่งเป็นส่วนขยายของ Chrome ฟรี โดยจะบอกคุณว่าเบราว์เซอร์แสดงหน้าจาก HTML ดั้งเดิมไปยัง DOM ที่ใช้งานได้อย่างไร ส่วนขยายจะแสดงความแตกต่างระหว่างเวอร์ชันดิบและเวอร์ชันที่แสดงผล โดยเน้นว่าหน้าแก้ไข JS ในเวลาที่แสดงผลอย่างไร
ส่วนขยาย Chrome อื่นที่ต้องลองคือ SiteCrawler โปรแกรมรวบรวมข้อมูลที่รองรับ JS จะรวบรวมข้อมูลแผนผังเว็บไซต์ ลิงก์ และรูปภาพ และเปรียบเทียบหน้าที่เปิดใช้งาน HTML เท่านั้นและ JS

บทสรุป

งาน SEO ส่วนใหญ่เกี่ยวข้องกับการเพิ่มประสิทธิภาพสำหรับหน้าเว็บที่ "ส่ง" ไปยังไคลเอ็นต์หรือเบราว์เซอร์แล้ว แต่เมื่อคุณตรวจสอบว่าหน้าเว็บเหล่านั้น "เข้าถึง" ไคลเอ็นต์ได้อย่างไร และคุณจะปรับปรุงวิธีการที่เกิดขึ้นได้อย่างไร ผู้ใช้จะมีเวลาบนเว็บไซต์ของคุณดีขึ้น
บอทรวบรวมข้อมูลหน้าเว็บของคุณอย่างถูกต้อง หน้าของคุณได้รับการจัดทำดัชนี เว็บไซต์ของคุณมีอันดับเครื่องมือค้นหาที่ดีกว่า
การอัปเดตเครื่องมือค้นหาพร้อมกับการเปลี่ยนแปลงพฤติกรรมผู้บริโภคเรียกร้องให้มีการเปลี่ยนแปลงเว็บไซต์ของคุณเช่นกัน ด้วยการเปิดตัว CWV ที่กำลังจะมีขึ้น ในตอนนี้จึงเป็นเวลาที่ดีที่จะพิจารณา SSR ซึ่งเป็นลักษณะทางเทคนิคที่จะส่งผลต่อความพยายาม SEO ของคุณ