เว็บ Accelerated Mobile Page (AMP) ประมาณ 1.5 ล้านหน้า

AMP ไม่เพียงแต่ช่วยปรับปรุงเวลาในการโหลด แต่ยังลบ JavaScript, CSS และการโหลดแบบ Lazy Loading ที่ไม่จำเป็นอีกด้วย ช่วยให้องค์กรต่างๆ พัฒนาหน้าเว็บที่สะอาดและคล่องตัวและเพิ่มความเร็วของหน้าเป็นสามเท่า

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

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

มาแกะกันดีกว่าว่า AMP คืออะไร ให้เข้าใจมากขึ้น

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

ส่วนประกอบหลักของ AMP

AMP ประกอบด้วยสามองค์ประกอบ ได้แก่ HTML, JavaScript และ Cache

AMP HTML

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

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

AMP JavaScript

ไลบรารี AMP JavaScript ใช้แนวทางปฏิบัติด้านประสิทธิภาพที่ดีที่สุดของ AMP เพื่อให้แสดงผลหน้า AMP HTML ได้อย่างรวดเร็ว แนวทางปฏิบัติที่ดีที่สุด ได้แก่ CSS แบบอินไลน์และการทริกเกอร์ฟอนต์

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

แคช AMP

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

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

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

เทคนิคการเพิ่มประสิทธิภาพ

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

การดำเนินการจาวาสคริปต์แบบอะซิงโครนัส

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

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

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

กลไกการขยาย

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

ห้ามใช้ JavaScript ของบุคคลที่สาม

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

CSS . แบบอินไลน์และแบบจำกัดขนาด

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

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

หน้าทั่วไปประกอบด้วยสคริปต์การซิงค์และรูปแบบภายนอกสองสามแบบ เบราว์เซอร์ไม่ดาวน์โหลดแบบอักษรจนกว่าจะโหลดสคริปต์

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

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

ลำดับความสำคัญของการโหลดทรัพยากร

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

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

AMP โหลดได้ทันทีเนื่องจากแสดงผลก่อนที่ผู้ใช้จะชี้ไปยังหน้าที่พวกเขาต้องการนำทางไป สิ่งนี้เกิดขึ้นได้ผ่าน AMP pre-connect API โดยไม่ต้องใช้แบนด์วิดท์หรือ CPU มาก

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

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

ดึงดูดลูกค้ามากขึ้น

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

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

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

รักษาความยืดหยุ่น

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

ลดความซับซ้อน

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

เพิ่มผลตอบแทนการลงทุนสูงสุด

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

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

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

ปรับปรุงประสบการณ์ผู้ใช้

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

บูสต์ SEO

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

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

ข้อจำกัดของ AMP

ไม่ต้องสงสัยเลยว่าหน้า AMP มีข้อดีมากมาย แต่มีข้อบกพร่องบางอย่างที่มองข้ามไม่ได้ นี่คือบางส่วนของพวกเขา

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

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

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

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

AMP เทียบกับเฟรมเวิร์กที่ปรับให้เหมาะสมอื่นๆ

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

AMP กับบทความทันใจของ Facebook

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

AMP เทียบกับการออกแบบเว็บที่ตอบสนอง

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

ในทางกลับกัน AMP เข้ามาในปี 2559 เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ ทั้งสองหน้าใช้ Javascript และ HTML สำหรับส่วนการเข้ารหัส แต่โดยทั่วไป AMP จะเน้นที่ความเร็วมากกว่าและยังแนะนำการแสดงเนื้อหาแบบทันทีอีกด้วย

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

AMP กับ กปภ

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

หากใช้ AMP และ PWA ร่วมกัน จะช่วยคุณสร้างเว็บไซต์แบบไดนามิกด้วยกระบวนการแสดงหน้าเว็บที่รวดเร็ว

AMP เพิ่มหน้ามือถือของคุณ

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

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