การอัปเดต AMP ล่าสุด 9 รายการที่ช่วยปรับปรุงประสบการณ์ผู้ใช้ให้เหนือกว่าความเร็วในการโหลดหน้าเว็บที่เร็วขึ้น

ตั้งแต่ Google ประกาศเปิดตัว AMP ในปี 2015 เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บและปรับปรุงประสบการณ์ของผู้ใช้อุปกรณ์พกพาโดยรวม — เฟรมเวิร์กโอเพนซอร์ซได้รับความนิยมเพิ่มขึ้นอย่างต่อเนื่อง

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

ต่อไปนี้คือการอัปเดต AMP ล่าสุดบางส่วน

9 AMP ที่คุณอาจยังไม่รู้

1. การแลกเปลี่ยนที่ลงนาม

เมื่อ AMP เกิดขึ้น Google ทำการแลกเปลี่ยนเพื่อส่งเนื้อหาเว็บโหลดทันทีที่รักษาความเป็นส่วนตัว หนึ่งคือ URL ที่แสดงในแถบที่อยู่เริ่มต้นด้วย “google.com/amp” แทนที่จะเป็นโดเมนของผู้จัดพิมพ์:

นี่เป็นหนึ่งในการวิพากษ์วิจารณ์ AMP ที่โดดเด่นที่สุด ธุรกิจไม่ต้องการให้ Google แสดง AMP URL แทนโดเมนที่เนื้อหามาจากจริง เนื่องจากชื่อโดเมนมีความสำคัญต่อการสร้างแบรนด์และการเผยแพร่เนื้อหา

ในเดือนเมษายน 2019 Google ได้ประกาศโซลูชัน ซึ่งเป็นวิธีแสดง URL ดั้งเดิมของเนื้อหาในขณะที่ยังคงความสามารถในการโหลดทันที โซลูชันนั้นเป็นการ แลกเปลี่ยนแบบลงนาม

Google ระบุว่า:

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

สิ่งที่สำคัญที่สุดคือ Signed Exchange จะแสดง URL จริงของผู้เผยแพร่เมื่อมีผู้ใช้ Google Search และคลิกลิงก์ AMP แทนที่จะเป็นลิงก์ "http//google.com/amp":

นี่เป็นเรื่องใหญ่ด้วยเหตุผลสองประการ:

1. ชื่อโดเมนเป็นส่วนสำคัญของเอกลักษณ์ของแบรนด์
2. รับการวิเคราะห์ AMP ได้ง่ายขึ้นด้วย URL ของคุณเอง

(หมายเหตุ: Google จะลิงก์ไปยัง Signed Exchange เมื่อผู้เผยแพร่ เบราว์เซอร์ และบริบทการค้นหาสนับสนุนเท่านั้น ซึ่งหมายความว่าคุณจะต้องเผยแพร่เนื้อหาของคุณทั้งเวอร์ชัน Signed Exchange และเวอร์ชัน Non-Signed Exchange)

2. การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR)

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) เป็นเทคนิคที่คุณสามารถนำไปใช้กับหน้า AMP เพื่อให้โหลดเร็วขึ้น เร็วขึ้นถึง 50% ตามความจริง

SSR ทำงานโดยปรับปรุง first-contentful-paint Times (FCP) สำหรับเฟรมเวิร์กที่แสดงเพจฝั่งไคลเอ็นต์ ข้อเสียของการแสดงผลฝั่งไคลเอ็นต์คือต้องดาวน์โหลด JavaScript ทั้งหมดที่จำเป็นในการแสดงผลหน้าเว็บก่อน ซึ่งจะทำให้เวลาในการโหลดเนื้อหาของหน้าล่าช้าและอาจเพิ่มอัตราตีกลับได้

ในการแก้ปัญหา AMP SSR จะลบโค้ดต้นแบบของ AMP และแสดงผลเลย์เอาต์ของหน้าบนเซิร์ฟเวอร์

(หมายเหตุ: มีโค้ดต้นแบบของ AMP เพื่อป้องกันเนื้อหากระโดดระหว่างโหลดหน้าเว็บ ซ่อนเนื้อหาจนกว่าจะดาวน์โหลดเฟรมเวิร์ก AMP และสร้างเลย์เอาต์ของหน้าเว็บ นั่นเป็นสาเหตุที่หน้า AMP ประสบปัญหาเดียวกันกับเฟรมเวิร์กฝั่งไคลเอ็นต์อื่นๆ — การเรนเดอร์คือ ถูกบล็อกจนกว่าจะดาวน์โหลด JavaScript)

เมื่อนำรหัสต้นแบบออก AMP SSR จะส่งผลให้ FCP เร็วขึ้น 50%

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

ปัจจุบันมีเครื่องมือ 2 อย่างสำหรับ AMP SSR:

1. AMP Optimizer — ไลบรารี NodeJs สำหรับสร้าง AMP . ที่ปรับให้เหมาะสม
2. AMP Packager — เครื่องมือบรรทัดคำสั่งของ Ago ที่ใช้งานได้กับบริการ Signed Exchange

3. การปิดบังอินพุต

การกรอกแบบฟอร์มออนไลน์อาจยุ่งยากมากจนทำให้ผู้ใช้ไม่สามารถทำเช่นนั้นได้ นี่เป็นเรื่องจริงบนอุปกรณ์มือถือที่หน้าจอเล็กกว่าและการนำทางยากขึ้น แต่อย่างที่คุณทราบ แบบฟอร์มมีความสำคัญต่อการรวบรวมลูกค้าเป้าหมายและดำเนินการขายให้เสร็จสิ้น

เพื่อช่วยทำให้กระบวนการกรอกแบบฟอร์มง่ายขึ้นและประหยัดเวลามากขึ้น AMP เปิดใช้งานการกำบังอินพุต คุณลักษณะนี้ช่วยให้นักพัฒนาสามารถเพิ่มการจัดรูปแบบ เช่น การเว้นวรรคและอักขระคั่นระหว่างหน้า ซึ่งสะดวกเป็นพิเศษเมื่อผู้ใช้กรอกวันที่ รายละเอียดการชำระเงิน หมายเลขโทรศัพท์ ฯลฯ:

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

4. การเพิ่มประสิทธิภาพวิดีโอ

มีการแนะนำการปรับปรุงวิดีโอหลายอย่างเพื่อเพิ่มประโยชน์มากมายของ AMP

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

แอตทริบิวต์ Dock ใหม่นี้ย่อขนาดวิดีโอที่กำลังดูอยู่ในขณะนี้เมื่อผู้ใช้เลื่อนหน้าลง ทำให้สามารถดูเนื้อหาและวิดีโอพร้อมกันได้โดยไม่มีสิ่งกีดขวาง:

คุณยังสามารถปรับแต่งตำแหน่งและวิธีที่วิดีโอเชื่อมต่อเพื่อค้นหาวิธีที่ดีที่สุดในการนำเสนอวิดีโอของคุณต่อผู้ใช้

เครื่องเล่นวีดีโอ
การอัปเดตใหม่อีกอย่างคือ <amp-video-iframe> ซึ่งให้คุณติดตั้งเครื่องเล่นวิดีโอที่สร้างขึ้นเองซึ่งมีฟีเจอร์อินเทอร์เฟซวิดีโอ AMP ทั้งหมดที่คุณอาจต้องการ (เล่นอัตโนมัติ เทียบท่า ฯลฯ)

โฆษณาวิดีโอ
โฆษณาวิดีโอสามารถผสานรวมและเพิ่มประสิทธิภาพใน AMP จากเครือข่ายโฆษณาวิดีโอใดๆ ที่รองรับ IMA SDK เพื่อให้คุณสามารถติดตามทั้งโฆษณาและรายได้

5. เพิ่มประสิทธิภาพรายการ

AMP เพิ่งเพิ่มสององค์ประกอบใหม่เพื่อเพิ่มประสิทธิภาพรายการบนหน้าเว็บ:

การปรับขนาด
<amp-list> ช่วยให้คุณสามารถระบุเมื่อคุณต้องการให้คอนเทนเนอร์รายการปรับขนาดในการโต้ตอบของผู้ใช้ เพื่อให้เหมาะสมกับเนื้อหาประเภทต่างๆ มากขึ้น (เช่น เมื่อ <amp-list> มี <amp-accordion> ที่ผู้ใช้แตะ ).

เลื่อนอนันต์
ขณะนี้การเลื่อนแบบไม่มีที่สิ้นสุดพร้อมใช้งานแล้ว ดังนั้นเมื่อผู้ใช้ไปถึงจุดสิ้นสุดของรายการ (ผลการค้นหา การ์ดผลิตภัณฑ์ ฯลฯ) รายการจะถูกเติมโดยอัตโนมัติด้วยรายการอื่นๆ:

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

6. การรวมบุคคลที่สาม

คุกกี้และการรวบรวมข้อมูลเป็นสิ่งจำเป็นสำหรับแบรนด์ในการบันทึกข้อมูลผู้ใช้ อย่างไรก็ตาม ด้วย GDPR กฎเกี่ยวกับความยินยอมและความเป็นส่วนตัวของข้อมูลจึงเข้มงวดขึ้นและมีการควบคุมในทุกเว็บไซต์ ส่งผลให้ผู้เผยแพร่โฆษณาจำนวนมากใช้แพลตฟอร์มการจัดการคำยินยอม (CMP) ของบุคคลที่สามในการรวบรวมข้อมูลตาม GDPR

ด้วยเหตุนี้ AMP จึงเปิดตัว <amp-consent> เพื่อให้ CMP สามารถผสานรวมกับ AMP ได้อย่างง่ายดาย หมายความว่าขณะนี้เว็บไซต์ที่เปิดใช้ AMP สามารถใช้ CMP ต่อไปเพื่อรวบรวมและจัดการข้อมูลผู้ใช้ได้โดยไม่มีปัญหาด้านความเข้ากันได้ พวกเขายังสามารถรวม UI ยินยอมข้อมูลและแจ้งให้ผู้ใช้ก่อนที่จะให้ข้อมูลของพวกเขา

7. โหมดไลท์บ็อกซ์

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

สิ่งนี้นำไปสู่คณะทำงาน AMP UI ที่เพิ่มประสิทธิภาพการเปลี่ยนไลท์บ็อกซ์และปรับปรุงความสามารถในการดูรูปภาพ:

ตอนนี้ <amp-lightbox-gallery> เปิดโอกาสให้ผู้ลงโฆษณาได้ทดลองขนาดต่างๆ สำหรับเว็บไซต์ของตนและเพิ่มประสิทธิภาพวิธีที่พวกเขาต้องการให้ผู้ใช้ดูรูปภาพของตน

8. ความพร้อมใช้งานของ JavaScript ที่กำหนดเอง

หนึ่งในการอัปเดต AMP ใหม่ล่าสุดของ Google คือความพร้อมใช้งานของ <amp-script> ซึ่งให้ตัวเลือกในการเรียกใช้ JavaScript ในเธรดผู้ปฏิบัติงานที่แยกจากกัน เพื่อให้ผู้โฆษณาสามารถเพิ่ม JavaScript ที่กำหนดเองลงในหน้า AMP โดยที่ยังคงความเร็วในการโหลดที่รวดเร็ว

<amp-script> ใหม่ช่วยให้คุณครอบคลุมกรณีการใช้งานที่ไม่สามารถทำได้กับส่วนประกอบ AMP ที่มีอยู่ก่อนหน้านี้ นอกจากนี้ยังช่วยให้คุณแชร์โค้ดในหน้า AMP และหน้าที่ไม่ใช่ AMP และใช้เฟรมเวิร์ก JavaScript

ตัวอย่างบางส่วนที่ทีม AMP สร้างขึ้นสำหรับ <amp-script> ได้แก่

• สิ่งที่ต้องทำ MVC โดยใช้ Vue
• ตัวตรวจสอบรหัสผ่าน
• การสร้างภาพข้อมูลในบทความโดยใช้ D3.js
• แบบฟอร์มหลายหน้าที่แต่ละส่วนต้องได้รับการตรวจสอบก่อนดำเนินการในส่วนถัดไป:

เพื่อรักษาการรับประกันประสิทธิภาพของ AMP มีข้อจำกัดบางประการดังนี้

• การกระโดดเนื้อหา — เพื่อหลีกเลี่ยงการกระโดดของเนื้อหาที่ไม่คาดคิด <amp-script> กำหนดให้ผู้ใช้โต้ตอบเพื่อเปลี่ยนเนื้อหาของหน้า
• การโหลดหน้าเว็บ — เนื่องจาก <amp-script> จะไม่เปลี่ยนเนื้อหาของหน้าโดยที่ผู้ใช้ไม่โต้ตอบ จึงไม่แก้ไขเนื้อหาในการโหลดหน้าเว็บด้วย
• ขนาดสคริปต์ — สคริปต์ที่ใช้ใน <amp-script> เดียวต้องมีขนาดเล็กกว่า 150kB
• รองรับ API — ไม่ รองรับ API ทั้งหมดภายใน Web Worker และยังไม่ได้ใช้งานเมธอดและคุณสมบัติ DOM บางรายการ

(หมายเหตุ: <amp-script> เข้ากันได้กับเฟรมเวิร์กที่คุณอาจใช้อยู่แล้ว เช่น React, Preact, Angular, Vue.js, jQuery และ D3.js)

9. กล่องเครื่องมือ AMP

AMP Toolbox คือชุดเครื่องมือบรรทัดคำสั่งและ JS API เพื่อทำให้การเผยแพร่หน้า AMP ง่ายขึ้น เครื่องมือแต่ละอย่างภายในกล่องเครื่องมือสามารถดาวน์โหลดและใช้งานแยกกันได้:

AMP CLI
อินเทอร์เฟซบรรทัดคำสั่งพร้อมใช้งานสำหรับคุณลักษณะส่วนใหญ่ที่รวมอยู่ใน AMP Toolbox ซึ่งสามารถติดตั้งได้ทั่วโลกผ่าน NPM

แอมป์ ลินเตอร์
กล่องเครื่องมือ-linter ใหม่จะตรวจสอบเอกสาร AMP ของคุณเพื่อหาข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุด

AMP Optimizer
ฝั่งเซิร์ฟเวอร์ AMP Optimizer ช่วยเพิ่มประสิทธิภาพการแสดงผลของหน้า AMP โดยใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับประสิทธิภาพของ AMP

URL แคช AMP
เป็นความคิดที่ดีที่จะตรวจสอบว่าหน้า AMP ทำงานบนแคช AMP ทั้งหมดหรือไม่ และคุณสามารถใช้คอมโพเนนต์ toolbox-cache-url เพื่อทำสิ่งนี้ได้ เนื่องจากจะแปล URL ต้นทางเป็นรูปแบบ URL แคชของ AMP

รายการแคช AMP
ซึ่งจะแสดงรายการแคช AMP ที่เป็นทางการทั้งหมด ซึ่งจะมีประโยชน์เมื่ออัปเดตหรือลบเอกสาร AMP ออกจากแคช AMP อย่างรวดเร็ว

AMP CORS
คอมโพเนนต์ AMP จำนวนมาก (เช่น amp-list หรือ amp-state) ใช้ประโยชน์จากปลายทางระยะไกลโดยใช้คำขอ CORS AMP CORS คือมิดเดิลแวร์แบบเชื่อมต่อ/ด่วนที่จะเพิ่มส่วนหัว CORS ทั้งหมดที่จำเป็นสำหรับหน้า AMP ของคุณโดยอัตโนมัติ

กฎการตรวจสอบ AMP
นี่เป็นเพียงไลบรารี JavaScript สำหรับการสืบค้นกฎตัวตรวจสอบ AMP

รับตัวอย่างหน้า Landing Page หลังคลิกของ Instapage AMP

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

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