คู่มือสำหรับผู้เริ่มต้นสู่หน้าเว็บมือถือเร่งด่วน (AMP)

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

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

นับตั้งแต่เปิดตัวผู้จัดพิมพ์จำนวนมากเช่น BBC, The Economist, Guardian News และ Financial Times ได้ใช้ความคิดริเริ่มดังนั้นตอนนี้เราสามารถสรุปได้อย่างปลอดภัยแล้วว่า AMP เป็นนวัตกรรมที่มีมูลค่าการพิจารณาสำหรับทุกคนที่ต้องการแข่งขันบนมือถือ เว็บ.

AMP ในการใช้งานจริง

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

หากต้องการดูการทำงานของ AMP คุณต้องทำสองสิ่ง:

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

ในภาพหน้าจอด้านล่างคุณจะเห็นสิ่งที่ฉันได้รับเมื่อฉันใช้ข้อความค้นหา กีฬาโอลิมปิกริโอ.

อย่างที่คุณเห็นหน้า AMP ปรากฏเป็น Google Rich Cards, ภาพหมุนที่ปรับให้เหมาะกับมือถือ, ที่ Google เปิดตัวในเดือนพฤษภาคม 2559.

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

พื้นหลังทางเทคนิค

แอมป์คือ เว็บมาตรฐาน สร้างขึ้นบนเทคโนโลยีเว็บที่มีอยู่และมุ่งเน้นไปที่เนื้อหาแบบคงที่ มันมี 3 ส่วนต่าง ๆ:

1. AMP HTML: แก้ไข HTML ด้วย (1) ข้อ จำกัด ของคุณสมบัติ HTML / CSS ปกติและ (2) การแนะนำแท็กที่กำหนดเองใหม่ (ส่วนประกอบ)
2. AMP JS: บังคับใช้แนวปฏิบัติที่ดีที่สุดเพื่อลดเวลาในการโหลดหน้าเว็บ
3. แอมป์ CDN: แคชที่มีระบบตรวจสอบความถูกต้องในตัวซึ่งจะช่วยเพิ่มประสิทธิภาพไซต์ของคุณ

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับพื้นหลังทางเทคนิคของหน้า AMP ให้ดูวิดีโอด้านล่างที่ Paul Bakaus ของ Google มอบให้ พูดคุยเบื้องต้น บน AMP.

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

AMP HTML

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

ลองมาดูสิ่งที่สำคัญที่สุดที่คุณต้องรู้เกี่ยวกับมัน คุณสามารถดูข้อมูลจำเพาะ AMP HTML แบบเต็มได้.

ตัดสินใจว่าคุณต้องการแยกหน้า AMP หรือไม่

สำหรับหน้าเนื้อหาสแตติกเดียวกันคุณสามารถมีได้ 2 รุ่นแยกกัน - หนึ่งอันสำหรับ AMP และอีกอันสำหรับรุ่นที่ไม่ใช่ AMP คุณยังสามารถเลือกที่จะมี รุ่นเดียวเท่านั้น - หน้า AMP และใช้งานได้ทุกที่ เกี่ยวกับ การสนับสนุนเบราว์เซอร์, การอ้างสิทธิ์หน้า Github ของ AMP:

หากคุณยังคงกังวลเกี่ยวกับการสนับสนุนเบราว์เซอร์ให้ตรวจสอบโพสต์ของ Paul Irish ใน Stackoverflow ของ Google.

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

เพิ่มรหัสต่อไปนี้เพื่อ ส่วนของหน้าที่ไม่ใช่แอมป์:

เพิ่มบรรทัดต่อไปนี้ใน ส่วนของหน้า AMP:

หากคุณมีหน้า AMP เพียงหน้าเดียวคุณก็ยังต้อง ลิงก์จากตัวมันเองด้วยวิธีต่อไปนี้:

เริ่มหม้อไอน้ำ

AMP Project มีข้อเสนอที่แตกต่าง เริ่มต้นต้นแบบ คุณสามารถใช้เพื่อเริ่มต้น ดูที่แผ่นสร้าง AMP HTML ที่ง่ายที่สุดด้านล่าง:

          สวัสดีชาวโลก!  

คุณจะเห็นว่าสำเร็จรูปที่ลิงก์ HTML หน้าปกติโดยใช้ แท็ก > แท็กเพิ่ม ไลบรารี AMP JS.

คุณสามารถมีได้ หนึ่ง สไตล์ชีทฝังตัวและยังมีอีกมากมาย กฎสไตล์ไม่อนุญาต, เช่นคุณไม่สามารถใช้ !สำคัญ รอบคัดเลือก @import กฎและชั้นเรียนหลอก.

อย่าลืมตรวจสอบข้อ จำกัด สไตล์ชีทก่อนที่จะเริ่มเขียน CSS สำหรับหน้า AMP ของคุณ.

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

ดูรูปแบบที่รองรับและไม่รองรับ.

AMP JS

เอกสาร AMP สามารถรวม ไม่มีทั้ง JavaScript ที่เขียนโดยผู้เขียนหรือบุคคลที่สาม, แต่นี่ไม่ได้หมายความว่าหน้าเร่งความเร็วมือถือจะไม่ใช้ JavaScript เลย ไลบรารี JavaScript ของ AMP (รันไทม์ของ AMP) เป็นผู้รับผิดชอบในการโหลดและแสดงผลหน้า AMP อย่างรวดเร็วด้วย การบังคับใช้แนวปฏิบัติที่ดีที่สุด.

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

ส่วนประกอบของ AMP คือ ที่กำหนดโดย AMP runtime. พวกเขาดังกล่าวข้างต้น แท็ก HTML เฉพาะของ AMP คุณต้องใช้แทนคู่หูปกติของพวกเขาเช่น แทนการ แท็ก.

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

แอมป์ให้คุณด้วย ส่วนประกอบ 2 ชนิด:

1. ส่วนประกอบในตัว: พวกมันพร้อมใช้งานในเอกสาร AMP ทุกฉบับเสมอ สร้างขึ้นใน AMP runtime. ปัจจุบันมีห้าคน:
   1. สำหรับการแสดงโฆษณา
   2. สำหรับรูปภาพมันถูกใช้แทน แท็ก
   3. สำหรับการติดตามพิกเซล (ใช้สำหรับนับจำนวนการดูหน้าเว็บ)
   4. สำหรับการฝังไฟล์วิดีโอ HTML5 โดยตรงให้แทนที่ แท็ก
   5. สำหรับองค์ประกอบแบบฝังตัว (สามารถใช้แทน ในบางกรณี)
2. ส่วนประกอบเพิ่มเติม: ส่วนประกอบเพิ่มเติมคุณต้อง รวมไว้อย่างชัดเจน ลงในเอกสาร AMP ของคุณ มีประโยชน์มากมายเช่น และ , ดูรายการทั้งหมด หลายคนสามารถใช้ เนื้อหาที่ฝังจากบริการของบุคคลที่สาม, เช่นจาก Twitter หรือ Instagram.

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

AMP CDN

AMP CDN เป็นพื้นแคชที่เรียกว่า Google AMP Cache. มันดึงเอกสาร AMP ที่ถูกต้องแคชและโหลด AMP CDN ยังมี ระบบการตรวจสอบในตัว.

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

เป็นเรื่องดีที่รู้ว่า AMP CDN ใช้โปรโตคอล HTTP / 2 เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด.

เครื่องมือของ AMP

มีเครื่องมือที่ยอดเยี่ยมบางอย่างที่สามารถช่วยให้คุณใช้งานหน้ามือถือแบบเร่งได้มาดูกันบ้าง.

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

Lullabot ของ ห้องสมุด AMP PHP ช่วยให้คุณแปลงหน้า HTML เป็น AMP HTML และรายงานการปฏิบัติตามเอกสาร HTML ใด ๆ ด้วยมาตรฐาน AMP.

หากคุณต้องการใช้ AMP บนเว็บไซต์ WordPress ของคุณอ่านบทช่วยสอนของ Yoast เกี่ยวกับวิธีตั้งค่า WordPress สำหรับ AMP และวิธีการทำงานของ AMP กับปลั๊กอิน SEO ของ Yoast.

นอกจากนี้คุณยังสามารถดู Automattic's ปลั๊กอิน AMP ที่ช่วยให้คุณเปิดใช้งานเร่งหน้ามือถือบนเว็บไซต์ WordPress ของคุณ.

ข้อควรพิจารณาเพิ่มเติม

หากคุณยังไม่มั่นใจลองดูที่วิดีโอเกี่ยวกับ ทดสอบความเร็วอย่างรวดเร็ว ด้านล่าง.

Jonathan Abrams ผู้ก่อตั้ง Nuzzel อ้างสิทธิ์ได้ดียิ่งขึ้นในขณะที่เขายืนยันว่าแม้แต่ไซต์ที่ปรับให้เหมาะกับอุปกรณ์พกพาเช่น New York Times ก็โหลดได้เร็วขึ้นมาก - แทนที่จะใช้เวลาสามวินาทีในการโหลดหน้าเฉลี่ยหน้าเว็บจะโหลด น้อยกว่าครึ่งวินาที เมื่อเปิดใช้งานเร่งหน้ามือถือของ Google.

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

.