แอมป์คืออะไร? คู่มือฉบับสมบูรณ์สำหรับ Accelerated Mobile Pages

ส่วนที่ 1: Accelerated Mobile Pages คืออะไร

แนวคิดที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรกจะคงอยู่ – คำกล่าวนี้เป็นความจริงจากทั้งฝั่งธุรกิจและผู้บริโภค

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

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

และยังคงใช้จ่ายโฆษณาบนมือถือช้ากว่าการบริโภคสื่อบนมือถือ:

มีเหตุผลที่ทำให้ผู้ใช้ใช้เวลาในการท่องเว็บบนอุปกรณ์เคลื่อนที่มากกว่าการซื้อ – ผู้ใช้ต้องการความพึงพอใจในทันทีมากขึ้นเมื่อใช้อุปกรณ์เคลื่อนที่

ตอบคำถามนี้ – คุณรอให้หน้าเว็บบนมือถือโหลดนานเท่าใด

ตามข้อมูลที่รวบรวมโดย Google และ SOASTA 40% ของผู้บริโภคออกจากหน้าที่ใช้เวลานานกว่าสามวินาทีในการโหลด

สามวินาที

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

ความเร็วของหน้าเว็บส่งผลต่ออัตราตีกลับอย่างไร

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

1. DOM ready time: DOM ready time คือระยะเวลาที่ใช้ในการรับและแยกวิเคราะห์โค้ด HTML ของหน้าเว็บโดยเบราว์เซอร์ ซึ่งเป็นตัวทำนายที่ดีที่สุดของอัตราตีกลับ แม้ว่าผู้ใช้อาจไม่ทราบว่าได้รับและแยกวิเคราะห์โค้ด HTML เมื่อใด โค้ดต้องโหลดก่อนจึงจะสามารถโหลดองค์ประกอบของหน้า เช่น รูปภาพได้ หากโค้ด HTML ใช้เวลานานเกินไป เวลาในการโหลดเว็บไซต์จะช้า เพื่อเพิ่มความเร็วให้กับเวลาที่พร้อมใช้งาน DOM ของหน้าเว็บบนมือถือของคุณ เป็นการดีที่สุดที่จะหลีกเลี่ยงการใช้ JavaScript ที่บล็อกและป้องกันไม่ให้เบราว์เซอร์แยกวิเคราะห์โค้ด HTML องค์ประกอบของหน้าที่ใช้ JavaScript ประกอบด้วยโฆษณาของบุคคลที่สามและวิดเจ็ตโซเชียลที่ต้องดึงจากเซิร์ฟเวอร์ภายนอกก่อนจึงจะสามารถโหลดหน้าเว็บได้

2. เวลาในการโหลดแบบเต็มหน้า: เวลาในการโหลด แบบเต็มหน้ารวมถึงเวลาที่ต้องใช้รูปภาพ แบบอักษร รหัส CSS ฯลฯ ในการโหลดบนหน้าเว็บ การโหลดแบบเต็มหน้าเร็วขึ้นทำให้อัตราตีกลับลดลง:

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

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

พิจารณาการเปิดเผยที่น่าตกใจเกี่ยวกับความเร็วในการโหลดหน้าเว็บ:

• ไซต์บนมือถือโดยเฉลี่ยใช้เวลา 19 วินาทีในการโหลดผ่านการเชื่อมต่อ 3G และ 77% ของไซต์บนมือถือใช้เวลาในการโหลดมากกว่า 10 วินาที
• Google พบว่า Conversion ลดลง 20% ทุก ๆ วินาทีที่หน้าเว็บใช้ในการโหลด ในการเปรียบเทียบ ไซต์ที่โหลดใน 5 วินาทีมีรายได้โฆษณาบนมือถือมากกว่าไซต์ที่โหลดใน 19 วินาที 2 เท่า
• ผู้ใช้ 61% ไม่น่าจะกลับมาที่ไซต์บนมือถือที่มีปัญหาในการเข้าถึง

สิ่งนี้หมายความว่า?

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

แอมป์คืออะไร?

Google เปิดตัวโครงการโอเพ่นซอร์ส Accelerated Mobile Pages เพื่อให้แน่ใจว่าหน้าเว็บบนมือถือทำงานด้วยความเร็วที่เหมาะสมที่สุด

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

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

เมื่อคุณสร้างเพจบนมือถือในรูปแบบ AMP คุณจะได้รับ:

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

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

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

วิธีจดจำ AMP ในผลการค้นหามีดังนี้

นี่คือลักษณะที่หน้า AMP เปรียบเทียบกับหน้าเว็บปกติ:

สาเหตุที่หน้า AMP โหลดทันทีเป็นเพราะ AMP จำกัด HTML/CSS และ JavaScript ทำให้แสดงผลหน้าเว็บบนมือถือได้เร็วขึ้น Google AMP Cache ต่างจากหน้ามือถือทั่วไปตรงที่หน้า AMP แคชไว้โดยอัตโนมัติเพื่อให้โหลดเร็วขึ้นในการค้นหาของ Google

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

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

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

ส่วนที่ 2: AMP ทำงานอย่างไร

Google เปิดตัวเฟรมเวิร์กโอเพ่นซอร์ส Accelerated Mobile Pages (AMP) ในเดือนกุมภาพันธ์ 2559 เฟรมเวิร์กนี้สร้างขึ้นเนื่องจากมีความจำเป็นในการสร้างประสบการณ์ผู้ใช้ที่ได้รับการเพิ่มประสิทธิภาพและบูรณาการอย่างแน่นหนา แทนที่จะเป็นประสบการณ์มือถือที่ยุ่งยากและช้าซึ่งผู้ใช้ต้องเผชิญในแต่ละวัน พื้นฐาน

Google เริ่มโครงการ AMP เพื่อสร้างเฟรมเวิร์กที่จะให้เส้นทางที่แน่นอนในการสร้างประสบการณ์หน้าเว็บบนมือถือที่ปรับให้เหมาะสม โครงการโอเพนซอร์ซ AMP ได้รับการจัดทำเป็นเอกสารอย่างดี ปรับใช้ได้ง่าย ตรวจสอบได้ และให้ความเห็นเกี่ยวกับการวาง User-First ในการออกแบบหน้าเว็บ

นับตั้งแต่เปิดตัวเมื่อเกือบ 2 ปีที่แล้ว 25 ล้านโดเมนได้เผยแพร่หน้า AMP มากกว่า 4 พันล้านหน้า:

เนื่องจากการเปิดตัวไม่เพียงแต่เพิ่มจำนวนหน้า AMP เท่านั้น แต่ยังเพิ่มความเร็วด้วย เวลาเฉลี่ยที่ใช้ในการโหลดหน้า AMP จากการค้นหาของ Google จึงเหลือน้อยกว่าครึ่งวินาที

AMP ทำให้การเข้าชมเว็บไซต์เพิ่มขึ้น 10% โดยใช้เวลาในหน้าเพจเพิ่มขึ้น 2 เท่า เว็บไซต์อีคอมเมิร์ซที่ใช้ AMP มียอดขายและ Conversion เพิ่มขึ้น 20% เมื่อเทียบกับหน้าที่ไม่ใช่ AMP:

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

Chartbeat วิเคราะห์ข้อมูลจากเว็บไซต์ 360 แห่งโดยใช้ AMP ตั้งแต่เดือนมิถุนายน 2559 – พฤษภาคม 2560 เพื่อค้นหาว่าผู้เผยแพร่โฆษณาทั่วไปที่ใช้หน้า AMP เห็น 16% ของการเข้าชมบนอุปกรณ์เคลื่อนที่ทั้งหมดในเนื้อหา AMP

หน้า AMP โหลดได้เร็วกว่าหน้าเว็บมาตรฐานประมาณสี่เท่า และผู้ใช้มีส่วนร่วมกับหน้า AMP มากกว่าหน้าเว็บบนอุปกรณ์เคลื่อนที่มาตรฐานถึง 35%:

ตอนนี้เรารู้แล้วว่าเหตุใดคุณจึงควรใช้หน้า AMP เรามาดูกันว่า AMP ทำงานอย่างไร เปรียบเทียบกับการออกแบบเว็บที่ตอบสนองตามอุปกรณ์, Instant Articles ของ Facebook และ Progressive Web App ได้อย่างไร

องค์ประกอบหลัก 3 ประการของ AMP

หน้า AMP สร้างขึ้นด้วยองค์ประกอบหลักสามประการต่อไปนี้:

AMP HTML

AMP HTML เป็น HTML โดยพื้นฐานแล้วโดยมีข้อจำกัดบางประการเพื่อประสิทธิภาพที่เชื่อถือได้ ไฟล์ AMP HTML ที่ง่ายที่สุดมีลักษณะดังนี้:

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

คุณเลือกให้มีเวอร์ชันที่ไม่ใช่ AMP และเวอร์ชัน AMP ของหน้าเว็บ หรือเลือกเฉพาะเวอร์ชัน AMP ก็ได้

AMP JavaScript (JS)

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

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

แคช AMP

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

เพื่อรักษาประสิทธิภาพสูงสุด แคช AMP จะโหลดเอกสาร ไฟล์ JS และรูปภาพทั้งหมดจากแหล่งกำเนิดเดียวกันที่ใช้ HTTP 2.0

แคช AMP มาพร้อมกับระบบตรวจสอบความถูกต้องในตัวที่ยืนยันว่าหน้าได้รับการรับประกันว่าจะทำงานได้ และไม่ขึ้นอยู่กับแรงภายนอกที่อาจทำให้หน้าช้าลง ระบบตรวจสอบความถูกต้องทำงานโดยใช้ชุดการยืนยันที่ยืนยันว่ามาร์กอัปของหน้าตรงตามข้อกำหนด AMP HTML

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

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

AMP JavaScript ทั้งหมดทำงานแบบอะซิงโครนัส

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

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

AMP ใช้ JavaScript ของบุคคลที่สามใน iframes แต่ไม่สามารถบล็อกการแสดงหน้าเว็บได้

ทรัพยากรทั้งหมดมีขนาดคงที่

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

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

กลไกส่วนขยายไม่บล็อกการเรนเดอร์

AMP ไม่อนุญาตให้กลไกส่วนขยายบล็อกการแสดงหน้าเว็บ แต่รองรับส่วนขยายสำหรับองค์ประกอบต่างๆ เช่น ไลท์บ็อกซ์และการฝังโซเชียลมีเดีย และแม้ว่าสิ่งเหล่านี้จะต้องการคำขอ HTTP เพิ่มเติม แต่ก็ไม่ได้บล็อกการจัดวางและการแสดงผลของหน้า

หากหน้าใช้สคริปต์ที่กำหนดเอง จะต้องบอกระบบ AMP ว่าในที่สุดหน้าจะมีแท็กที่กำหนดเอง จากนั้น AMP จะสร้างแท็กที่จำเป็นเพื่อไม่ให้หน้าทำงานช้าลง ตัวอย่างเช่น หากแท็ก amp-iframe บอก AMP ว่าจะมีแท็ก amp-iframe จากนั้น AMP จะสร้างกล่อง iframe ก่อนที่มันจะรู้ว่าจะรวมอะไร

JavaScript บุคคลที่สามทั้งหมดจะถูกเก็บไว้จากเส้นทางที่สำคัญ

JavaScript ของบริษัทอื่นใช้การโหลด JS แบบซิงโครนัส ซึ่งจะทำให้เวลาในการโหลดของคุณช้าลง หน้า AMP อนุญาต JavaScript ของบุคคลที่สามแต่ใน iframe ที่แซนด์บ็อกซ์เท่านั้น โดยการทำเช่นนี้ การโหลด JavaScript ไม่สามารถบล็อกการทำงานของหน้าหลักได้ แม้ว่า JavaScript iframe ที่แซนด์บ็อกซ์จะทริกเกอร์การคำนวณใหม่หลายสไตล์ แต่ iframe ขนาดเล็กของพวกมันก็มี DOM น้อยมาก

การคำนวณ iframe ใหม่จะดำเนินการเร็วมากเมื่อเปรียบเทียบกับการคำนวณรูปแบบและเลย์เอาต์ของหน้าใหม่

CSS ต้องเป็นแบบอินไลน์และจำกัดขนาด

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

สไตล์ชีตแบบอินไลน์ควรมีขนาดสูงสุด 75kb แม้ว่าจะใหญ่พอสำหรับหน้าที่ซับซ้อนมาก แต่ก็ยังต้องการให้ผู้เขียนหน้าใช้ CSS ที่ดี

การเรียกใช้แบบอักษรนั้นมีประสิทธิภาพ

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

กรอบงาน AMP ประกาศคำขอ HTTP เป็นศูนย์จนกว่าแบบอักษรทั้งหมดจะเริ่มดาวน์โหลด สิ่งนี้เกิดขึ้นได้เพราะ JavaScript ทั้งหมดใน AMP มีแอตทริบิวต์ async และอนุญาตเฉพาะแผ่นงานในบรรทัดเท่านั้น ไม่มีคำขอ HTTP ที่บล็อกเบราว์เซอร์ไม่ให้ดาวน์โหลดแบบอักษร

การคำนวณรูปแบบใหม่จะลดลง

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

เรียกใช้ภาพเคลื่อนไหวที่เร่งด้วย GPU เท่านั้น

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

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

การโหลดทรัพยากรมีความสำคัญ

AMP ควบคุมการโหลดทรัพยากรทั้งหมด โดยจะจัดลำดับความสำคัญในการโหลดทรัพยากร และโหลดเฉพาะสิ่งที่จำเป็น และดึงทรัพยากรที่โหลดแบบ Lazy Loading ทั้งหมดล่วงหน้า

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

AMP ยังมีความสามารถในการดึงทรัพยากรที่โหลดแบบ Lazy Loading ล่วงหน้า ทรัพยากรเหล่านี้จะถูกโหลดช้าที่สุด แต่จะดึงข้อมูลล่วงหน้าโดยเร็วที่สุด วิธีนี้จะทำให้โหลดได้เร็วมาก แต่ CPU จะใช้เมื่อทรัพยากรแสดงต่อผู้ใช้เท่านั้น

โหลดหน้าทันที

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

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

คุณยังสามารถใช้วิดีโอต่อไปนี้เพื่อค้นหา '7 วิธีที่ AMP ทำให้หน้าเว็บของคุณรวดเร็ว':

ตอนนี้เรารู้แล้วว่า AMP ทำงานอย่างไร มาดูกันว่า AMP เป็นอย่างไรเมื่อเปรียบเทียบกับ Instant Articles ของ Facebook, การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ และ Progressive Web App

AMP กับ Instant Articles ของ Facebook

Facebook เปิดตัว Instant Articles ในปี 2015 เพื่อช่วยให้ผู้เผยแพร่สามารถมอบประสบการณ์การอ่านที่รวดเร็วและสมจริงอย่างเหลือเชื่อให้กับผู้คนบน Facebook บทความโต้ตอบแบบทันทีของ Facebook คือ:

• เร็วกว่าบทความเว็บบนมือถือทั่วไปถึง 10 เท่า
• อ่านบทความโต้ตอบแบบทันทีมากกว่า 20% โดยเฉลี่ย
• ผู้อ่าน 70% มีแนวโน้มน้อยที่จะละทิ้ง Instant Articles

Instant Articles ช่วยให้ผู้เผยแพร่สร้างบทความที่รวดเร็วและโต้ตอบได้บน Facebook พวกเขาให้ข้อดีดังต่อไปนี้แก่คุณ:

• รวดเร็วและตอบสนอง: Instant Articles โหลดได้ทันทีไม่ว่าผู้ใช้จะใช้การเชื่อมต่อหรืออุปกรณ์ใดก็ตาม บทความนั้นใช้งานง่ายเนื่องจากเปลี่ยนประสบการณ์การเล่าเรื่องผ่านมือถือ
• โต้ตอบและมีส่วนร่วม: ประสบการณ์ที่ดื่มด่ำของ Articles ทำให้พวกเขาโต้ตอบได้มากขึ้น ซึ่งเป็นสาเหตุที่ทำให้ Instant Articles ถูกแชร์บ่อยกว่าบทความบนเว็บบนมือถือถึง 30% ความช่วยเหลือขยายขอบเขตการเข้าถึงเรื่องราวของคุณในฟีดข่าว
• การสร้างรายได้ที่ง่ายและยืดหยุ่น: การ สร้างรายได้เป็นส่วนสำคัญของ Instant Articles หากต้องการขยายธุรกิจของคุณด้วยบทความ คุณสามารถขยายโฆษณาขายตรง และเติมพื้นที่โฆษณาที่มีอยู่ด้วย Audience Network ของ Facebook และแม้แต่สร้างเนื้อหาที่มีแบรนด์เนทีฟ

ทั้งหน้า AMP และ Instant Articles ให้เวลาโหลดที่รวดเร็วแก่ผู้ใช้ ซึ่งช่วยลดอัตราตีกลับของหน้าและเพิ่มการมีส่วนร่วม อันที่จริงแล้ว Instant Articles ของ Facebook โหลดได้เร็วกว่าหน้า AMP:

อย่างไรก็ตาม อัตราการยอมรับหน้า AMP นั้นสูงกว่า Instant Articles มาก และส่วนใหญ่เป็นเพราะ Facebook ให้ความสำคัญกับวิดีโอมากกว่าบทความที่เป็นข้อความในฟีดข่าวของตนมากขึ้น ส่งผลให้ผู้จัดพิมพ์หลายรายเลิกใช้ Instant Articles รวมถึง New York Times และ The Guardian

จากข้อมูลของ Parsley Google ได้แซงหน้า Facebook ในฐานะแหล่งที่มาของการเข้าชมภายนอกอันดับต้น ๆ สำหรับผู้เผยแพร่ ขณะนี้ Google คิดเป็น 42% ของการเข้าชมภายนอกของผู้เผยแพร่:

เมื่อ Facebook เปิดตัว Instant Articles ใน Google ในฐานะแหล่งที่มาของการเข้าชมเว็บไซต์สื่อและเนื้อหาที่โดดเด่น ด้วยการเปิดตัวและความสำเร็จของ AMP Google กลับมาเป็นผู้นำอีกครั้ง

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

AMP กับ Responsive Web Design (RWD)

การสร้างเว็บไซต์ที่เหมาะกับอุปกรณ์พกพาเป็นสิ่งสำคัญสำหรับนักการตลาดตั้งแต่ Google เปิดตัว Mobilegeddon เมื่อต้นปี 2015 การออกแบบเว็บไซต์ที่ตอบสนองตามอุปกรณ์มุ่งเป้าไปที่การช่วยสร้างหน้าเว็บที่เน้นความยืดหยุ่น หน้าเว็บที่ตอบสนองได้ทำงานบนอุปกรณ์หรือหน้าจอใดๆ ก็ตาม ให้ประสบการณ์เว็บบนอุปกรณ์เคลื่อนที่ที่ดีขึ้นและมีส่วนร่วมมากขึ้น

ที่แกนหลักของพวกเขา ทั้ง AMP และ Responsive Web Design ต่างก็ใช้ Building Block พื้นฐานที่เกือบจะเหมือนกันเพื่อสร้างเพจบนมือถือ เช่น HTML และ JavaScript อย่างไรก็ตาม พวกเขามีชุดของความแตกต่างที่ทำให้พวกเขาแตกต่าง เช่น:

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

2. AMP เน้นที่ความเร็ว: เฟรมเวิร์กโอเพนซอร์สของ AMP เน้นที่ความเร็วโดยเฉพาะความเร็วของหน้าเว็บบนอุปกรณ์เคลื่อนที่ AMP ได้แนะนำการแสดงเนื้อหาเว็บบนมือถือทันที ด้วยการใช้สไตล์ชีตแบบอินไลน์ การโหลดแบบ Lazy Loading การดึงทรัพยากรล่วงหน้า และเทคนิคการเพิ่มประสิทธิภาพอื่นๆ เฟรมเวิร์กสามารถโหลดหน้ามือถือได้ทันที

3. AMP ใช้งานได้กับหน้าเว็บ แต่ RWD จะแทนที่หน้าเว็บ: แม้ว่าจะสามารถใช้ AMP เฉพาะบนหน้าเว็บของคุณได้ แต่คุณสามารถเพิ่ม AMP ลงในเว็บไซต์ที่ไม่ตอบสนองหรือตอบสนองที่มีอยู่ได้ โดยไม่ต้องออกแบบเว็บไซต์ใหม่ อย่างไรก็ตาม ในการทำให้หน้าเว็บตอบสนองได้ คุณจะต้องออกแบบหน้าใหม่

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

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

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

AMP กับ Progressive Web App (PWA)

Progressive Web Apps เป็นเว็บแอปบนมือถือที่ส่งผ่านเว็บ มันทำงานเหมือนแอปที่มาพร้อมเครื่อง ความแตกต่างที่สำคัญระหว่าง PWA และแอปที่มาพร้อมเครื่องคือ PWA ไม่จำเป็นต้องดาวน์โหลดจาก Google หรือ App Store

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

ความต้องการ Progressive Web Apps เกิดขึ้นจากการที่เว็บไซต์บนมือถือ 1,000 อันดับแรกเข้าถึงผู้คนได้มากกว่าแอพเนทีฟ 1,000 อันดับแรกถึง 4 เท่า อย่างไรก็ตาม เว็บไซต์เหล่านั้นดึงดูดผู้ใช้โดยเฉลี่ยน้อยกว่าแอปบนอุปกรณ์เคลื่อนที่ถึง 20 เท่า

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

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

กปภ. ได้แก่

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

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

นี่คือข้อแตกต่างที่สำคัญระหว่าง AMP และ PWA:

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

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

1. AMP เป็นเว็บแอปโปรเกรสซีฟ

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

2. AMP เป็นโปรเกรสซีฟเว็บแอป

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

3. AMP ในเว็บแอปโปรเกรสซีฟ

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

สิ่งนี้เกี่ยวข้องกับการใช้ AMP อีกรูปแบบหนึ่งที่เรียกว่า “Shadow AMP” ซึ่งช่วยให้ AMP ซ้อนภายในพื้นที่ของหน้าเว็บได้ ผลลัพธ์คือ AMP ภายในเชลล์ของเว็บแอปพลิเคชันโปรเกรสซีฟ

Washington Post นำเสนอตัวอย่างในอุดมคติของ PWA และ AMP ที่ทำงานร่วมกันเพื่อสร้างการมีส่วนร่วมที่ดีขึ้นและเวลาในการโหลดเร็วขึ้น เมื่อ Washington Post สร้างเว็บไซต์ให้ตอบสนอง ความเร็วของพวกเขาคือ 3500 ms เมื่อนำ AMP มาใช้ เวลาในการโหลดหน้าเว็บลดลงเหลือ 1200 มิลลิวินาที จากนั้นจึงลดเหลือ 400 มิลลิวินาทีด้วยความช่วยเหลือของเทคโนโลยี AMP CDN

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

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

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

ส่วนที่ 3: ประโยชน์และข้อจำกัดของ AMP

AMP ช่วยให้มั่นใจได้ว่าหน้าเว็บโหลดเร็วขึ้น ซึ่งช่วยในเรื่องประสบการณ์ของผู้ใช้และช่วยให้ผู้เยี่ยมชมอยู่ในหน้านานขึ้น AMP ใช้ AMP HTML ที่ช่วยให้หน้ามือถือโหลดเร็วขึ้น อันที่จริงตาม Gary Illayes ของ Google เวลาในการโหลดค่ามัธยฐานสำหรับหน้า AMP คือ 1 วินาที ซึ่งเร็วกว่าหน้า HTML มาตรฐานทั่วไปถึง 4 เท่า

เราได้พูดคุยถึงความเชื่อมโยงระหว่างอัตราการตีกลับของหน้าและความเร็วของหน้าแล้ว และได้เห็นบัญชีโดยละเอียดว่า AMP ทำงานอย่างไรและเปรียบเทียบกับ PWA, RWD และ Instant Articles ของ Facebook แล้ว

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

ประโยชน์ของ AMP

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

AMP ให้ประโยชน์ต่อไปนี้แก่เพจบนมือถือของคุณ

ดึงดูดผู้ชม

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

เพิ่มรายได้สูงสุด

ทุก ๆ วินาทีที่หน้าเว็บของคุณใช้ในการโหลด Conversion ของคุณลดลง 12% ซึ่งหมายความว่าหากคุณต้องการมีส่วนร่วมกับผู้ชมและเพิ่ม ROI ของคุณ คุณต้องแน่ใจว่าหน้ามือถือของคุณตอบสนองความคาดหวังด้านความเร็วของผู้เยี่ยมชมของคุณ

เฟรมเวิร์ก AMP ช่วยให้คุณมอบประสบการณ์การใช้งานที่รวดเร็วยิ่งขึ้นแก่ผู้ใช้ได้ทุกที่ รวมถึงโฆษณา หน้า Landing Page หลังคลิก และเว็บไซต์

รักษาความยืดหยุ่นและการควบคุม

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

คุณยังสามารถใช้การทดสอบ A/B เพื่อทดสอบและสร้างประสบการณ์ผู้ใช้มือถือที่ดีที่สุดสำหรับลูกค้าของคุณ

ลดความซับซ้อนในการดำเนินงานของคุณ

ขั้นตอนการสร้างหน้า AMP ค่อนข้างง่ายและตรงไปตรงมา คุณมีความสามารถในการแปลงไฟล์เก็บถาวรทั้งหมดของคุณโดยเฉพาะถ้าคุณใช้ CMS รวมถึง Drupal และ WordPress

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

เพิ่ม ROI . ของคุณให้สูงสุด

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

สร้างอนาคตที่ยั่งยืน

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

มอบประสบการณ์การใช้งานที่ดียิ่งขึ้น

แน่นอน ข้อได้เปรียบที่ชัดเจนที่สุดของการใช้หน้า Landing Page แบบเร่งความเร็วหลังการคลิกบนมือถือก็คือ พวกเขาจะให้ความพึงพอใจแก่ผู้ใช้มากขึ้น เมื่อหนึ่งในสองคนไม่สามารถรอที่จะโหลดเว็บไซต์ได้เพียง 10 วินาที การเร่งกระบวนการให้เร็วขึ้น 15-85% อาจส่งผลกระทบอย่างใหญ่หลวงต่อความสุขของผู้เข้าชม

รับ SEO Boost

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

หน้าที่เปิดใช้ AMP ทั้งหมดจะปรากฏในรูปแบบภาพหมุน เหนือกว่าโฆษณาที่เสียค่าใช้จ่ายในผลการค้นหาจะมีสายฟ้าสีเขียวอยู่ใต้ชื่อ

แม้ว่าการใช้หน้า AMP จะทำให้คุณมีข้อดีมากมาย แต่ก็มีข้อเสียบางประการของ AMP เช่นกัน

ไม่มีจาวาสคริปต์บุคคลที่สาม

เนื่องจากคุณไม่มีความสามารถในการใช้ JavaScript ของบุคคลที่สาม คุณจึงต้องอำลาความสามารถในการวิเคราะห์และติดตามที่ช่วยให้คุณนำเสนอประสบการณ์การโฆษณาที่ตรงเป้าหมาย

ไม่เพียงเท่านั้น แต่ด้วย JavaScript เวอร์ชันที่เบากว่าของ Google องค์ประกอบของหน้าเว็บที่ต้องมีการถ่ายโอนข้อมูลจะไม่สามารถใช้ได้บนหน้า AMP

ไม่มีการติดตาม Google Analytics

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

นี่คือวิธีติดตามหน้า AMP ใน Google Analytics ด้วย Google Tag Manager

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

ส่วนถัดไปจะเน้นกรณีศึกษาของธุรกิจที่ใช้ AMP เพื่อบรรลุ KPI และเพิ่ม ROI

ส่วนที่ 4: เรื่องราวความสำเร็จของ AMP

เมื่อเราพูดถึงหน้าเว็บบนมือถือ ความเร็วเท่ากับรายได้ การวิจัยโดย SOASTA แสดงให้เห็นว่าการโหลดหน้าเว็บล่าช้าถึง 100 ms อาจทำให้ Conversion ลดลงได้:

Google ได้มอบหมายให้ Forrester Consulting ดำเนินการศึกษา Economic Impact™ ทั้งหมดเพื่อเน้นให้เห็นถึงผลกระทบที่ AMP อาจมีบนหน้าเว็บบนมือถือได้ทั่วทั้งผู้เผยแพร่โฆษณาและเว็บไซต์อีคอมเมิร์ซโดยใช้ AMP

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

การใช้โมเดลนี้ เว็บไซต์ที่มีจำนวนการเข้าชมเว็บไซต์ต่อเดือน 4 ล้านครั้งและอัตรากำไร 10% สามารถคาดหวังว่าจะได้รับค่าใช้จ่ายในการฝังหน้า AMP กลับคืนมา และเริ่มเห็นการเพิ่มขึ้นในเชิงบวกในช่วงเวลาน้อยกว่า 6 เดือน:

นี่คือผลลัพธ์หลักที่รวบรวมได้จากการศึกษา:

• อัตราการแปลงการขายเพิ่มขึ้น 20% การทดสอบ A/B ที่ดำเนินการโดยเว็บไซต์อีคอมเมิร์ซสองแห่งที่สัมภาษณ์สำหรับการศึกษานี้แสดงให้เห็นว่ามีอัตรา Conversion เพิ่มขึ้น 20% ในหน้า AMP ซึ่งจะช่วยเพิ่มผลกำไรประจำปีได้มากกว่า 200,000 เหรียญสหรัฐฯ ตามแบบจำลอง Forrester
• การเข้าชมเว็บไซต์ AMP เพิ่มขึ้น 10% เมื่อเทียบเป็นรายปี การเข้าชมไซต์ที่เพิ่มขึ้นส่งผลให้มียอดขายและการดูโฆษณาเพิ่มขึ้น ซึ่งจะช่วยเพิ่มผลกำไรประจำปีให้กับไซต์ในปีแรกได้กว่า 75,000 เหรียญสหรัฐ โดยพิจารณาจากโมเดล
• จำนวนหน้าเพิ่มขึ้น 60% ต่อการเข้าชม หน้า AMP ดำเนินการในเชิงบวกสำหรับอีคอมเมิร์ซและผู้เผยแพร่ข่าว ซึ่งทั้งคู่กล่าวว่ามีคนมาที่ไซต์เพิ่มขึ้น 60% และคนเหล่านั้นใช้เวลาบนไซต์นานเป็นสองเท่า โดยผู้เข้าชมที่กลับมาเพิ่มขึ้นเล็กน้อย 0.3%

AMP เป็นรูปแบบที่ค่อนข้างใหม่ และแน่นอนว่า คุณต้องเสียค่าใช้จ่ายบางส่วนในการปรับใช้ อย่างไรก็ตาม ผลตอบแทนจากการใช้รูปแบบ AMP นั้นมีค่ามากกว่าต้นทุนเริ่มต้น

Gizmodo ใช้หน้า AMP เพื่อให้บนมือถือเร็วขึ้น 3 เท่า

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

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
2. Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

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

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

หลังจากที่คุณเสร็จสิ้นและคลิกเผยแพร่ คุณจะได้รับแจ้งหากคุณเกินขีดจำกัด 75KB:

เมื่อตรวจสอบความถูกต้องแล้ว หน้าของคุณก็พร้อมที่จะเผยแพร่

ขั้นตอนที่ 5: เผยแพร่

WordPress และโดเมนที่กำหนดเองสามารถเผยแพร่หน้า Landing Page ของ AMP หลังการคลิกใน Instapage คุณสามารถเลือกวิธีใดก็ได้หลังจากคลิกปุ่มเผยแพร่สีน้ำเงิน:

สำหรับ WordPress ให้ติดตั้งและลงชื่อเข้าใช้ปลั๊กอิน Instapage บนเว็บไซต์ของคุณและเผยแพร่หน้า Landing Page ของ AMP หลังคลิกไปยัง WordPress:

มิฉะนั้น ให้ป้อนโดเมนและโดเมนย่อยของคุณ:

ทันทีที่หน้าเผยแพร่ คุณจะเห็นโลโก้ AMP ข้างหน้าในหน้าแดชบอร์ด:

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

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

ปัจจุบัน Instapage เป็นแพลตฟอร์มหน้า Landing Page หลังการคลิกเพียงแพลตฟอร์มเดียวที่ให้คุณสร้างหน้า Landing Page หลังการคลิกที่ปรับให้เหมาะกับอุปกรณ์เคลื่อนที่โดยใช้เฟรมเวิร์ก AMP ของ Google หน้า Landing Page หลังคลิกที่สร้างด้วย AMP นั้นเกือบจะโหลดได้ในทันทีและการเลื่อนที่ราบรื่น

เริ่มสร้างหน้า AMP ด้วย Instapage วันนี้เพื่อสร้างประสบการณ์การท่องเว็บบนอุปกรณ์เคลื่อนที่ที่ดีขึ้น ปรับปรุงคะแนนคุณภาพ และสร้าง Conversion มากขึ้น