WP Rocket SaaS: เบื้องหลัง

บทความด้านเทคนิคนี้ให้รายละเอียดเกี่ยวกับการพัฒนาและการเพิ่มประสิทธิภาพของโปรแกรมรวบรวมข้อมูลเว็บที่สามารถประมวลผลหน้าเว็บได้มากกว่า 15,000 หน้าต่อนาทีโดยใช้ NodeJS, Puppeteer และ BullMQ เราอธิบายวิธีการทำงานของฟีเจอร์ Remove Unused CSS (RUCSS) และเพิ่มประสิทธิภาพเว็บโดยกำจัด CSS ที่ไม่จำเป็น ปรับปรุงเวลาในการโหลด และเพิ่มประสิทธิภาพการวัดประสิทธิภาพหลัก นอกจากนี้เรายังอธิบายถึงวิธีที่เราจัดการกับความท้าทายเบื้องต้น รวมถึงปัญหาการประมวลผลและความเสถียรที่ไม่มีประสิทธิภาพ โดยใช้ประโยชน์จาก Puppeteer สำหรับการรวบรวมทรัพยากร ปรับแต่งไลบรารี JavaScript และการนำระบบคิวไปใช้ BullMQ สุดท้ายนี้ เราสรุปวิธีที่เราบรรลุความเป็นเลิศในการปฏิบัติงานโดยมีเป้าหมายเพื่อรักษามาตรฐานคุณภาพสูง ทำให้เกิดนวัตกรรมที่รวดเร็ว และการสนับสนุนลูกค้าที่มีประสิทธิภาพ

RUCSS คืออะไร?

คุณสมบัติลบ CSS ที่ไม่ได้ใช้ (RUCSS) ได้รับการออกแบบมาเพื่อกำจัด CSS และสไตล์ชีททั้งหมดที่ไม่ได้ใช้บนหน้าเว็บ โดยจะคงไว้เฉพาะ CSS ที่จำเป็นสำหรับแต่ละหน้า เมื่อใช้การเพิ่มประสิทธิภาพแล้ว เว็บไซต์ของคุณจะส่งเฉพาะ CSS ที่จำเป็นสำหรับหน้าเว็บเฉพาะที่ผู้ใช้ร้องขอเท่านั้น ทำให้หน้าเว็บโหลดเร็วขึ้นมาก!

โดยเฉลี่ยแล้ว การเพิ่มประสิทธิภาพนี้จะลดขนาดของ CSS ที่จัดส่งลงถึง 76%!

ประโยชน์ของ RUCSS

• ขนาดหน้าลดลง : ย่อขนาดโดยรวมของหน้าเว็บให้เล็กลง
• คำขอ HTTP น้อยลง : ลดจำนวนสไตล์ชีต CSS ที่ต้องโหลด
• เวลาโหลดเร็วขึ้น : ปรับปรุงความเร็วในการโหลดของเพจ
• Core Web Vitals ที่ปรับปรุงแล้ว : เพิ่มประสิทธิภาพตัวชี้วัดประสิทธิภาพหลัก เช่น Largest Contentful Paint (LCP), First Contentful Paint (FCP) และ Cumulative Layout Shift (CLS)
• การกำจัด CSS การบล็อกการแสดงผล : ป้องกันไม่ให้ CSS ชะลอการเรนเดอร์เพจ

การระบุ CSS ที่ไม่ได้ใช้: การประท้วงแบบผ่าตัด

กระบวนการลบ CSS ที่ไม่ได้ใช้นั้นซับซ้อนมาก: สำหรับทุกกฎ CSS ที่เราลบ เราต้องแน่ใจว่าจะไม่จำเป็นต้องใช้ในหน้านั้น ไม่เช่นนั้นเลย์เอาต์อาจพังได้! คุณต้องคำนึงถึงปัจจัยหลายประการเพื่อให้แน่ใจว่า CSS ที่ไม่ได้ใช้ได้รับการระบุอย่างถูกต้อง:

• การโต้ตอบของ JavaScript : JavaScript เปลี่ยนแปลง DOM และ CSS แบบไดนามิก ตัวอย่างเช่น ป๊อปอัปอาจปรากฏขึ้นหลังจากการคลิกปุ่ม เพื่อแนะนำองค์ประกอบ DOM ใหม่และกฎ CSS การจัดการการโต้ตอบเหล่านี้ถือเป็นสิ่งสำคัญสำหรับการระบุ CSS ที่ใช้อย่างถูกต้อง และยังมีแถบเลื่อน เมนูนอกพื้นที่ และแกลเลอรีอีกมากมาย
• รูปแบบ CSS และ HTML : ธีมและปลั๊กอิน WordPress นำเสนอกฎ CSS รูปแบบต่างๆ ที่ไม่มีที่สิ้นสุด การจัดการ CSS ที่ซ้อนกัน, Edge Case และแม้แต่ข้อผิดพลาดทางไวยากรณ์ถือเป็นสิ่งสำคัญ จำเป็นต้องมีการแยกวิเคราะห์ HTML ที่แม่นยำเพื่อระบุและลบ CSS ที่ไม่ได้ใช้อย่างมีประสิทธิภาพ
• ขนาดวิวพอร์ต : สไตล์ CSS บางอย่างจะถูกนำไปใช้ภายใต้เงื่อนไขบางประการเกี่ยวกับขนาดหน้าจอ เพื่อให้แน่ใจว่า CSS สามารถให้บริการแก่ผู้ใช้มือถือและเดสก์ท็อปได้อย่างถูกต้อง เราได้จัดเตรียม CSS ที่ใช้แล้วสำหรับหน้าจอขนาดต่างๆ และจัดส่งเฉพาะ CSS ที่เกี่ยวข้องสำหรับการเข้าชมแต่ละครั้ง นอกจากนี้ กฎการเพิ่มประสิทธิภาพเฉพาะนำไปใช้กับสไตล์ CSS ที่ตอบสนอง

RUCSS เป็นโซลูชัน SaaS

การประมวลผลทรัพยากรของหน้าและการสร้าง CSS ที่ใช้นั้นต้องใช้ทรัพยากรมาก การดำเนินงานเหล่านี้โดยตรงบนเว็บไซต์ของลูกค้าอาจทำให้การทำงานช้าลงและอาจไม่สามารถทำได้บนเซิร์ฟเวอร์และโฮสติ้งทั้งหมด ดังนั้นคุณสมบัติขั้นสูงบางส่วนของ WP Rocket เช่น Removed Unused CSS จึงขับเคลื่อนโดย SaaS ของเรา การเพิ่มประสิทธิภาพเหล่านั้นจะดำเนินการบนเซิร์ฟเวอร์ของเราเมื่อมีการร้องขอจากปลั๊กอิน WP Rocket จากนั้นผลลัพธ์จะถูกนำไปใช้กับเว็บไซต์โดยอัตโนมัติ แนวทางนี้มีประโยชน์ที่ดีเยี่ยมสำหรับลูกค้า:

• ดำเนินการเพิ่มประสิทธิภาพที่เน้นทรัพยากรและลดภาระบนเซิร์ฟเวอร์ของผู้ใช้
• ส่งมอบการปรับปรุงโดยเร็วที่สุดและจัดการกับข้อเสนอแนะอย่างรวดเร็ว
• สังเกตและแก้ไขปัญหาและข้อผิดพลาดในเชิงรุกโดยไม่ต้องรอตั๋วสนับสนุน
• ตรวจสอบให้แน่ใจว่าผู้ใช้ทุกคนได้รับประโยชน์จากเวอร์ชันล่าสุดโดยไม่ต้องอัปเดตฝั่งไคลเอ็นต์
• ทำซ้ำอย่างรวดเร็วและปรับใช้การปรับปรุงโดยไม่จำเป็นต้องอัปเดตปลั๊กอิน WP Rocket

มันมีลักษณะเป็นอย่างไรเบื้องหลัง?

WP Rocket SaaS กำลังเยี่ยมชมและเพิ่มประสิทธิภาพสูงสุด 20,000 หน้าต่อนาที ประมวลผล CSS และรูปภาพครึ่งหน้าบน! เพื่อทำเช่นนั้น เราใช้งานเว็บเบราว์เซอร์นับพันอย่างต่อเนื่องในเซิร์ฟเวอร์ต่างๆ ประมาณ 40 เซิร์ฟเวอร์ เพื่อตอบสนองคำขอของผู้ใช้ทั้งหมดของเราภายใน 2 นาที เพื่อให้บรรลุเป้าหมายนี้ ทีมของเรากำลังใช้ประโยชน์จากเทคโนโลยีล้ำสมัย รวมถึง NodeJS, Django, Redis, CockroachDB และ Kubernetes และดำเนินการกับทีมกลุ่มหนึ่ง

ความท้าทายทางเทคนิคที่สำคัญ

1. การรวบรวมทรัพยากรของหน้า

เราใช้ Puppeteer ซึ่ง เป็นไลบรารี Node ที่ให้บริการ API ระดับสูงเพื่อควบคุมเบราว์เซอร์ Chrome หรือ Chromium ที่ไม่มีส่วนหัว เครื่องมือนี้จำเป็นสำหรับกลยุทธ์การรวบรวมทรัพยากรของเรา เนื่องจากความสามารถในการแสดงผลหน้าเว็บได้เหมือนกับที่ผู้ใช้จริงทำ ทำให้มั่นใจได้ว่าองค์ประกอบไดนามิกทั้งหมดจะถูกบันทึก โดยนำเสนอคุณสมบัติที่มีประสิทธิภาพมากมายที่เราพึ่งพาเพื่อเพิ่มประสิทธิภาพกระบวนการ เช่น การควบคุมขนาดวิวพอร์ต การสกัดกั้นคำขอ และอื่นๆ

2. กำลังประมวลผลทรัพยากรของหน้า

เนื่องจากธีมและปลั๊กอิน WordPress ใช้ CSS และ JavaScript ที่หลากหลาย เราจึงต้องการโซลูชันที่มีประสิทธิภาพในการประมวลผลไฟล์เหล่านี้

หลังจากทดสอบวิธีการต่างๆ มากมายในการประมวลผลทรัพยากรของหน้า เช่น Webpack, PostCSS และ CleanCSS ในที่สุดเราก็ตัดสินใจแยกและดูแลรักษาไลบรารี JavaScript ที่ปรับแต่งเองเพื่อให้เหมาะกับความต้องการเฉพาะของเรามากขึ้น ซึ่งรวมถึงการจัดการ Edge Case กฎ CSS ที่ซ้อนกัน และปัญหาทางไวยากรณ์ที่พบในธีมและปลั๊กอิน WordPress จำนวนมาก เพื่อให้แน่ใจว่าการเพิ่มประสิทธิภาพสามารถทำได้อย่างน่าเชื่อถือสำหรับผู้ใช้ของเราทุกคน

3. ปรับแต่งอย่างละเอียดด้วยความเชี่ยวชาญของทีมงานของเรา

การประมวลผล CSS อาจยุ่งยากมากและมีความเสี่ยงสูงที่จะพังเค้าโครงหน้าหากไม่ได้รับการดูแลในกระบวนการที่เพียงพอ ทีมงานของเรามีความรู้อย่างกว้างขวางเกี่ยวกับธีม WordPress ยอดนิยมและเครื่องมือสร้างเพจ ตลอดจนข้อเสนอแนะอย่างต่อเนื่องจากผู้ใช้หลายแสนคนเกี่ยวกับความเข้ากันได้กับเทรนด์ WordPress ล่าสุด ดังนั้นเราจึงพัฒนาระบบรายการที่ปลอดภัยแบบไดนามิกสำหรับเพื่อนร่วมทีมของเราเพื่ออัปเดตกฎการประมวลผล CSS ของ SaaS ของเราโดยตรงแบบเรียลไทม์เพื่อปรับการเพิ่มประสิทธิภาพของเราอย่างต่อเนื่องและเพิ่มความเข้ากันได้ทุกวัน

4. การจัดการกระแสนับพันหน้าต่อนาที

เพื่อจัดการกับโฟลว์หน้าเว็บ 15,000 หน้าต่อนาที เราได้ติดตั้งระบบคิวโดยใช้ BullMQ ระบบนี้มี:

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

ความเป็นเลิศในการปฏิบัติงาน

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

1. สถาปัตยกรรมที่ปรับขนาดได้

WP Rocket ถูกใช้บนเว็บไซต์นับล้านทั่วโลกตลอดเวลา ดังนั้น SaaS ของเราจึงต้องพร้อมใช้งานและดำเนินการตามที่คาดไว้ตลอดเวลา บริการนี้โฮสต์บนเซิร์ฟเวอร์จริงมากกว่า 40 เครื่องที่ตั้งอยู่ในภูมิภาคต่างๆ มีการประสานกับ Kubernetes เพื่อลดความยุ่งยากในการใช้งาน การปรับขนาด และการจัดการวงจรชีวิตของคอนเทนเนอร์ เราพึ่งพาฟีเจอร์ที่มีประสิทธิภาพ เช่น การตรวจสอบความพร้อมใช้งาน การอัปเดตแบบต่อเนื่อง และการปรับขนาดอัตโนมัติเพื่อนำความยืดหยุ่นมาสู่บริการและรักษาเวลาทำงานในทุกสถานการณ์ นอกจากนี้ บริการเกตเวย์แบบกำหนดเองยังจัดการงานและบังคับใช้ความปลอดภัยของ API (การจำกัดอัตรา การตรวจสอบสิทธิ์ ฯลฯ)

2. การติดตามและการแจ้งเตือน

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

3. การสังเกตเพื่อช่วยเหลือลูกค้าของเรา

แม้ว่าเราจะทำงานอย่างหนักเพื่อทำให้ SaaS ของเราใช้งานง่ายสำหรับลูกค้าของเรา แต่ปัญหาบางอย่างอาจเกิดขึ้นได้ในการตั้งค่าที่ซับซ้อนมากด้วยไฟร์วอลล์ กฎความปลอดภัย หรือเว็บไซต์ WordPress ที่มีปลั๊กอินหรือธีมที่ขัดแย้งกันมากมาย เป็นต้น ด้วยแนวทาง SaaS ทีมสนับสนุนของเราจึงมีเครื่องมือภายในผ่าน Metabase เพื่อเข้าถึงข้อมูลที่เกี่ยวข้องกับผู้ใช้ที่กำหนด และสังเกตงานการเพิ่มประสิทธิภาพและผลลัพธ์ของพวกเขา ซึ่งช่วยให้เราสามารถระบุปัญหาที่เป็นไปได้ได้อย่างรวดเร็ว จากนั้นพวกเขาสามารถทำซ้ำ ปรับแต่ง และปรับแต่ง และรับคำติชมแบบเรียลไทม์ด้วย PostMan และ Metabase เป็นผลให้พวกเขาสามารถช่วยเหลือลูกค้าที่กำลังดิ้นรนได้อย่างมีประสิทธิภาพและยังปรับกฎการเพิ่มประสิทธิภาพ SaaS ได้โดยตรงเพื่อปลดล็อกผู้ใช้

4. การทดสอบอัตโนมัติและการบูรณาการอย่างต่อเนื่อง

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

ห่อขึ้น

โดยสรุป การพัฒนาและเพิ่มประสิทธิภาพโปรแกรมรวบรวมข้อมูลเว็บโดยใช้ NodeJS, Puppeteer และ BullMQ ได้นำไปสู่โซลูชันที่มีประสิทธิภาพสูงและปรับขนาดได้สำหรับการประมวลผลหน้าเว็บมากกว่า 15,000 หน้าต่อนาที ด้วยการจัดการกับความท้าทายเบื้องต้นและใช้ประโยชน์จากเครื่องมือและวิธีการขั้นสูง เราได้สร้างระบบที่แข็งแกร่งซึ่งปรับปรุงประสิทธิภาพของเว็บอย่างมีนัยสำคัญผ่านฟีเจอร์ลบ CSS ที่ไม่ได้ใช้ (RUCSS) การบูรณาการอย่างต่อเนื่อง การทดสอบอัตโนมัติ และการมุ่งเน้นไปที่ความสามารถในการขยายขนาดและความน่าเชื่อถือ ช่วยให้มั่นใจได้ว่าบริการของเรายังคงความเป็นเลิศ ทำให้ผู้ใช้โหลดได้เร็วขึ้น และปรับปรุงประสบการณ์เว็บโดยรวมให้ดีขึ้น