Tags:
Node Thumbnail

กูเกิลอธิบายกระบวนการทำงานของ 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%) โดยสายตามนุษย์แยกไม่ออก

No Description

นอกจากนี้ กูเกิลยังมีโหมดพิเศษสำหรับ AMP ที่เรียกว่า AMP Lite คือบีบอัดขนาดให้เล็กลงไปอีก ใช้ในกรณีเปิดบนมือถือแรมน้อยหรือความเร็วเน็ตต่ำ ในกรณีแบบนี้ กูเกิลจะลดคุณภาพของภาพให้ต่ำที่สุด (50) และใช้แท็ก amp-font เพื่อแสดงผลฟอนต์ขึ้นมาก่อน โดยไม่สนใจว่าจะโหลดไฟล์ฟอนต์เสร็จหรือไม่ ช่วยให้แสดงเว็บเพจได้เร็วขึ้น

AMP Lite จะถูกใช้งานกับผู้ใช้ที่มีแบนด์วิดท์ต่ำในบางประเทศ (เช่น เวียดนาม) และใช้กับอุปกรณ์ที่มีแรมน้อยๆ เท่านั้น โดยเฉลี่ยแล้ว กูเกิลสามารถลดขนาดของเว็บเพจลงได้ 45% จากเทคนิคที่ว่ามาทั้งหมดนี้

ที่มา - Google Developers

Get latest news from Blognone

Comments

By: 077023
ContributoriPhoneAndroidWindows
on 14 January 2017 - 12:20 #964739
077023's picture

ภาพนี้ดูยังไงก็แยกออกนะ ว่าภาพไหนดีกว่า
แต่ว่าที่ไม่น่าเฃื่อคือขนาดต่างกัน 241,260 ไบต์ กับ 25,760 ไบต์


もういい

By: zerost
AndroidWindows
on 14 January 2017 - 12:33 #964741 Reply to:964739
zerost's picture

ดูเทียบกันช๊อตต่อช๊อตเทียบข้างๆผมก็พอมองออกครับ แต่ลองปิดข้างนึง มอง แล้วสลับมาปิดอีกข้างหลับตาซักพักแล้ว มอง ผมก็แยกไม่ค่อยออกนะครับ

By: Pinery
ContributoriPhoneAndroidIn Love
on 17 January 2017 - 11:04 #965079 Reply to:964739

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

By: Go-Kung
iPhoneWindows PhoneAndroidBlackberry
on 17 January 2017 - 11:35 #965089 Reply to:964739

ถ้านั่งเพ่งแบบ A:B ยังพอเห็นนิดๆครับ

แต่การใช้งานจริงเราจะเป็นแต่ B ซึ่งไม่มีตัวเปรียบเทียบ
จะเรียกว่าตรงตามที่ google เคลมไว้ก็ยังถือว่าถูกแหละครับ
เทียบ % ของ loss กับ quality ที่ยังได้อยู่นี่เรียกว่ามีประโยชน์มากจริงๆ

By: winit_a on 14 January 2017 - 13:01 #964746

ถ้ามองผ่านๆไม่สังเกตหรือจ้องจับผิด ดูไม่ออกหรอก
ถือว่าทำได้ดี ประหยัดข้อมูลรับส่งที่สำคัญสุดคือเวลา

By: nrml
ContributorIn Love
on 14 January 2017 - 13:02 #964747
nrml's picture

ช่วยประหยัดทรัพยากรโลกไปได้เยอะเลย

By: Jirawat
Android
on 14 January 2017 - 13:51 #964751
Jirawat's picture

แจ่มมากครับ

By: paijc
ContributorWindows PhoneAndroidUbuntu
on 14 January 2017 - 16:26 #964763

ตอนนี้อยู่เวียดนามเข้าใจเลยครับว่า bandwidth ต่ำเป็นยังไง

By: Slimy
AndroidUbuntu
on 14 January 2017 - 23:04 #964811

งั้นก็แสดงว่ารูปที่ save ลงเครื่องก็ไม่ใช่ตัวสำเนาจากของจริง ๆ ที่อยู่บนเว็บสิ

By: aeksael
ContributoriPhoneWindows PhoneAndroid
on 15 January 2017 - 05:48 #964823 Reply to:964811
aeksael's picture

+1 รู้สึกเสียดาย


The Last Wizard Of Century.

By: McKay
ContributorAndroidWindowsIn Love
on 15 January 2017 - 07:15 #964825 Reply to:964811
McKay's picture

เป็นเฉพาะการแสดงผลแบบ AMP ครับ


Russia is just nazi who accuse the others for being nazi.
someone once said : ผมก็ด่าของผมอยู่นะ :)