เผยแพร่เมื่อ: 14 พฤษภาคม 2025
การรับส่งข้อมูลพจนานุกรมการบีบอัด เป็นมาตรฐานใหม่ที่ช่วยให้เราบีบอัดเนื้อหาที่ซ้ำกันในคำขอต่างๆ ได้ และเปิดตัวใน Chrome 130 เมื่อปลายปี 2024 Google Search ได้นำเทคโนโลยีใหม่นี้มาใช้และเห็นการปรับปรุงอย่างมาก
โอกาส
หน้าเว็บที่เราเข้าชมมีการทำซ้ำกันเป็นจำนวนมาก หน้าเว็บจำนวนมากในเว็บไซต์เดียวกันประกอบด้วยโค้ดส่วนใหญ่ที่เป็นโค้ดเดียวกัน ไม่ว่าจะเป็น HTML, CSS หรือ JavaScript โดยมีเพียงเนื้อหาที่อยู่ระหว่างโค้ดทั้งหมดนี้เท่านั้นที่เปลี่ยนแปลง แม้ว่าผลการค้นหาแต่ละรายการจะเป็นการผสมผสานที่ไม่ซ้ำกันของฟีเจอร์หลายร้อยรายการ ซึ่งส่งผลให้เกิดเนื้อหาที่ไม่ซ้ำกันโดยสิ้นเชิง แต่โค้ดที่ส่งไปยังเบราว์เซอร์เพื่อสร้างผลการค้นหาเหล่านั้นก็ยังมีความคล้ายคลึงกันอยู่มาก
ในแง่ของภาพ ผลการค้นหาของ Search ส่วนใหญ่จะคล้ายกันไม่ว่าคำค้นหาที่ป้อนจะเป็นอะไรก็ตาม โดยที่ด้านบนจะมีโลโก้ Google, แถบค้นหา และการควบคุมบางอย่าง ตรงกลางจะมีแท็บบางแท็บสำหรับประเภทการค้นหา จากนั้นจะมีรายการผลการค้นหาทางด้านซ้ายซึ่งคั่นด้วยวิดเจ็ตต่างๆ เพื่อช่วยเหลือผู้ใช้ และบริบทเพิ่มเติมทางด้านขวาพร้อมแผง "เกี่ยวกับ" ดังนี้
และสุดท้ายที่ด้านล่างจะมีตัวเลือกการแบ่งหน้าและส่วนท้ายมาตรฐาน นี่เป็นเพียงสิ่งที่มองเห็นได้เท่านั้น เบื้องหลังยังมีโค้ด (HTML, CSS และ JavaScript) อีกมากมายที่ใช้สร้างหน้าเว็บนี้ โค้ดจำนวนมากถูกฝังไว้ใน HTML ของหน้าเว็บโดยตรงเพื่อเพิ่มประสิทธิภาพ แม้ว่าวิธีนี้จะช่วยให้การโหลดหน้าเว็บเร็วขึ้น แต่ก็ต้องแลกมาด้วยการไม่แชร์โค้ดดังกล่าวระหว่างหน้าผลการค้นหาต่างๆ ซึ่งแตกต่างจากทรัพยากรที่แคชไว้ภายนอก
การบีบอัดบนเว็บ
การบีบอัดเป็นเทคโนโลยีที่ใช้กันอย่างแพร่หลายสำหรับเว็บ การบีบอัดทรัพยากรด้วย gzip หรืออัลกอริทึมใหม่กว่าอย่าง Brotli หรือ Zstandard จะช่วยหลีกเลี่ยงการทำซ้ำภายในไฟล์ด้วยการบีบอัดแบบไม่สูญเสียข้อมูลเพื่อบีบอัดข้อมูลทั้งหมดให้แน่นที่สุดเท่าที่จะเป็นไปได้บนเซิร์ฟเวอร์ก่อนที่จะส่ง จากนั้นเบราว์เซอร์จะคลายการบีบอัดไบต์เพื่อกู้คืนเนื้อหาต้นฉบับ สำหรับการบีบอัดรูปภาพ การบีบอัดแบบสูญเสียข้อมูลจะให้ประโยชน์ที่คล้ายกันโดยการนำไบต์พิเศษที่ผู้ใช้อาจไม่รู้สึกถึงความแตกต่างออก
จนกระทั่งเมื่อไม่นานมานี้ การบีบอัดบนเว็บถูกจำกัดอยู่เพียงการบีบอัดภายในทรัพยากร ไม่สามารถบีบอัดทรัพยากรต่างๆ ได้ และแน่นอนว่าไม่สามารถบีบอัดหน้าเว็บต่างๆ ได้ ข้อจำกัดนี้ได้รับการยอมรับมานานแล้ว และวิศวกรเว็บก็พยายามแก้ไข
การรับส่งข้อมูลพจนานุกรมการบีบอัดมาช่วยแล้ว
การรับส่งข้อมูลพจนานุกรมการบีบอัดเป็นมาตรฐานใหม่ที่ช่วยให้บีบอัดทรัพยากร ต่างๆ ได้โดยใช้ "พจนานุกรม" ที่แชร์ ซึ่งช่วยให้แทนที่ชุดไบต์ที่พบบ่อยด้วยการอ้างอิงจากพจนานุกรมที่แชร์นั้น
อัลกอริทึมการบีบอัดสมัยใหม่ เช่น Brotli และ Zstandard รองรับการใช้พจนานุกรมของคำที่พบบ่อย ซึ่งช่วยให้บีบอัดได้มากขึ้นโดยการแทนที่คำเหล่านั้นด้วยการอ้างอิงที่เล็กลงไปยังพจนานุกรม Brotli ยังมาพร้อมกับพจนานุกรมในตัวของคำที่พบบ่อยบนเว็บ การรับส่งข้อมูลพจนานุกรมการบีบอัดสร้างขึ้นจากสิ่งนี้โดยการจัดหาวิธีให้เซิร์ฟเวอร์และเบราว์เซอร์แชร์พจนานุกรมที่กำหนดเอง
พจนานุกรมที่กำหนดเองอาจเป็นทรัพยากรที่ใช้ในเว็บไซต์อยู่แล้ว ตัวอย่างเช่น คุณสามารถใช้ app.v1.js เป็นพจนานุกรมเมื่อดาวน์โหลด app.v2.js เพื่อดาวน์โหลดเฉพาะส่วนที่แตกต่างกัน (มักเรียกว่า "การบีบอัดแบบเดลต้า") หรือจะระบุทรัพยากรพจนานุกรมแยกต่างหากด้วยแท็ก <link rel="compression-dictionary"> (หรือส่วนหัว HTTP Link ที่เทียบเท่า) ก็ได้
วิธีนี้จะช่วยลดขนาดการดาวน์โหลดทรัพยากรที่มีเนื้อหาหรือโค้ดที่แชร์กันเป็นจำนวนมากได้อย่างมาก เช่น หน้าผลการค้นหาที่กล่าวถึงก่อนหน้านี้
การใช้พจนานุกรมการบีบอัดของ Google Search
ทีม Google Search พยายามปรับปรุงประสิทธิภาพของ Search อย่างต่อเนื่อง และเป็นผู้ใช้พจนานุกรมการบีบอัดรายแรกๆ เนื่องจากเห็นศักยภาพของเทคโนโลยีนี้
Search ใช้การบีบอัด Brotli ที่แชร์สำหรับหน้าผลการค้นหา โดยมีไฟล์พจนานุกรมแยกต่างหากที่สร้างขึ้นจากตัวอย่างซึ่งเป็นตัวแทนของทั้งหมดของผลการค้นหา ไปป์ไลน์อัตโนมัติที่มีประสิทธิภาพช่วยให้พจนานุกรมเป็นเวอร์ชันล่าสุดอยู่เสมอ โดยตามทันเนื้อหา SRP ที่เปลี่ยนแปลงบ่อยซึ่งเผยแพร่หลายครั้งต่อวัน คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูวิธีการทำงานของฟีเจอร์นี้ได้อย่างชัดเจน
เมื่อไคลเอ็นต์โหลดหน้าผลการค้นหาเป็นครั้งแรก เซิร์ฟเวอร์จะระบุลิงก์ไปยังพจนานุกรมโดยใช้ส่วนหัว HTTP Link: ที่มีประเภท rel=compression-dictionary ดังนี้
Link ในแท็บเครือข่ายหากไคลเอ็นต์รองรับการบีบอัดพจนานุกรม Brotli แต่ยังไม่ได้แคชพจนานุกรมที่แชร์ เบราว์เซอร์จะดาวน์โหลดพจนานุกรมนี้ในช่วงเวลาที่ไม่ได้ใช้งาน การตอบสนองของพจนานุกรมมีส่วนหัวการตอบกลับ Use-As-Dictionary ซึ่งจะบอกเบราว์เซอร์ว่าทรัพยากรใดที่สามารถใช้พจนานุกรมนี้ได้ ดังนี้
Use-As-Dictionary ในแท็บเครือข่ายพจนานุกรมจะใช้ความหมายของ cache-control มาตรฐานและจะพร้อมใช้งานสำหรับทรัพยากรใดก็ตามที่ตรงกับกฎที่กำหนดไว้ในส่วนหัวนั้น ในตัวอย่างนี้คือหน้าเว็บที่ขึ้นต้นด้วย /search
สำหรับการโหลดหน้าผลการค้นหาในอนาคต เบราว์เซอร์สามารถบอกเซิร์ฟเวอร์ว่ามีพจนานุกรมโดยใช้ส่วนหัวของคำขอ HTTP Available-Dictionary การโหลดหน้าเว็บซ้ำจะแสดงการทำงานของฟีเจอร์นี้ ดังนี้
Available-Dictionary ในแท็บเครือข่ายเมื่อเลือกช่องทำเครื่องหมายเก็บรักษาบันทึก และเปิดใช้การกรอง เราจะเปรียบเทียบการตอบสนอง 2 รายการได้ ดังนี้
ในตัวอย่างนี้ คำขอแรกเป็นการตอบสนองแบบเต็มขนาด 107 kB และใช้การบีบอัด Brotli (br) ส่วนคำขอโหลดซ้ำที่ 2 มีขนาดเกือบครึ่งหนึ่งที่ 60 kB และใช้การบีบอัด Brotli ที่บีบอัดด้วยพจนานุกรม (dcb) ซึ่งส่งผลให้ใช้เวลาดาวน์โหลดเร็วขึ้น
ใน Chrome คุณสามารถดูหน้า chrome://net-internals/#sharedDictionary เพื่อดูพจนานุกรมที่แชร์และล้างพจนานุกรมเหล่านั้นได้หากต้องการทำตามตัวอย่างนี้ตั้งแต่ต้น
#sharedDictionaryผลลัพธ์
การเปลี่ยนแปลงนี้เปิดตัวให้ผู้ใช้ Search ในฤดูใบไม้ผลิปี 2025 โดยเริ่มจากผู้ใช้ Chrome ซึ่งช่วยลดขนาดเพย์โหลด HTML เฉลี่ยของผู้ใช้ Chrome ทุกรายลง 23% เมื่อเทียบกับการบีบอัด Brotli มาตรฐาน ค่าเฉลี่ยโดยรวมนี้รวมถึงผลการค้นหาที่ไม่ได้บีบอัดด้วยพจนานุกรม (เช่น ผู้ใช้ครั้งแรกที่ไม่มีพจนานุกรม) และผลการค้นหาที่บีบอัดด้วยพจนานุกรม สำหรับผลการค้นหาที่บีบอัดด้วยพจนานุกรม การประหยัดจะมากขึ้นไปอีก ดังที่เราเห็นจากการปรับปรุงเกือบ 50% ในตัวอย่างก่อนหน้านี้
ซึ่งส่งผลให้ Largest Contentful Paint (LCP) โดยรวมดีขึ้น 1.7% และดีขึ้นสูงสุด 9% ในเครือข่ายที่มีเวลาในการรับส่งข้อมูลสูง ตัวเลขนี้อาจดูน้อย แต่ Google Search เป็นเว็บไซต์ที่ได้รับการเพิ่มประสิทธิภาพอย่างมาก ดังนั้นการปรับปรุงในระดับนี้จึงถือว่ามาก เว็บไซต์อื่นๆ อาจเห็นการปรับปรุงที่มากขึ้นด้วยเทคโนโลยีนี้
ลองใช้ในเว็บไซต์ของคุณ
การรับส่งข้อมูลพจนานุกรมการบีบอัดพร้อมใช้งานแล้วในเบราว์เซอร์ที่ใช้ Chromium ทั้งหมด (Chrome, Edge, Opera และอื่นๆ) ซึ่งเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องซึ่งเบราว์เซอร์ที่ไม่รองรับจะละเว้น แต่เมื่อมีเบราว์เซอร์รองรับมากขึ้น เบราว์เซอร์เหล่านั้นก็จะได้รับประโยชน์ด้วย
ความท้าทายที่เทคโนโลยีนี้ช่วยแก้ปัญหาไม่ได้จำกัดอยู่เพียง Google Search เว็บไซต์จำนวนมากจะได้รับประโยชน์จากการรับส่งข้อมูลพจนานุกรมการบีบอัด ไม่ว่าจะใช้พจนานุกรมแยกต่างหากเหมือนที่ Search ใช้ หรือใช้ทรัพยากรที่มีอยู่เป็นพจนานุกรม (เช่น แอปเวอร์ชันก่อนหน้าเมื่อเปิดตัวเวอร์ชันใหม่)
ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของเทคโนโลยีนี้และวิธีนำไปใช้ในเว็บไซต์ของคุณได้ในคู่มือบน MDN
การดำเนินการนี้ต้องมีการตั้งค่าบางอย่างในเซิร์ฟเวอร์หรือกระบวนการบิลด์เพื่อสร้างทรัพยากรที่บีบอัดตามพจนานุกรมและแสดงทรัพยากรเหล่านั้นตามความเหมาะสม แต่ผลลัพธ์ที่ได้อาจน่าประทับใจอย่างมากในแง่ของประสิทธิภาพ