การปรับปรุง Google Search ด้วยพจนานุกรมการบีบอัด

Carlos Mateo Muñoz

Barry Pollard

เผยแพร่: 14 พฤษภาคม 2025

Compression Dictionary Transport เป็นมาตรฐานใหม่ที่ช่วยให้เราบีบอัดเนื้อหาที่ซ้ำกันตามคำขอได้ และเปิดตัวใน Chrome 130 เมื่อช่วงปลายปี 2024 Google Search ใช้เทคโนโลยีใหม่นี้และได้รับการปรับปรุงอย่างมาก

โอกาส

หน้าเว็บที่เราเข้าชมมีหน้าซ้ำกันเป็นจำนวนมาก หน้าเว็บจํานวนมากในเว็บไซต์เดียวกันประกอบด้วยโค้ดเดียวกันส่วนใหญ่ ไม่ว่าจะเป็น HTML, CSS หรือ JavaScript โดยมีเพียงเนื้อหาที่อยู่ตรงกลางโค้ดทั้งหมดนี้เท่านั้นที่เปลี่ยนแปลง แม้ว่าผลลัพธ์แต่ละรายการจะเกิดจากการผสมผสานฟีเจอร์หลายร้อยรายการที่ไม่ซ้ำกันซึ่งส่งผลให้มีเนื้อหาที่ไม่ซ้ำกันโดยสิ้นเชิง แต่รหัสที่ส่งไปยังเบราว์เซอร์เพื่อสร้างผลลัพธ์เหล่านี้ก็ยังมีจุดร่วมอยู่มาก

หน้าผลการค้นหาส่วนใหญ่มีลักษณะคล้ายกันไม่ว่าจะป้อนคำค้นหาใดก็ตาม โดยที่ด้านบนจะมีโลโก้ Google แถบค้นหา และการควบคุมบางอย่าง ตรงกลางจะมีแท็บสำหรับประเภทการค้นหา จากนั้นจะมีรายการผลการค้นหาทางด้านซ้ายสลับกับวิดเจ็ตต่างๆ เพื่อช่วยผู้ใช้ และบริบทเพิ่มเติมทางด้านขวาที่มีแผง "เกี่ยวกับ"

สุดท้ายที่ด้านล่าง เรามีตัวเลือกการแบ่งหน้าและส่วนท้ายมาตรฐาน นี่เป็นแค่สิ่งที่มองเห็นได้ เบื้องหลังมีโค้ดจำนวนมาก (HTML, CSS และ JavaScript) ที่ใช้สร้างหน้านี้ โค้ดส่วนใหญ่นี้จะแทรกไว้ใน HTML ของหน้าเว็บโดยตรงเพื่อเพิ่มประสิทธิภาพ แม้ว่าวิธีนี้จะช่วยให้หน้าเว็บโหลดเร็วขึ้น แต่ก็มีค่าใช้จ่ายในการไม่แชร์โค้ดนั้นระหว่างหน้าผลการค้นหาต่างๆ ดังที่ทรัพยากรที่แคชไว้ภายนอกจะทำได้

การบีบอัดบนเว็บ

การบีบอัดเป็นเทคโนโลยีที่ใช้กันอย่างแพร่หลายในเว็บ การบีบอัดทรัพยากรด้วย gzip หรืออัลกอริทึมใหม่ๆ เช่น Brotli หรือ Zstandard จะช่วยให้หลีกเลี่ยงการซ้ำกันภายในไฟล์ได้ด้วยการบีบอัดแบบไม่สูญเสียข้อมูลเพื่อบรรจุข้อมูลทั้งหมดให้แน่นที่สุดบนเซิร์ฟเวอร์ก่อนที่จะส่ง จากนั้นเบราว์เซอร์จะแตกไฟล์ไบต์ที่บีบอัดเพื่อกู้คืนเนื้อหาต้นฉบับได้ สําหรับรูปภาพ การบีบอัดแบบสูญเสียคุณภาพจะให้ประโยชน์ที่คล้ายกันด้วยการนําไบต์ส่วนเกินออกซึ่งผู้ใช้อาจไม่สังเกตเห็นความแตกต่าง

จนกระทั่งเมื่อไม่นานมานี้ การบีบอัดบนเว็บถูกจำกัดไว้ที่การบีบอัดภายในทรัพยากร ไม่สามารถบีบอัดทรัพยากรต่างๆ และยิ่งกว่านั้น ไม่สามารถบีบอัดหน้าเว็บต่างๆ ปัญหานี้เป็นที่รู้จักกันมานานแล้วว่าเป็นสิ่งที่วิศวกรเว็บพยายามแก้ไข

การรับส่งพจนานุกรมการบีบอัดช่วยแก้ปัญหาได้

การรับส่งพจนานุกรมการบีบอัดเป็นมาตรฐานใหม่ที่ช่วยในการบีบอัดทรัพยากรต่างๆ โดยใช้ "พจนานุกรม" ที่แชร์ ซึ่งช่วยให้แทนที่ชุดไบต์ทั่วไปด้วยข้อมูลอ้างอิงจากพจนานุกรมที่แชร์นั้นได้

อัลกอริทึมการบีบอัดสมัยใหม่อย่าง Brotli และ Zstandard รองรับการใช้พจนานุกรมของคำทั่วไปที่ช่วยให้บีบอัดได้มากขึ้นด้วยการแทนที่คำเหล่านั้นด้วยการอ้างอิงพจนานุกรมที่มีขนาดเล็กลง Brotli ยังมีพจนานุกรมของคำศัพท์ทั่วไปในเว็บที่ติดตั้งมาด้วย การรับส่งพจนานุกรมการบีบอัดจะต่อยอดจากหลักการนี้โดยให้วิธีแก่เซิร์ฟเวอร์และเบราว์เซอร์ในการแชร์พจนานุกรมที่กำหนดเอง

พจนานุกรมที่กำหนดเองอาจเป็นทรัพยากรที่ใช้อยู่ในเว็บไซต์อยู่แล้ว เช่น คุณสามารถใช้ app.v1.js เป็นพจนานุกรมเมื่อดาวน์โหลด app.v2.js เพื่อดาวน์โหลดเฉพาะส่วนต่าง (มักเรียกว่า "การบีบอัด Delta") หรือจะระบุแหล่งข้อมูลพจนานุกรมแยกต่างหากด้วยแท็ก <link rel="compression-dictionary"> (หรือส่วนหัว HTTP Link ที่เทียบเท่า) ก็ได้

วิธีนี้ช่วยลดขนาดการดาวน์โหลดของทรัพยากรที่มีเนื้อหาหรือโค้ดที่แชร์จำนวนมากได้อย่างมาก เช่น หน้าผลการค้นหาของ Search ที่กล่าวถึงก่อนหน้านี้

การใช้พจนานุกรมการบีบอัดของ Google Search

ทีม Google Search มุ่งมั่นที่จะปรับปรุงประสิทธิภาพของ Search อย่างต่อเนื่อง โดยเป็นผู้ใช้พจนานุกรมการบีบอัดตั้งแต่เนิ่นๆ เนื่องจากเห็นศักยภาพของเทคโนโลยีนี้

Search ใช้การบีบอัด Brotli ที่แชร์สำหรับหน้าผลการค้นหาด้วยไฟล์พจนานุกรมแยกต่างหากซึ่งสร้างขึ้นจากตัวอย่างที่แสดงถึงผลการค้นหา ไปป์ไลน์อัตโนมัติที่มีประสิทธิภาพช่วยให้มั่นใจได้ว่าพจนานุกรมจะทันสมัยอยู่เสมอ ทันกับเนื้อหา SRP ที่เปลี่ยนแปลงบ่อยซึ่งเผยแพร่หลายครั้งต่อวัน คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูวิธีการทํางานนี้ได้อย่างละเอียด

เมื่อไคลเอ็นต์โหลดหน้าผลการค้นหาเป็นครั้งแรก เซิร์ฟเวอร์จะระบุลิงก์ไปยังพจนานุกรมโดยใช้ส่วนหัว HTTP Link: ที่มีประเภท rel=compression-dictionary ดังนี้

หากไคลเอ็นต์รองรับการบีบอัดพจนานุกรม Brotli แต่ยังไม่ได้แคชพจนานุกรมที่แชร์ไว้ เบราว์เซอร์จะดาวน์โหลดพจนานุกรมนี้ในช่วงเวลาที่ไม่มีการใช้งาน การตอบกลับของพจนานุกรมจะมีส่วนหัวการตอบกลับ Use-As-Dictionary ซึ่งบอกเบราว์เซอร์ว่าทรัพยากรใดบ้างที่ใช้พจนานุกรมนี้ได้

พจนานุกรมจะใช้ความหมายของ cache-control มาตรฐานและจะใช้กับทรัพยากรที่ตรงกับกฎที่กําหนดไว้ในส่วนหัวนั้น ในตัวอย่างนี้หน้าเว็บที่ขึ้นต้นด้วย /search

สำหรับการโหลดหน้าผลการค้นหาในอนาคต เบราว์เซอร์จะบอกเซิร์ฟเวอร์ได้ว่ามีพจนานุกรมโดยใช้ส่วนหัวคำขอ HTTP Available-Dictionary การโหลดหน้าเว็บซ้ำจะแสดงการดำเนินการนี้

เมื่อเปิดใช้ช่องทําเครื่องหมายเก็บบันทึกและกรองแล้ว เราจะเปรียบเทียบคําตอบ 2 รายการได้ดังนี้

ในตัวอย่างนี้ คำขอแรกเป็นการตอบกลับขนาดเต็ม 107 kB และใช้การบีบอัด Brotli (br) ส่วนคำขอโหลดซ้ำครั้งที่ 2 มีขนาดใหญ่เกือบครึ่งที่ 60 kB และใช้การบีบอัด Brotli (dcb) แบบพจนานุกรม ซึ่งทำให้เวลาในการดาวน์โหลดเร็วขึ้น

ใน Chrome คุณสามารถดูหน้า chrome://net-internals/#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

ซึ่งต้องมีการตั้งค่าบางอย่างในเซิร์ฟเวอร์หรือกระบวนการสร้างเพื่อสร้างทรัพยากรที่บีบอัดตามพจนานุกรมและแสดงตามความเหมาะสม แต่ผลลัพธ์ที่ได้จะน่าประทับใจมากในแง่ของประสิทธิภาพ