Nikkei เป็นธุรกิจสื่อที่น่าเชื่อถือที่สุดแห่งหนึ่งในญี่ปุ่น โดยมีประวัติการเผยแพร่ยาวนานกว่า 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 วินาที Nikkei ทราบว่าผู้ใช้บนอุปกรณ์เคลื่อนที่ 53% จะออกจากประสบการณ์การใช้งานหากใช้เวลาโหลดนานกว่า 3 วินาที จึงต้องการลดเวลาในการโหลดเพื่อมอบประสบการณ์ที่ดีขึ้น และเร่งการเติบโตของธุรกิจบนเว็บ
ความเร็วเป็นสิ่งสำคัญอย่างยิ่ง โดยเฉพาะอย่างยิ่งสำหรับข่าวการเงิน เราได้กำหนดให้ความเร็วเป็นหนึ่งในเมตริกหลัก และลูกค้าก็ชื่นชอบการเปลี่ยนแปลงนี้
ไทเฮ ชิเกมะโมริ ผู้จัดการฝ่ายกลยุทธ์ดิจิทัล
ผลลัพธ์
Nikkei ได้รับผลลัพธ์ด้านประสิทธิภาพที่น่าประทับใจ คะแนน Lighthouse เพิ่มขึ้น จาก 23 เป็น 82 การวัดเวลาในการโต้ตอบของเว็บไซต์ดีขึ้น 14 วินาที การเข้าชมทั่วไป ความเร็ว อัตรา Conversion และผู้ใช้ที่ใช้งานอยู่รายวันก็เพิ่มขึ้นด้วย
PWA เป็นแอปแบบหลายหน้า (MPA) ที่ช่วยลดความซับซ้อนของส่วนหน้า ซึ่งสร้างด้วย Vanilla JavaScript วิศวกรฟรอนต์เอนด์หลัก 5 คนทำงานเป็นเวลา 1 ปีเพื่อให้ได้ประสิทธิภาพนี้
วิศวกรฟรอนต์เอนด์ของ Nikkei ได้พิสูจน์แล้วว่า UX ที่ยอดเยี่ยมจะช่วยให้ธุรกิจมีประสิทธิภาพที่ดี เรามุ่งมั่นที่จะเดินทางต่อไปเพื่อ ยกระดับคุณภาพของเว็บให้สูงขึ้น
ฮิโรยูกิ ฮิกาชิ ผู้จัดการผลิตภัณฑ์ Nikkei
โซลูชัน
Nikkei สร้างและเปิดตัว Progressive Web App โดยใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ JavaScript แบบดั้งเดิม และสถาปัตยกรรมแบบหลายหน้า เพื่อมุ่งเน้นการสร้าง ประสบการณ์ของผู้ใช้ที่น่าพึงพอใจ การเพิ่ม Service Worker ช่วยให้สามารถ มอบประสิทธิภาพที่คาดการณ์ได้ ไม่ว่าจะเป็นเครือข่ายใดก็ตาม ซึ่งยังช่วยให้มั่นใจได้ว่าบทความยอดนิยมจะพร้อมใช้งานเสมอและโหลดเกือบจะทันทีเนื่องจากจัดเก็บไว้โดยใช้ Cache Storage โดยได้เพิ่มไฟล์ Manifest ของเว็บแอป และเมื่อรวมกับ Service Worker แล้ว จะช่วยให้ผู้ใช้ติดตั้ง PWA ได้ จึงเข้าถึงได้ง่าย และเพื่อให้มั่นใจว่าประสิทธิภาพอยู่ภายใต้การควบคุมของตนเองทั้งหมด จึงได้เพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สาม
แนวทางปฏิบัติแนะนำ
- ปรับปรุงความเร็วในการโหลดและการโต้ตอบโดยใช้ Web API สมัยใหม่ การบีบอัด และแนวทางปฏิบัติในการเพิ่มประสิทธิภาพโค้ด
- ค่อยๆ ปรับปรุง UX โดยการเพิ่มฟีเจอร์ PWA เช่น การรองรับแบบออฟไลน์ และเพิ่มลงในหน้าจอหลัก
- สร้างงบประมาณด้านประสิทธิภาพในกลยุทธ์ด้านประสิทธิภาพ
การเจาะลึกทางเทคนิค
ความเร็วเป็นสิ่งสำคัญ
ความเร็วมีความสำคัญมากกว่าที่เคย เมื่อสมาร์ทโฟนกลายเป็นอุปกรณ์หลักในการท่องเว็บสำหรับผู้ใช้จำนวนมาก Nikkei ก็เห็นว่าการเข้าชมบนอุปกรณ์เคลื่อนที่ในบริการของตนเพิ่มขึ้นอย่างรวดเร็ว แต่เมื่อใช้ Lighthouse พวกเขาพบว่า เว็บไซต์เดิมของตนยังไม่ได้ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่อย่างเต็มที่ โดยมีดัชนีความเร็วเฉลี่ย 10 วินาที การโหลดครั้งแรกช้ามาก และมีกลุ่ม JavaScript ขนาดใหญ่ ถึงเวลาที่ Nikkei ต้องสร้างเว็บไซต์ใหม่และปรับใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพเว็บ ผลลัพธ์และการเพิ่มประสิทธิภาพที่สำคัญ ใน PWA ใหม่มีดังนี้
ใช้ประโยชน์จาก Web API และแนวทางปฏิบัติแนะนำเพื่อเพิ่มความเร็วในการโหลด
โหลดคำขอที่สำคัญล่วงหน้า
การจัดลำดับความสำคัญของการโหลดเส้นทางวิกฤตเป็นสิ่งสำคัญ การใช้ HTTP/2 Server Push ช่วยให้สามารถจัดลำดับความสำคัญของ JavaScript และ CSS Bundle ที่สำคัญซึ่งทราบว่าผู้ใช้จะต้องใช้
หลีกเลี่ยงการเดินทางไปกลับหลายครั้งที่มีค่าใช้จ่ายสูงไปยังต้นทาง
เว็บไซต์จำเป็นต้องโหลดทรัพยากรของบุคคลที่สามเพื่อการติดตาม โฆษณา และกรณีการใช้งานอื่นๆ อีกมากมาย
โดยใช้
<link rel=preconnect>
เพื่อแก้ไข DNS/TCP/SSL Handshake และการเจรจาสำหรับต้นทางบุคคลที่สามที่สำคัญเหล่านี้ล่วงหน้า
ดึงข้อมูลหน้าถัดไปล่วงหน้าแบบไดนามิก
เมื่อมั่นใจว่าผู้ใช้จะไปยังหน้าเว็บหนึ่งๆ พวกเขา
ไม่ได้เพียงรอให้การไปยังส่วนต่างๆ เกิดขึ้น Nikkei จะเพิ่ม
<link rel=prefetch>
ลงใน <head> แบบไดนามิก และดึงข้อมูลหน้าถัดไปล่วงหน้าก่อนที่ผู้ใช้จะคลิกลิงก์จริง
ซึ่งจะช่วยให้ไปยังหน้าต่างๆ ได้ทันที
CSS เส้นทางวิกฤตแบบอินไลน์
การลด CSS ที่บล็อกการแสดงผลเป็นหนึ่งในแนวทางปฏิบัติแนะนำในการโหลดความเร็ว เว็บไซต์จะแทรก CSS ที่สำคัญทั้งหมดด้วย 0 สไตล์ชีตที่บล็อกการแสดงผล การเพิ่มประสิทธิภาพนี้ช่วยลดการแสดงผลที่มีความหมายครั้งแรกได้มากกว่า 1 วินาที
เพิ่มประสิทธิภาพแพ็กเกจ JavaScript
ในประสบการณ์การใช้งานก่อนหน้านี้ บันเดิล JavaScript ของ Nikkei มีขนาดใหญ่ มีน้ำหนักรวมกว่า 300 KB การเขียนใหม่เป็น JavaScript แบบเดิมและการเพิ่มประสิทธิภาพการจัดกลุ่มที่ทันสมัย เช่น การแบ่งกลุ่มตามเส้นทางและการกำจัดโค้ดที่ไม่ได้ใช้ ช่วยให้ลดขนาดของโค้ดที่ไม่จำเป็นนี้ได้ โดยลดขนาดกลุ่ม JavaScript ลง 80% เหลือ 60 KB ด้วย RollUp
แนวทางปฏิบัติแนะนำอื่นๆ ที่นำมาใช้
- การบีบอัด: Gzip/Brotli ทรัพยากรที่บีบอัดได้ทั้งหมดโดยใช้ Fastly CDN
- การแคช: เปิดใช้การแคช HTTP การแคชฝั่ง Edge
- การเพิ่มประสิทธิภาพรูปภาพ: ใช้ imgix เพื่อการเพิ่มประสิทธิภาพและการตรวจหารูปแบบรูปภาพ
- ใช้การโหลดแบบ Lazy Loading สำหรับทรัพยากรที่ไม่สำคัญ: ใช้ Intersection Observer API เพื่อโหลด Fragment ในครึ่งหน้าล่าง
- มีกลยุทธ์การโหลดแบบอักษรเว็บ: จัดลำดับความสำคัญของการใช้แบบอักษรของระบบ
- เพิ่มประสิทธิภาพการแสดงผลที่มีความหมายครั้งแรก แสดงเนื้อหาฝั่งเซิร์ฟเวอร์
- ใช้ขีดจํากัดด้านประสิทธิภาพ รักษาเวลาในการส่งและแยกวิเคราะห์/คอมไพล์ JavaScript ให้ต่ำ
การเพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สาม
แม้ว่าการเพิ่มประสิทธิภาพ JavaScript ของบุคคลที่สามจะไม่ง่ายเท่ากับสคริปต์ของคุณเอง แต่ Nikkei ก็ย่อขนาดและรวมสคริปต์ทั้งหมดที่เกี่ยวข้องกับโฆษณาได้สำเร็จ ซึ่งตอนนี้สคริปต์เหล่านั้นแสดงจากเครือข่ายนำส่งข้อมูล (CDN) ของตนเอง โดยปกติแล้ว แท็กที่เกี่ยวข้องกับโฆษณาจะให้ข้อมูลโค้ดเพื่อเริ่มต้นและโหลดสคริปต์อื่นๆ ที่จำเป็น ซึ่งมักจะบล็อกการแสดงหน้าเว็บและยังต้องใช้เวลาในการตอบสนองของเครือข่ายเพิ่มเติมสำหรับสคริปต์แต่ละรายการที่ดาวน์โหลด Nikkei ใช้แนวทางต่อไปนี้ และปรับปรุงเวลาเริ่มต้นได้ 100 มิลลิวินาที รวมถึงลดขนาด JS ลง 30%
- รวมสคริปต์ที่จำเป็นทั้งหมดโดยใช้ JS Bundler (เช่น Webpack)
- โหลดสคริปต์ที่รวมไว้แบบไม่พร้อมกัน เพื่อไม่ให้สคริปต์บล็อกการแสดงหน้าเว็บ
- แนบแบนเนอร์โฆษณาที่คำนวณแล้วกับ Shadow DOM (เทียบกับ iframe)
- โหลดโฆษณาเมื่อผู้ใช้เลื่อนโดยใช้ Intersection Observer API
การปรับปรุงเว็บไซต์อย่างต่อเนื่อง
นอกเหนือจากการเพิ่มประสิทธิภาพขั้นพื้นฐานเหล่านี้แล้ว Nikkei ยังใช้ประโยชน์จากไฟล์ Manifest ของเว็บแอปและService Worker เพื่อทำให้เว็บไซต์ติดตั้งได้และใช้งานแบบออฟไลน์ได้ด้วย การใช้กลยุทธ์แคชก่อน ใน Service Worker จะทำให้ระบบจัดเก็บทรัพยากรหลักและบทความยอดนิยมทั้งหมด ไว้ในที่เก็บข้อมูลแคชและนำกลับมาใช้ใหม่ได้แม้ในสถานการณ์ฉุกเฉิน เช่น เครือข่ายที่ไม่เสถียรหรือออฟไลน์ ซึ่งจะช่วยให้ประสิทธิภาพสอดคล้องและได้รับการเพิ่มประสิทธิภาพ
แฮ็กนิกเคอิ
บริษัทหนังสือพิมพ์รายวันแบบดั้งเดิมที่มีประวัติยาวนานกว่า 140 ปีได้เร่งการเปลี่ยนไปใช้ระบบดิจิทัล ผ่านพลังของเว็บและ PWA จนประสบความสำเร็จ วิศวกรฟรอนต์เอนด์ของ Nikkei พิสูจน์แล้วว่า UX ที่ยอดเยี่ยมช่วยให้ธุรกิจมีประสิทธิภาพสูง บริษัทจะยังคงมุ่งมั่นที่จะยกระดับคุณภาพของเว็บต่อไป