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