กูเกิลอธิบายกระบวนการทำงานของ AMP Cache ที่ฝั่งเซิร์ฟเวอร์ของกูเกิล ว่าหลังจากเว็บไซต์ทำเพจเวอร์ชัน AMP และเซิร์ฟเวอร์ของกูเกิลมาดูดข้อมูลไปแล้ว ฝั่งกูเกิลเองส่งเพจเหล่านี้ไปยังผู้ใช้อย่างไร ถึงทำความเร็วได้มาก
หลักการทำงานที่สำคัญของ Google AMP Cache คือบีบขนาดของไฟล์ภาพให้เล็กลง โดยใช้เทคนิคหลายอย่างร่วมกัน ได้แก่
- แปลงไฟล์ภาพ JPEG เป็น WebP ถ้าเบราว์เซอร์รองรับ ลดขนาดลงได้ 25% โดยไม่เสียคุณภาพ
- ลดขนาดไฟล์ JPEG ในระดับที่สายตามนุษย์แยกไม่ได้ โดยลดคุณภาพการบีบอัดเหลือ 85, แซมเปิลสีเหลือ 4:2:0 สามารถลดขนาดไฟล์ลงได้ 40% ขึ้นไป
- เพิ่มคุณสมบัติ srcset ในแท็ก amp-img เพื่อให้เบราว์เซอร์ปลายทางเลือกขนาดภาพได้เหมาะกับหน้าจอ
- ในบางกรณี (เช่น เปิดโหมด Data Saver ของ Chrome) กูเกิลจะลดขนาดไฟล์ JPEG ลงหนักมาก เหลือคุณภาพการบีบอัดเพียง 50 เท่านั้น
ตัวอย่างที่กูเกิลนำมาโชว์คือภาพต้นฉบับ (ซ้าย) มีขนาด 241,260 ไบต์ ส่วนภาพที่ปรับแต่งแล้ว (ขวา) เปลี่ยนฟอร์แมตเป็น WebP เหลือขนาดเพียง 25,760 ไบต์ (ลดลงไป 89%) โดยสายตามนุษย์แยกไม่ออก

นอกจากนี้ กูเกิลยังมีโหมดพิเศษสำหรับ AMP ที่เรียกว่า AMP Lite คือบีบอัดขนาดให้เล็กลงไปอีก ใช้ในกรณีเปิดบนมือถือแรมน้อยหรือความเร็วเน็ตต่ำ ในกรณีแบบนี้ กูเกิลจะลดคุณภาพของภาพให้ต่ำที่สุด (50) และใช้แท็ก amp-font เพื่อแสดงผลฟอนต์ขึ้นมาก่อน โดยไม่สนใจว่าจะโหลดไฟล์ฟอนต์เสร็จหรือไม่ ช่วยให้แสดงเว็บเพจได้เร็วขึ้น
AMP Lite จะถูกใช้งานกับผู้ใช้ที่มีแบนด์วิดท์ต่ำในบางประเทศ (เช่น เวียดนาม) และใช้กับอุปกรณ์ที่มีแรมน้อยๆ เท่านั้น โดยเฉลี่ยแล้ว กูเกิลสามารถลดขนาดของเว็บเพจลงได้ 45% จากเทคนิคที่ว่ามาทั้งหมดนี้
ที่มา - Google Developers
on
ภาพนี้ดูยังไงก็แยกออกนะ
077023 Sat, 14/01/2017 - 12:20
ภาพนี้ดูยังไงก็แยกออกนะ ว่าภาพไหนดีกว่า
แต่ว่าที่ไม่น่าเฃื่อคือขนาดต่างกัน 241,260 ไบต์ กับ 25,760 ไบต์
ดูเทียบกันช๊อตต่อช๊อตเทียบข้า
zerost Sat, 14/01/2017 - 12:33
In reply to ภาพนี้ดูยังไงก็แยกออกนะ by 077023
ดูเทียบกันช๊อตต่อช๊อตเทียบข้างๆผมก็พอมองออกครับ แต่ลองปิดข้างนึง มอง แล้วสลับมาปิดอีกข้างหลับตาซักพักแล้ว มอง ผมก็แยกไม่ค่อยออกนะครับ
เพราะภาพวางเทียบกันข้างๆ
Pinery Tue, 17/01/2017 - 11:04
In reply to ภาพนี้ดูยังไงก็แยกออกนะ by 077023
เพราะภาพวางเทียบกันข้างๆ ก็พอดูออก
แต่ถ้าเปิดเป็นภาพเดียวบนมือถือนี่ไม่รู้เลยว่ามันถูกบีบอัดมา
ถ้านั่งเพ่งแบบ A:B
Go-Kung Tue, 17/01/2017 - 11:35
In reply to ภาพนี้ดูยังไงก็แยกออกนะ by 077023
ถ้านั่งเพ่งแบบ A:B ยังพอเห็นนิดๆครับ
แต่การใช้งานจริงเราจะเป็นแต่ B ซึ่งไม่มีตัวเปรียบเทียบ
จะเรียกว่าตรงตามที่ google เคลมไว้ก็ยังถือว่าถูกแหละครับ
เทียบ % ของ loss กับ quality ที่ยังได้อยู่นี่เรียกว่ามีประโยชน์มากจริงๆ
ถ้ามองผ่านๆไม่สังเกตหรือจ้องจ
winit_a Sat, 14/01/2017 - 13:01
ถ้ามองผ่านๆไม่สังเกตหรือจ้องจับผิด ดูไม่ออกหรอก
ถือว่าทำได้ดี ประหยัดข้อมูลรับส่งที่สำคัญสุดคือเวลา
ช่วยประหยัดทรัพยากรโลกไปได้เย
nrml Sat, 14/01/2017 - 13:02
ช่วยประหยัดทรัพยากรโลกไปได้เยอะเลย
แจ่มมากครับ
Jirawat Sat, 14/01/2017 - 13:51
แจ่มมากครับ
ตอนนี้อยู่เวียดนามเข้าใจเลยคร
paijc Sat, 14/01/2017 - 16:26
ตอนนี้อยู่เวียดนามเข้าใจเลยครับว่า bandwidth ต่ำเป็นยังไง
งั้นก็แสดงว่ารูปที่ save
Slimy Sat, 14/01/2017 - 23:04
งั้นก็แสดงว่ารูปที่ save ลงเครื่องก็ไม่ใช่ตัวสำเนาจากของจริง ๆ ที่อยู่บนเว็บสิ
+1 รู้สึกเสียดาย
aeksael Sun, 15/01/2017 - 05:48
In reply to งั้นก็แสดงว่ารูปที่ save by Slimy
+1 รู้สึกเสียดาย
เป็นเฉพาะการแสดงผลแบบ AMP
McKay Sun, 15/01/2017 - 07:15
In reply to งั้นก็แสดงว่ารูปที่ save by Slimy
เป็นเฉพาะการแสดงผลแบบ AMP ครับ