- ในช่วงไม่กี่เดือนที่ผ่านมา ความเร็วของเว็บไซต์ GitHub บน เบราว์เซอร์ Safari ลดลงอย่างต่อเนื่อง
- โดยเฉพาะใน PR ขนาดใหญ่ หรือไฟล์โค้ดที่มีหลายพันบรรทัด การเรนเดอร์หน้าจอแทบจะเป็นไปไม่ได้
- พบอาการ ใช้โปรเซสเรนเดอร์ 100% ของเบราว์เซอร์, หน้าจอว่างขณะเลื่อน, และการทำงานของการค้นหา·คอมเมนต์ล่าช้าอย่างรุนแรง
- การ เปลี่ยนแปลง CSS และการใช้ transform ไปชนกับบั๊กด้านประสิทธิภาพของ Safari จนก่อให้เกิดปัญหา ขณะที่เบราว์เซอร์อื่นอย่าง Chrome ยังทำงานได้ดีกว่าเมื่อเทียบกัน
- แม้ WebKit จะมีการแพตช์ด้านประสิทธิภาพบางส่วนแล้ว แต่ก็มีการกล่าวถึงความจำเป็นที่ทีมฟรอนต์เอนด์ของ GitHub ต้องมีมาตรการชั่วคราวจนกว่าจะถึง Safari รุ่นถัดไป
พื้นหลังและปัญหาหลัก
- ช่วงหลังมานี้ เมื่อเข้าถึงเว็บไซต์ GitHub ด้วยเบราว์เซอร์ Safari จะเห็นอาการประสิทธิภาพตกลงอย่างชัดเจนโดยรวม
- โดยเฉพาะเมื่อเปิดดูการเปลี่ยนแปลง หลายพันบรรทัดขึ้นไป ใน Pull Request (PR) หรือสำรวจไฟล์โค้ดขนาดใหญ่ อาการหนักถึงขั้นเรนเดอร์ไม่ไหว
- ใน Activity Monitor พบว่า โปรเซสเรนเดอร์กิน CPU 100% และการเรนเดอร์หน้าเว็บช้ามากจนเวลาเลื่อนจะเห็นหน้าจอเป็นพื้นที่ว่าง
- ฟีเจอร์แบบโต้ตอบอย่างการค้นหาและคอมเมนต์ล่าช้าอย่างหนัก และแม้แต่การคลิกเช็กบ็อกซ์ระหว่างรีวิว PR ก็อาจใช้เวลาหลายวินาที
- อาการเดียวกันนี้เกิดแม้บน MacBook Pro รุ่นใหม่ที่ใช้ Apple Silicon ระดับสูง ขณะที่การใช้ Chrome หรือเบราว์เซอร์อื่นให้ประสบการณ์ที่ดีกว่ามาก
สาเหตุของปัญหาและการวิเคราะห์
- มีรายงานร้องเรียนร่วมกันจากผู้ใช้ Safari 18.6 (รวมถึงรุ่นเบต้า/Tech Preview)
- ผู้ใช้บางรายระบุว่าอาการประสิทธิภาพตกอย่างรุนแรงนี้เกิดขึ้น เฉพาะกับ GitHub ไม่ใช่กับ Safari โดยรวม
- มีการอธิบายว่าการใช้ CSS selector และ transform: translateY จำนวนมาก ชนตรงกับข้อจำกัดในการจัดการ GPU layer ของ Safari
- ฟรอนต์เอนด์ของ GitHub จัดวางทุกบรรทัดข้อความด้วย
transform: translateY ทำให้ Safari ต้องสร้าง GPU layer หลายพันชั้น
- ส่วน Chrome หากไม่มีแอนิเมชันลักษณะนี้ จะปรับแต่งการสร้าง layer ให้เหมาะสมกว่า จึงช้ากว่าน้อยกว่าเมื่อเทียบกัน
- มีวิธีชั่วคราวคือใช้สคริปต์เพื่อลบคุณสมบัติ transform ออก ซึ่งช่วยให้เร็วขึ้น แต่ความแม่นยำของตำแหน่งยังไม่สมบูรณ์
ประสบการณ์ผู้ใช้และรายงานที่หลากหลาย
- ผู้ใช้หลายรายบ่นว่า ทุกการโต้ตอบ เช่น เพิ่ม reviewer·label หรือแก้ไขคำอธิบาย PR ล้วนหน่วงเกินหลายวินาที
- เมื่อเข้าใช้งานผ่าน Safari, ทั้ง code browser และ UI ของระบบ autocomplete (เช่น search bar, command palette) จะช้ามาก
- มีกรณีบน iOS Safari ที่ฟังก์ชันของเบราว์เซอร์เอง เช่น ปุ่ม ย้อนกลับ แบบเนทีฟ ก็ทำงานไม่ถูกต้อง
- ด้านการเข้าถึง (VoiceOver) ก็ได้รับผลกระทบหนักจากประสิทธิภาพที่ตกลง จนผู้ใช้ที่มีความบกพร่องทางการมองเห็นแทบใช้งานไม่ได้
การแก้ไขและการรับมือ
- ฝั่ง WebKit (เอนจินของ Safari) เพิ่งมีการแพตช์บางส่วนสำหรับ ปัญหาประสิทธิภาพของ CSS/compositor นี้ แต่ก็ยังแก้ได้ไม่ทันทีจนกว่าจะถึง Safari รุ่นถัดไป
- มีการกล่าวถึงความจำเป็นที่จะต้องเสนอแนวทางรับมือบั๊กและสื่อสารเรื่องปัญหาประสิทธิภาพกับวิศวกร GitHub ล่วงหน้าก่อนกำหนดปล่อย Safari รุ่นถัดไป
- มีการมองว่าการเปลี่ยนแปลง UI ฝั่งฟรอนต์เอนด์หลายอย่าง (เช่น UI ไฟล์ที่เปลี่ยนใน PR, ฟีเจอร์ใหม่ ฯลฯ) เกี่ยวข้องโดยตรงกับอาการประสิทธิภาพตก
- ผู้ใช้บางรายหลบเลี่ยงปัญหาด้วย Graphite.dev, GitLab หรือ custom protocol router (เช่น Finicky, Velja เป็นต้น) รวมถึงการใช้ UI ทางเลือก
ความเห็นอื่น ๆ และเคล็ดลับจากผู้ใช้จริง
- มีคำแนะนำชั่วคราวว่า หลังสร้าง issue/PR บน Safari แล้ว ให้ใช้ฟังก์ชันเพิ่ม label แบบตารางแทน
- มีเสียงกังวลต่อ CSS ที่ซับซ้อนเกินไป การเปลี่ยนแปลงโครงสร้างวิศวกรรม และการมุ่งเน้น Chrome เพียงเบราว์เซอร์เดียว พร้อมย้ำความสำคัญของการรองรับหลายเบราว์เซอร์
- ผู้ใช้บางรายแสดงความเห็นเชิงวิจารณ์หรือเชิงขำขันต่อปัญหาประสิทธิภาพนี้ (และมีการเตือนให้ระวังการถกเถียงทางอารมณ์ที่ไม่จำเป็น)
- มีทั้งความเห็นภายในและภายนอกที่เสนอให้ทบทวนแนวทางพัฒนาฟรอนต์เอนด์ที่ต้องการการปรับแต่งประสิทธิภาพ และย้ำความสำคัญของการทดสอบข้ามหลายเบราว์เซอร์
บทสรุป
- การเปลี่ยนแปลงโครงสร้าง UI ล่าสุดของ GitHub และวิธีใช้ CSS ไปชนกับลักษณะการเรนเดอร์เฉพาะของ Safari จนก่อให้เกิดปัญหาร้ายแรงต่อการใช้งานเบราว์เซอร์บนแพลตฟอร์มทำงานร่วมกันที่เป็นมาตรฐานของอุตสาหกรรม
- ทั้ง WebKit และ GitHub จำเป็นต้องเร่งปรับปรุงอย่างจริงจัง และในระยะสั้นต้องให้ความสำคัญกับผู้ใช้ Safari และผู้ใช้ที่ต้องพึ่งพาฟีเจอร์การเข้าถึง
- ปัญหาด้านประสิทธิภาพนี้รุนแรงถึงระดับที่รบกวนงานพัฒนา และทำให้เกิดทั้งความเห็นพ้องและความไม่พอใจอย่างกว้างขวางในชุมชน
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
เว็บไซต์ Github ช้าทุกที่อยู่แล้ว โดยรวมแล้วคงเรียกว่าเป็นซอฟต์แวร์ที่ดีไม่ได้ทั้งในแง่ประสิทธิภาพหรือ UX/UI และให้ความรู้สึกว่าเป็นผลลัพธ์จาก KPI กับการวางแผนของคนหลายฝ่าย ส่วนที่ “ล้ำสมัย” ที่สุดอาจเป็นการที่มันคือโซเชียลเน็ตเวิร์กสำหรับนักพัฒนา แต่สำหรับงานพัฒนาประจำวันกลับธรรมดาเกินไปจนรู้สึกว่า Gitlab ดีกว่ามาก ปัญหานี้ไม่ใช่เพราะ Rails และการเอาเรื่องเทคโนโลยีมาห่อหุ้มเพื่อเลี่ยงประเด็นหลักก็ดูไม่ถูกต้อง
ทีม WebKit ได้ปล่อยการปรับปรุงปัญหาประสิทธิภาพของ Github ในช่วง 2 วันที่ผ่านมา ลิงก์ที่เกี่ยวข้อง ภายในทีมเองก็เคยสร้าง PR ขนาดใหญ่มากด้วย (มากกว่า 1000 ไฟล์) จนเพื่อนร่วมงานพูดกันว่า “เดี๋ยวถ้ามันเปิดขึ้นมาแล้วจะ approve ให้”
ทันทีที่ Microsoft เข้าซื้อ Github ก็แทบจะเปลี่ยน Github ไปเป็นการเรนเดอร์ด้วย JavaScript (SPA) ทันที ก่อนหน้านั้นแม้ปิด JavaScript บน Mac Mini ปี 2011 ก็ยังท่อง Github ได้ แต่ตอนนี้เปิด JS แล้วก็ยังใช้ Github ไม่ได้เพราะปัญหาความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า จะบอกว่าฝั่งไหนผิดกว่ากันก็ยาก แต่คิดว่าทั้งสองฝ่ายมีส่วนรับผิดชอบ ถึงจะเปลี่ยนไปใช้อุปกรณ์ใหม่ก็ได้ แต่ในบรรยากาศที่จงใจเลิกซัพพอร์ตอุปกรณ์เก่าและบีบให้ยอมรับ planned obsolescence มากกว่าความสามารถใช้งานในอนาคต มันทำให้ศรัทธาต่อ web standard เองก็สั่นคลอนด้วย
มีคนวิจารณ์ React เยอะ แต่ประเด็นนี้คือปัญหา
CSS transformแนะนำให้อ่านลิงก์ที่เกี่ยวข้องจริง ๆแนะนำให้ย้ายไป Forgejo, Codeberg, SourceHut เมื่อเทียบกับ Github และ Gitlab แล้วเร็วราวสายฟ้า Forgejo / Codeberg / SourceHut
สงสัยว่าทำไมปัญหาแบบนี้ถึงเกิดซ้ำในองค์กรใหญ่ได้เรื่อย ๆ ในการทดสอบกับเบราว์เซอร์หลัก ๆ ก็น่าจะเห็นปัญหาประสิทธิภาพชัดเจนอยู่แล้ว เลยไม่เข้าใจว่ามีใครอนุมัติให้ฝืนปล่อยออกมาได้อย่างไร
ในฐานะนักพัฒนา React อ่านเธรดนี้แล้วสัมผัสได้ถึงความเกลียดชังจากโลกภายนอก มีกับดักของ SPA เยอะมาก ทั้งกำหนดเวลาที่ไม่สมจริงและการยัด logic ฝั่ง backend มาไว้ฝั่ง frontend เลยสงสัยว่า React เองเป็นตัวเลือกที่ผิดตั้งแต่ต้นหรือเปล่า หรือจริง ๆ มี React app ที่ทำออกมาดีมากอยู่ไหม
รู้สึกว่าโลกคอมพิวติงโดยรวมทุกอย่างช้าลงหมด ต่อให้ใช้ Mac Studio M4 Max รุ่นล่าสุดพร้อม RAM 64GB ก็ยังรู้สึกว่าเว็บไซต์ทุกแห่งช้ากว่าสมัย MacBook Pro ปี 2011
ใน HN มักได้ยินว่าหลัง Github ย้าย UI ไป React แล้วมันช้าลง แต่อยากรู้ว่าเป็นแบบนั้นจริงหรือไม่ เพราะในโปรเจ็กต์เล็ก ๆ ยังไม่เห็นผลชัด จึงอยากได้หลักฐานที่แน่นอน
ไม่ใช่แค่ Safari แต่บน Firefox ก็ช้ามากเช่นกัน มี loading spinner โผล่ให้เห็นทั่ว ๆ ไป และการเปลี่ยนหน้าก็ใช้เวลานานกว่าเดิมมาก ไม่เข้าใจเลยว่าใช้ตัวชี้วัดอะไรถึงตัดสินใจเปลี่ยนจาก SSR ที่เดิมทำงานได้สมบูรณ์อยู่แล้วไปเป็น SPA