มาลองทำเว็บของคุณ ด้วย AMP HTML & AMP JS กัน

ย้อนกลับไปสองปีที่แล้ว Google เปิดตัว AMP และก็โฆษนาว่า เป็น instance load version Google ซึ่ง จริงๆแล้วสิ่งที่ Google พูดถึงในวันนั้นเป็นแค่ AMP Cache เท่านั้น แต่ จริงๆแล้ว AMP มีมากกว่านั้น และ เราสามารถเอา AMP มาใช่กับเว็บเราได้โดยไม่ต้องคำนึงถึงเรื่องการ Cache ของ Google เลย

ก่อนอื่นเราต้องเข้าใจก่อนว่า AMP ประกอบด้วย 3 ส่วนใหญ่ๆ

• AMP HTML คือ spec html ที่ใช้ บน AMP
• AMP JS คือ Lib ต่างๆ ที่ใช้บน AMP
• AMP Cache ที่คือ สิ่งที่ Google และพูดถึง จนคนคิดว่า AMP มีแค่นี้ แต่จริงๆยังมีข้างบนอีกสอง

ทำไมถึงควรเอา AMP มาทำเว็บของเรา

จริงๆย้อนกลับไปเมื่อหลายอาทิตย์ก่อนที่ผมทำการบ้านเรื่อง WordPress PWA ก็ไปเจอว่า WordPress ในอนาคตจะปรับให้หน้าแรกกลายเป็น AMP โดย Default เลย (https://xwp.co/) ผมก็เลยไปนั่งดูว่า ทำไมถึงจะทำอย่างงั้นเพราะว่า Google ก็ไม่ได้ cache ทุกเว็บ ลำพัง AMP HTML กับ AMP JS ก็แทบไม่มีอะไร แต่พอผมไปลองดูในเว็บ AMP ก็เจอเลยว่า AMP กลายเป็น UI Component สำหรับทำเว็บไปแล้ว มันไม่ใช่หน้าตาโง่ๆอีกต่อไปแล้ว เรามีอิสระที่จะปรับแต่ง Css หรืออะไรได้มากขึ้นกว่าเดิมมากๆ นาทีนั้นก็เลยคิดว่า เอา AMP มาทำเว็บใหม่ของเราดีมั้ย…..

และแล้วก็เริ่มลองทำ

อย่างแรก็พยายมไปลองดูก่อนว่า AMP มี component อะไรให้เราบ้าง เพราะว่า Spec ของ AMP เองไม่อณุญาติให้เราใส่ JS script ของเราได้ทำให้ AMP เองไม่ได้ทำได้ทุกอย่าง พอผมดูแล้วก็มี component ที่อยากจะใช้อยู่เหมือนกัน อย่างเช่น amp-accordion amp-carousel ซึ่ง ผมก็ลอง copy css มาจาก เว็บเก่า และเอามาทำกับ version ใหม่ แต่ด้วยความที่ ผมเอง เพิ่ม feature เข้าไปเยอะมากๆ ก็เลยเจอเรื่องที่ต้องทำเพิ่มเยอะเหมือนกัน และเหมือนกับการเอา component คนอื่นมาใช้ครับ AMP component ก็มี limitation อยู่เหมือนกัน แต่สุดท้ายแล้วก็จบไปด้วยดีครับ วิธีการก็ไม่ต่างกับการทำเว็บทั่วไปครับแค่ เราต้องรู้ว่าจะใช้ component นี้ยังไงเท่านั้นเอง ซึ่งเว็บที่ทำเสร็จแล้วสามารถเข้าไปดูได้ที่ https://thangman22.com

เร็วขึ้นมั้ย

จากที่วัดใน light house ก็ไม่ได้เร็วขึ้นมากเท่าไหร่ แต่ flow หลายๆอย่างทำให้มันดูลื่นมาก เพราะตัว AMP เอง จะพยายาม load เฉพาะ ของที่ใช้ และพยายามโหลดทุกอย่างเป็น async ตลอดเวลา แต่ถ้าให้มองว่าเอามาใช้แทน UI component ก็แอบรู้สึกดีนะครับ เพราะว่าตัว AMP เอง มีของมาให้เราค่อนข้างครบเหมือนกัน แต่ของผมเทสออกมาแล้วคะแนนไม่ค่อยสูงมาก เพราะดันใช้ fontawesome ซึ่งมันโหลดช้ามากๆ และข้อเสียนึงคือ ผมใช้ JS+SVG version ของ fontawesome ไม่ได้ เพราะ ว่า AMP ไม่อณุญาติ แต่เอาจริงๆแล้วถ้าไม่ได้สน Cache ของ Google เราก็ เรียก script ได้นะครับ มันไม่ได้พังอะไรแค่จะ validate ไม่ผ่าน

ควรทำมั้ย? แล้วจะเริ่มยังไง

ถ้าใครทำเว็บที่เป็น static มากๆ AMP ก็เป็นทางเลือกที่เหมือนกันครับ เพราะว่า ถึงแม้ตัว AMP จะสามารถโหลด Data จาก server มาได้ แต่การ interact กลับไปที่ server ยังทำได้ค่อนข้างยากอยู่ และถ้าใครอยากลองเริ่มดูก็ลองไปโหลด template สำเร็จรูปมาจาก AMPstart ได้ครับ (สวยมากกกก เอามาเป็น template ตั้งต้นได้เลย) ส่วนถ้าใครอยากทำเองให้ลองไปดูที่เว็บ AMPProject ได้เหมือนกันครับ

จริงๆผมมีอีกอย่างที่ชอบมากๆคือ AMP Stories ซึ่งมันคือ ตัว component ที่ทำให้เราเอามาสร้าง Stories แบบ Instagram หรือ Facebook ได้ด้วย HTML

สรุป

AMP เป็นทางเลือกที่น่าสนใจสำหรับเอามาทำเว็บ ด้วย component ที่ค่อนข้างพร้อม และเราก็ตกแต่งได้พอสมควร แค่อาจจะต้องทำความเข้าใจหน่อยว่าจะเขียนยังไง และอย่างที่บอกครับ ถึงแม้ Google ประเทศไทยยัง Cache AMP ไม่ได้ เราก็ทำเว็บด้วย AMP ได้ครับ