AMP HTML คืออะไร ? + สอนวิธีใช้

บทความนี้ ทาง SiamHTML จะมาพูดถึงวิธีรับมือกับโปรเจคใหม่ของ Google ที่เพิ่งเปิดตัวไปเมื่อสัปดาห์ก่อนอย่าง Accelerated Mobile Pages ครับ เรามาดูกันซิว่ามันส่งผลกระทบอะไรกับ front-end developer อย่างเราบ้าง ?

เพราะโมบายเว็บทุกวันนี้มันโหลดช้า !

ต้องยอมรับนะครับว่าทุกวันนี้ เทคโนโลยีของการทำเว็บมันเปลี่ยนแปลงไปไวมากๆ การพัฒนาเว็บก็เลยทำได้หลายวิธี บางคนมีท่าที่ตัวเองถนัด ก็เลยเลือกใช้ท่านั้นมาตลอด จนอาจไม่รู้ว่ามันมีวิธีที่ดีกว่านั้นแล้ว บางคนไม่ถนัดเลยซักท่า search เจอท่าไหนใน stackoverflow ก็ใช้ท่านั้นเลย เอามายำๆ กันจนงานเสร็จ สุดท้ายแล้วเว็บมันก็ช้าสิครับ เพราะมีโค้ดอะไรก็ไม่รู้ใส่เข้ามาเต็มไปหมด จะมี developer ซักกี่คนที่มีความเข้าใจในเรื่องของ web performance อย่างลึกซึ้ง และใส่ใจในทุกรายละเอียด ?

Google คิดค้น Accelerated Mobile Pages

Google มองว่านี่คือปัญหาครับ ทุกวันนี้เรามักจะเห็นหลายๆ เว็บเลย ที่โหลดช้าเอามากๆ โดยเฉพาะในโมบาย Google เลยพยายามหาว่า มันพอจะมีวิธีไหนมั้ย ที่ทำให้เว็บต่างๆ โหลดได้เร็วเหมือนๆ กันหมด ? วิธีที่ Google คิดได้ก็คือการ “จำกัด” HTML ครับ

Google มองว่าตัว developer เองนั่นแหละครับ ที่ไปทำให้เว็บมันช้าด้วยการเขียนโค้ดที่ไม่คำนึงถึง performance ก็เลยปิ๊งไอเดียสร้าง HTML แบบใหม่ขึ้นมาที่มีชื่อเรียกว่า AMP HTML โดยเจ้า HTML แบบใหม่ที่ว่านี้ มันก็คือ HTML แบบปกติที่เราเขียนกันอยู่ทุกวันนั่นแหละครับ เพียงแต่มันจะมี tag ใหม่ๆ บางตัวเพิ่มเข้ามาให้เราได้ใช้กัน ซึ่ง tag พวกนี้เอง ที่ Google จะเอาไว้ใช้ “ล้อมกรอบ” ไม่ให้โค้ดของเราออกนอกลู่นอกทาง หรือพูดง่ายๆ ก็คือ AMP HTML เป็น subset ของ HTML ที่เพิ่ม tag ใหม่บางตัวเข้ามา เพื่อที่จะเอาไว้คุม performance ของหน้าเว็บไม่ให้ตกลงไปนั่นเองครับ

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

ก่อนจะไปดูหน้าตาของ AMP HTML ผมขอเล่าก่อนนะครับว่า AMP HTML มันประกอบไปด้วย 3 ส่วนนี้

  • HTML Components คือ tag ใหม่ ที่ Google บอกให้เราเปลี่ยนมาใช้แทน tag แบบเดิม
  • JS Library เป็น JavaScript ที่เอาไว้อ่าน tag ใหม่ที่เพิ่มเข้ามา
  • Validator เอาไว้ validate ว่าหน้าเว็บนี้เขียนโค้ดถูกต้องตามหลัก AMP HTML แล้วหรือยัง

ตัวอย่างโค้ดของ AMP HTML

ก่อนที่เราจะไปดูหน้าตาของ tag ใหม่ที่เพิ่มเข้ามาใน AMP HTML ผมอยากให้เรารู้ข้อตกลงเบื้องต้นของ AMP HTML ก่อนนะครับว่า หน้าเว็บที่จะนับว่าเป็น AMP HTML ได้ จะต้องมีลักษณะอย่างไร ลองดูตัวอย่างโค้ด AMP HTML ด้านล่างนี้ฮะ

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

1. ประกาศก่อนว่าหน้าเว็บนี้ใช้ AMP HTML

เริ่มด้วยการใส่ attribute amp เข้าไปที่ html แบบนี้ฮะ

2. ทำ Canonical กลับไปที่หน้าหลัก

จากนั้นก็กำหนด canonical ให้เป็น url ของหน้าเว็บแบบปกติของเราครับ

3. กำหนด Viewport Meta Tag

ส่วนที่ meta viewport ให้เรากำหนดเหมือนกับการทำ responsive web ทั่วไปได้เลยฮะ

4. Inline Critical CSS

สำหรับ css นี่ ให้เราใส่เฉพาะโค้ด critical css เข้าไปครับ ส่วนโค้ด css ที่เหลือ เราค่อยโหลดตามมาทีหลังด้วยวิธี asynchronous

5. โหลด JavaScript แบบ Async

สุดท้าย ให้เราโหลด AMP JS library มาใช้ครับ และแน่นอนว่าเราต้องโหลดมันมาแบบ async

จริงๆ แล้ว ข้อตกลงมันมีเยอะกว่านี้นะครับ เราสามารถเข้าไปดูทั้งหมดได้ที่ Required markup

HTML Tags ใน AMP HTML

เมื่อวางโครงเสร็จเรียบร้อยแล้ว เรามาดู tag ของ AMP HTML กันเลยครับ ว่ามันมีแบบไหนบ้าง

  • Tag ที่ห้ามใช้มีหลายๆ tag เลยนะครับ ที่ไม่สามารถใช้ได้แล้วใน AMP HTML แต่ส่วนใหญ่ก็จะเป็น tag ที่เราไม่ค่อยได้ใช้กันอยู่แล้ว อย่างพวก frame, frameset รวมไปถึง tag อย่าง object, param, embed ฮะ ที่ต้องระวังหน่อยก็จะมี tag ในกลุ่มของ form และ input ต่างๆ รวมไปถึง textarea และ select ที่จะใช้ไม่ได้แล้วเหมือนกันครับ
  • Tag ที่ใช้ได้ภายใต้เงื่อนไขที่กำหนดเช่น script ที่จะให้ใช้ได้เฉพาะโหลด AMP JS library รวมไปถึง library อื่นๆ ที่ AMP HTML เป็นคนจัดหาไว้ให้เท่านั้นครับ นอกจากนั้นก็จะมี style และ link ที่ให้ใส่ได้เฉพาะตามข้อตกลงที่ AMP HTML ระบุไว้เท่านั้นเหมือนกัน ทั้งนี้ก็เพื่อที่จะคุมคุณภาพของโค้ดไม่ให้มีโค้ดที่ไม่จำเป็นนั่นเองครับ
  • Tag ที่หน้าตาเปลี่ยนไปtag อย่าง img, video, audio และ iframe จะมีการเพิ่ม prefix amp- เข้าไปข้างหน้าเป็น amp-img, amp-video, amp-audio และ amp-iframe ครับ จะสังเกตว่า tag พวกนี้ล้วนมีการโหลดของข้างนอกมาใช้ Google เค้าเลยต้องให้เราเปลี่ยนมาใช้ tag ใหม่ เพื่อที่จะสามารถจัดการเรื่องการโหลดทรัพยากรตรงนี้ได้นั่นเองครับ

เพื่อให้เห็นภาพมากขึ้น ลองดูตัวอย่างโค้ด AMP HTML ด้านล่างนี้ฮะ

จากโค้ดด้านบน ผมขออธิบายเพิ่มเติมนิดนึงฮะ

  • เราสามารถใช้ style เพื่อ inline critical css ได้นะครับ แต่ต้องใส่ attribute amp-custom เข้าไปด้วย
  • เรายังสามารถใช้ script ได้อยู่นะครับ เพียงแต่ type จะต้องกำหนดให้เป็น application/ld+json เท่านั้น เพราะ type ที่ว่านี้จะไม่มีการ execute ใดๆ จึงไม่มีผลต่อ performance ฮะ
  • พวก script ที่เอาไว้ทำ ui ต่างๆ อย่างเช่น carousel นั้น เรายังสามารถใช้ได้อยู่นะครับ แต่จะต้องเปลี่ยนมาใช้ของที่ Google เค้าเตรียมไว้ให้เท่านั้นฮะ
  • AMP HTML รองรับการใส่ Ad ด้วยนะครับ ผ่านทาง amp-ad อย่าลืมนะครับว่าคนทำนั้นคือ Google :p

ยังมี tag อีกมากเลยนะครับ ที่ผมยังไม่ได้พูดถึง เนื้อหาในส่วนนี้ผมอยากให้ไปอ่านเพิ่มเติมที่หัวข้อ HTML Tags ของ AMP HTML ครับ เพราะมันยังมีการอัพเดทอยู่เรื่อยๆ เลย

AMP HTML มีผลกับ Google Search !

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

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

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

อนาคตของ AMP HTML

ก็ต้องคอยติดตามข่าวสารจาก Google อย่างใกล้ชิดเลยนะครับว่า อนาคตของ AMP HTML นั้นจะเป็นอย่างไร ถึงแม้ว่าจะมีเว็บยักษ์ใหญ่หลายราย ที่เริ่มทำเวอร์ชั่น AMP HTML ไปบ้างแล้ว แต่ก็มีบางกระแสที่ไม่ค่อยเห็นด้วยกับไอเดียนี้เท่าไร เพราะเค้ามองว่ามันเป็นการจำกัดกันเกินไป จนลดความเป็น web ลงนั่นเองครับ

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

อัพเดท! มันมาแน่ กุมภาพันธ์นี้…

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

(Visited 10,208 times, 5 visits today)

10 Responses to “AMP HTML คืออะไร ? + สอนวิธีใช้”

  1. อืม… ถ้ามีผลกับ Ranking นี่ลำบากแน่ ต้องเปลี่ยนหลายเว็บเลยทีนี้

  2. อืม… ถ้ามีผลกับ Ranking นี่ลำบากแน่ ต้องเปลี่ยนหลายเว็บเลยทีนี้

  3. ถ้าจำกัด tag ในส่วนของ form input บางส่วนแล้วจะมีปัญหากับ หน้าจอ แบบ pc มั้ยอ่ะคับ

  4. การใช้ AMP HTML เราจะสร้างหน้าขึ้นมาต่างหากครับ หน้าปกติก็ยังต้องมีอยู่เหมือนเดิมฮะ ส่วนในหน้าที่เป็น AMP HTML ก็ให้ตัดอะไรที่ไม่จำเป็นออกให้หมด จะได้โหลดเร็วๆ ครับ ^__^

  5. เน็ตเมื่อก่อน 56k นี่ยัดทั้งรูปทั้ง flash กันเต็มอิ่ม เดี๋ยวนี้เน็ตแม่งอย่างไว แต่ต้องทำเว็บให้เบา ให้โหลดได้ทุก device #เรามาถึงจุดนี้ได้ยังไง

  6. Suranart Niamcome แปลว่าเราต้องทำหน้าเดียวสอง source code เหรอครับ?

  7. Tumit Watcharapol ถูกแล้วครับ

  8. Tumit Watcharapol ถูกแล้วครับ

  9. ปรบมือครับ

  10. ปรบมือครับ

Leave a Reply