ด้วยประวัติการเผยแพร่เพลงมากว่า 140 ปี นิเกเก เป็นหนึ่งในธุรกิจสื่อที่น่าเชื่อถือที่สุดในญี่ปุ่น นอกจากหนังสือพิมพ์ฉบับพิมพ์แล้ว บริษัทมีผู้เข้าชมเว็บไซต์ดิจิทัลมากกว่า 450 ล้านครั้งต่อเดือน Nikkei ประสบความสำเร็จในการเปิดตัว Progressive Web App (PWA) เพื่อมอบประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นและเร่งการพัฒนาธุรกิจบนเว็บ ซึ่งhttps://r.nikkei.com - ในเดือนพฤศจิกายน 2017 ตอนนี้พวกเขาเห็นผลลัพธ์ ที่น่าทึ่งจากแพลตฟอร์มใหม่
ประสิทธิภาพเพิ่มขึ้น - ดัชนีความเร็วเพิ่มขึ้น 2 เท่า - ใช้เวลาโต้ตอบได้เร็วขึ้น 14 วินาที - โหลดได้เร็วขึ้น 75% ด้วยการดึงข้อมูลล่วงหน้า
ผลกระทบทางธุรกิจ - การเข้าชมจากการค้นหาทั่วไป 2.3 เท่า - Conversion (การสมัครใช้บริการ) เพิ่มขึ้น 58% - ผู้ใช้ที่ใช้งานอยู่รายวันเพิ่มขึ้น 49% - การดูหน้าเว็บต่อเซสชัน 2 เท่า
ดาวน์โหลดกรณีศึกษาในรูปแบบ PDF
ภาพรวมธุรกิจ
ชาเลนจ์
Nikkei เห็นว่าเว็บไซต์เก่าของบริษัทมีการเข้าชมบนอุปกรณ์เคลื่อนที่เพิ่มสูงขึ้นอย่างรวดเร็ว เนื่องจากสมาร์ทโฟนกลายเป็นจุดหลักในการเข้าถึงเว็บสำหรับผู้ใช้จำนวนมาก อย่างไรก็ตาม เมื่อใช้ Lighthouse ซึ่งเป็นเครื่องมือตรวจสอบที่สแกนหน้าเว็บและให้คำแนะนำในการปรับปรุงในหลายๆ หมวดหมู่ ทำให้บริษัททราบว่าเว็บไซต์ของตนไม่ได้เพิ่มประสิทธิภาพอย่างสมบูรณ์สำหรับอุปกรณ์เคลื่อนที่ในหลายพื้นที่และโหลดได้ช้ามาก
เว็บไซต์ใช้เวลาประมาณ 20 วินาทีเพื่อโต้ตอบอย่างสม่ำเสมอ และใช้เวลาเฉลี่ย 10 วินาทีในดัชนีความเร็ว เนื่องจากทราบว่าผู้ใช้อุปกรณ์เคลื่อนที่ 53% จะละทิ้งประสบการณ์หากใช้เวลาโหลดนานกว่า 3 วินาที แต่ Nikkei ต้องการลดเวลาที่ใช้ในการโหลดเพื่อมอบประสบการณ์ที่ดีขึ้นและเร่งการพัฒนาธุรกิจบนเว็บ
ความสำคัญของความเร็วเป็นเรื่องที่ยากจะโต้แย้ง โดยเฉพาะในเรื่องข่าวการเงิน เราเพิ่มความเร็วให้กับเมตริกหลัก ซึ่งลูกค้าก็ชื่นชอบการเปลี่ยนแปลงดังกล่าว
Taihei Shigemori ผู้จัดการฝ่ายกลยุทธ์ดิจิทัล
ผลลัพธ์
Nikkei มีประสิทธิภาพเพิ่มขึ้นอย่างน่าประทับใจ คะแนน Lighthouse พุ่งสูงขึ้นจาก 23 เป็น 82 การวัดผลเวลาในการโต้ตอบเพิ่มขึ้นถึง 14 วินาที การเข้าชมที่เกิดขึ้นเอง ความเร็ว อัตรา Conversion และผู้ใช้ที่ใช้งานอยู่รายวันต่างก็เพิ่มขึ้นเช่นกัน
PWA คือแอปแบบหลายหน้า (MPA) ที่ลดความซับซ้อนของส่วนหน้าที่สร้างด้วย Vanilla JavaScript วิศวกรหลักของ 5 คนทำงานมา 1 ปี เพื่อให้ได้ประสิทธิภาพนี้
วิศวกรส่วนหน้าของ Nikkei ได้พิสูจน์แล้วว่า UX ที่ยอดเยี่ยมจะช่วยส่งเสริมประสิทธิภาพทางธุรกิจที่ดี เราทุ่มเทอย่างเต็มที่กับการเดินทางเพื่อยกระดับคุณภาพเว็บไปอีกขั้น
Hiroyuki Higashi ผู้จัดการผลิตภัณฑ์ของ Nikkei
โซลูชัน
Nikkei สร้างและเปิดตัว Progressive Web App โดยใช้การออกแบบที่ตอบสนองตามอุปกรณ์, Vanilla JavaScript และสถาปัตยกรรมแบบหลายหน้าโดยมุ่งเน้นที่การสร้างประสบการณ์ของผู้ใช้ที่น่าสนใจ การเพิ่ม Service Worker จะช่วยให้พนักงานมอบประสิทธิภาพที่คาดการณ์ได้ไม่ว่าจะใช้เครือข่ายใดก็ตาม การทำเช่นนี้ยังทำให้มั่นใจได้ว่าบทความยอดนิยมจะพร้อมใช้งานอยู่เสมอและโหลดได้แทบจะในทันที เนื่องจากบทความเหล่านั้นจัดเก็บไว้โดยใช้พื้นที่เก็บข้อมูลแคช บริษัทได้เพิ่มไฟล์ Manifest ของเว็บแอป พร้อมด้วย Service Worker ที่ทำให้ผู้ใช้ติดตั้ง PWA ได้ ซึ่งทำให้เข้าถึงได้ง่าย และเพื่อให้มั่นใจว่าประสิทธิภาพอยู่ภายใต้การควบคุมของผู้ใช้อย่างเต็มที่ พวกเขาจึงได้เพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สาม
แนวทางปฏิบัติแนะนำ
- ปรับปรุงความเร็วในการโหลดและการโต้ตอบโดยใช้ API เว็บที่ทันสมัย การบีบอัด และแนวทางปฏิบัติในการเพิ่มประสิทธิภาพโค้ด
- ปรับปรุง UX อย่างต่อเนื่องด้วยการเพิ่มฟีเจอร์ PWA เช่น การรองรับแบบออฟไลน์และ "เพิ่มลงในหน้าจอหลัก"
- รวมงบประมาณด้านประสิทธิภาพไว้ในกลยุทธ์ด้านประสิทธิภาพ
ข้อมูลทางเทคนิคแบบเจาะลึก
ความเร็วเป็นเรื่องสำคัญ
ความเร็วสำคัญกว่าที่เคย เมื่อสมาร์ทโฟนกลายเป็นอุปกรณ์หลักในการท่องเว็บของหลายๆ คน Nikkei ก็พบว่าบริการของตนมีการเข้าชมจากอุปกรณ์เคลื่อนที่เพิ่มมากขึ้นอย่างรวดเร็ว แต่เมื่อใช้ Lighthouse พวกเขาพบว่าเว็บไซต์เดิมไม่ได้เพิ่มประสิทธิภาพอย่างเต็มที่สำหรับอุปกรณ์เคลื่อนที่ โดยมีดัชนีความเร็วเฉลี่ย 10 วินาที การโหลดครั้งแรกช้ามาก และมีแพ็กเกจ JavaScript ขนาดใหญ่ ถึงเวลาแล้วที่ Nikkei จะสร้างเว็บไซต์ขึ้นมาใหม่และปรับแนวทางปฏิบัติแนะนำด้านประสิทธิภาพของเว็บ ผลลัพธ์และการเพิ่มประสิทธิภาพหลัก ใน PWA ใหม่มีดังนี้
การใช้ประโยชน์จาก API ของเว็บและแนวทางปฏิบัติแนะนำเพื่อให้โหลดได้เร็วขึ้น
โหลดคำขอสำคัญล่วงหน้า
ให้ความสำคัญกับการโหลดเส้นทางวิกฤต การใช้ HTTP/2 Server Push ทำให้บริษัทสามารถจัดลำดับความสำคัญของกลุ่ม JavaScript และ CSS ที่สำคัญซึ่งผู้ใช้รู้ว่าจำเป็น
หลีกเลี่ยงการเดินทางไป-กลับที่มีค่าใช้จ่ายสูงหลายครั้งไปยังต้นทางต่างๆ
เว็บไซต์ต้องโหลดทรัพยากรของบุคคลที่สามสำหรับการติดตาม โฆษณา และกรณีการใช้งานอื่นๆ อีกมากมาย บริษัทใช้ <link rel=preconnect> เพื่อแปลงแฮนด์เชค DNS/TCP/SSL และการเจรจาล่วงหน้าสำหรับต้นทางหลักของบุคคลที่สามเหล่านี้
ดึงข้อมูลหน้าถัดไปล่วงหน้าแบบไดนามิก
เมื่อผู้ใช้มั่นใจว่าหน้าใดหน้าหนึ่งจะไปยังหน้าใดหน้าหนึ่งแล้ว พวกเขาก็ไม่ได้รอให้การนำทางเกิดขึ้น Nikkei จะเพิ่ม <link rel=prefetch> ใน <head> แบบไดนามิกและดึงข้อมูลหน้าถัดไปล่วงหน้าก่อนที่ผู้ใช้จะคลิกลิงก์ ซึ่งจะเป็นการเปิดใช้การนำทางหน้าเว็บแบบทันที
CSS เส้นทางวิกฤตในบรรทัด
การลด CSS ที่บล็อกการแสดงผลเป็นหนึ่งในแนวทางปฏิบัติแนะนำสำหรับการโหลดความเร็ว เว็บไซต์วาง CSS ที่สำคัญทั้งหมดด้วยสไตล์ชีตการบล็อกการแสดงผลเป็น 0 การเพิ่มประสิทธิภาพนี้ลดจำนวนการแสดงผลที่มีความหมายครั้งแรกได้นานกว่า 1 วินาที
เพิ่มประสิทธิภาพกลุ่ม JavaScript
จากประสบการณ์ก่อนหน้านี้ ชุดไฟล์ JavaScript ของ Nikkei มีขนาดพองโตกว่า 300 KB บริษัทสามารถตัดส่วนที่ขยายนี้ได้ด้วยการเขียนใหม่เป็น JavaScript วานิลลาและการเพิ่มประสิทธิภาพการรวมกลุ่มแบบสมัยใหม่ เช่น การแยกส่วนตามเส้นทางและการเขย่าต้นไม้ พวกเขาลดขนาด Bundle JavaScript ลง 80% เหลือแค่ 60 KB ด้วย RollUp
มีการใช้แนวทางปฏิบัติแนะนำอื่นๆ
- การบีบอัด: Gzip/Brotli ทรัพยากรที่บีบอัดได้ทั้งหมดโดยใช้ Fastly CDN
- การแคช: เปิดใช้การแคช HTTP การแคชด้านข้าง
- การเพิ่มประสิทธิภาพรูปภาพ: ใช้ imgix เพื่อเพิ่มประสิทธิภาพและตรวจหารูปแบบรูปภาพ
- การโหลดแบบ Lazy Loading ทรัพยากรที่ไม่สำคัญ: ใช้ Insection Observer API เพื่อโหลดส่วนย่อยครึ่งหน้าล่าง
- มีกลยุทธ์การโหลดแบบอักษรของเว็บ: จัดลำดับความสำคัญของการใช้แบบอักษรของระบบ
- เพิ่มประสิทธิภาพ First Meaningful Paint: แสดงผลฝั่งเซิร์ฟเวอร์เนื้อหา
- ใช้งบประมาณด้านประสิทธิภาพ: ลดเวลาในการส่ง JavaScript และแยกวิเคราะห์/คอมไพล์
การเพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สาม
แม้การเพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สามจะไม่ใช่เรื่องง่ายเมื่อเทียบกับสคริปต์ของคุณเอง แต่ Nikkei ได้ลดขนาดและรวมสคริปต์ที่เกี่ยวข้องกับโฆษณาทั้งหมดได้สำเร็จ ซึ่งขณะนี้ให้บริการจากเครือข่ายนำส่งข้อมูล (CDN) ของตนเอง แท็กที่เกี่ยวข้องกับโฆษณามักจะให้ข้อมูลโค้ดสำหรับการเริ่มต้นและโหลดสคริปต์อื่นๆ ที่จำเป็น ซึ่งมักจะบล็อกการแสดงผลหน้าเว็บและต้องใช้เวลาในการดำเนินการของเครือข่ายเพิ่มเติมสำหรับสคริปต์แต่ละรายการที่ดาวน์โหลด Nikkei ใช้วิธีการต่อไปนี้และปรับปรุงระยะเวลาการเริ่มต้นขึ้น 100 มิลลิวินาที และลดขนาด JS ลง 30%
- จัดกลุ่มสคริปต์ที่จำเป็นทั้งหมดโดยใช้ JS Bundler (เช่น Webpack)
- การโหลดสคริปต์ที่จัดกลุ่มให้ไม่พร้อมกันจะไม่บล็อกการแสดงหน้า
- แนบแบนเนอร์โฆษณาที่คำนวณแล้วลงใน Shadow DOM (เทียบกับ iframe)
- โหลดโฆษณาอย่างต่อเนื่องเมื่อเลื่อนของผู้ใช้ด้วย Intersection Observer API
การเพิ่มประสิทธิภาพเว็บไซต์อย่างต่อเนื่อง
นอกเหนือจากการเพิ่มประสิทธิภาพพื้นฐานเหล่านี้ Nikkei ยังใช้ประโยชน์จากไฟล์ Manifest ของเว็บแอปและโปรแกรมทำงานของบริการเพื่อทำให้เว็บไซต์ของตนติดตั้งได้และแม้แต่ทำงานแบบออฟไลน์ เมื่อใช้กลยุทธ์แคชเป็นหลักในโปรแกรมทำงานของบริการ ทรัพยากรหลักและบทความยอดนิยมทั้งหมดจะจัดเก็บอยู่ในพื้นที่เก็บข้อมูลแคชและนำมาใช้ซ้ำ แม้ในสถานการณ์ฉุกเฉิน เช่น เครือข่ายที่ไม่สม่ำเสมอหรือออฟไลน์ ให้ประสิทธิภาพที่สม่ำเสมอและมีประสิทธิภาพ
ตีนิกเกย์
บริษัทหนังสือพิมพ์รายวันแบบดั้งเดิมที่มีประวัติยาวนานกว่า 140 ปีประสบความสำเร็จในการเร่งการปรับไปสู่ระบบดิจิทัลผ่านพลังของเว็บและ PWA วิศวกรส่วนหน้าของ Nikkei พิสูจน์ให้เห็นว่า UX ที่ยอดเยี่ยมสร้างประสิทธิภาพที่ดีให้กับธุรกิจได้ บริษัทจะยังคงเดินหน้าต่อไปเพื่อยกระดับคุณภาพเว็บไปอีกขั้น