Coming to a city near you: The AMP Roadshow.
Come to the AMP Roadshow.

AMP ให้ประสบการณ์การใช้งานที่ยอดเยี่ยมในหลายแพลตฟอร์ม

เล่นวีดีโอ

หน้า AMP สร้างขึ้นด้วยองค์ประกอบหลัก 3 ส่วน.

AMP HTML

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

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

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

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

เช่น แท็ก amp-img จะสนับสนุน srcset ได้อย่างสมบูรณ์แม้ในเบราว์เซอร์ที่ยังไม่มีการสนับสนุนดังกล่าว ดูวิธีการสร้าง AMP HTML หน้าแรกของคุณ

AMP JS

ไลบรารี AMP JS จะช่วยทำให้แสดงหน้า AMP HTML ได้อย่างรวดเร็ว

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

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

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

หากต้องการเรียนรู้เพิ่มเติมไม่เพียงแค่การเพิ่มประสิทธิภาพ แต่รวมถึงข้อจำกัดต่างๆ อ่านข้อกำหนดเกี่ยวกับ AMP HTML

AMP Cache

Google AMP Cache (ตัวเลือก) จะใช้ในการแสดงหน้า AMP HTML

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

แคชดังกล่าวยังมาพร้อมกับระบบการตรวจสอบที่ช่วยยืนยันว่าหน้าเว็บจะทำงานอย่างถูกต้อง

โดยไม่ขึ้นอยู่กับทรัพยากรภายนอก ระบบการตรวจสอบจะทำการยืนยันว่า มาร์กอัปของหน้าเว็บเป็นไปตามข้อกำหนดของ AMP HTML

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

เรียนรู้เพิ่มเติมเกี่ยวกับการทดสอบหน้า AMP HTML

ดูว่า AMP สามารถทำอะไรให้คุณบ้าง