Technology

รู้จักกับ Accelerated Mobile Pages กันเถอะ

By Arnon Puitrakul - 23 ธันวาคม 2015

รู้จักกับ Accelerated Mobile Pages กันเถอะ

ในบทความนี้เราจะมาทำความรู้จักโปรเจ็คใหม่ล่าสุดแกะกล่องจาก Google กันนั่นคือ Accelerated Mobile Pages หรือที่เราเรียกย่อ ๆ ว่า AMP นั่นเอง

Accelerated Mobile Pages คืออะไร ?

AMP หรือ Accelerated Mobile Pages มันเป็นซับเซ็ตตัวนึงของ HTML เหตุมันเกิดมาจาก Google มองว่า การพัฒนาเว็บในปัจจุบันนั้นสามารถทำได้หลากหลายทางมาก ๆ จนในบางวิธีนั้นได้ผลงานตามที่คนสร้างต้องการจริงแต่ในแง่ของ Performance ถือว่าแย่มาก ๆ Google เลยสร้าง AMP HTML ขึ้นมาเพื่อมาช่วยคุมเรื่องของ Performance นั่นเอง (เอาเป็นว่า มันเหมือนกฏที่สร้างมาให้เราทำตาม แล้วจะมั่นใจได้ว่า Performance ของเว็บเราดีแน่นอนก็ได้)

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

  • AMP HTML - มันคือ HTML ที่เราเขียนกันในทุกวันนี้ปกติ แต่จะมีการเพิ่มมาของกฏและ Tag ใหม่บางประการซึ่ง Tag ทั้งหมดที่เพิ่มเข้ามาจะมีชื่อ amp แล้วตามด้วยชื่อ Tag ปกติที่เราใช้กัน โดยเราจะเรียก Tag พวกนี้ว่า AMP HTML Components
  • AMP JS - เป็น Javascript Library ที่ใช้อ่าน AMP HTML Components ที่มีเพิ่มขึ้นมาจาก HTML ปกติ ในเว็บบอกว่า มันสามารถทำให้เรามั่นใจได้ว่าเว็บของเราจะมี Performance ที่เร็วขึ้น เพราะนอกจากที่มันจะช่วยอ่าน AMP HTML Components แล้วมันยังช่วยจัดการการโหลดหน้าเว็บทำให้เร็วขึ้นอีกด้วย (อันนี้อ้างอิงจากเว็บของ AMP นะ)
  • AMP CDN - ทำหน้าที่เป็น ตัวเช็ค ว่าโค๊ตที่เราเขียน มันถูกต้องตามกฏที่กำหนดไว้หรือไม่ โดยเราสามารถตรวจสอบข้อผิดพลาดได้จากหน้า Console ของ Web Browser ได้ทันทีเลย สะดวกมาก ๆ
    ในที่นี้ผมจะไม่ขอพูดถึงการใช้งาน หรือกฏต่างที่ต่าง AMP ได้กำหนดไว้ สามารถดูเพิ่มเติมได้ที่เว็บ Offical ของ AMP Project ได้เลย

สำหรับผู้ใช้ Wordpress

ตอนนี้ทาง Wordpress ก็มี Plugin ที่ทำให้เว็บ Blog ของเราสามารถรองรับ AMP HTML ดังกล่าวได้ โดยเราสามารถเข้าไปโหลด Plugin ดังกล่าวได้ที่ เว็บของ Wordpress แล้วมาติดตั้งได้เลย
หลังจากที่เราติดตั้งและ Activate แล้วเราสามารถเรียกหน้าที่เป็น AMP ได้โดยการพิมพ์ ?amp=1 ตามหลัง Permalinks ของเราได้เลย แต่หน้าที่ทาง Plugin ให้มานั่นจะเป็นหน้าโง่ ๆ ธรรมดาที่มีบทความ เราสามารถที่จะเข้าไปแก้ไขหน้าที่แสดงได้โดยการเข้าไปแก้ไฟล์ที่ชื่อว่า template.php โดยตรงแล้วอัพโหลดกลับเข้าไปที่เว็บของเราได้เลย
จากนั้นเราสามารถบังคับให้มัน Redirect ไปที่หน้าที่เป็น AMP ได้โดยการตั้ง Permalinks ใหม่ได้ โดยให้เราเลือกเป็น Custom แล้วพิมพ์ ?amp=1 ต่อท้ายไป เท่านี้หน้าเว็บของเราก็เป็น Accelerated Mobile Pages เรียบร้อยแล้ว
Plugin ตัวนี้ยังอยู่ในเวอร์ชั่นแรก ๆ เท่านั้น อาจจะมีการเปลี่ยนแปลงได้ตลอดเวลา และอาจจะมีความเสี่ยงในการใช้งาน ฉะนั้นศึกษาให้ดีก่อนที่จะเอามาใช้ในเว็บจริงนะครับ

ใช้แล้วเป็นยังไง ไหนบอกหมอสิ !

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

[Accelerated Mobile Pages - Before]

ภาพด้านบนเป็นหน้าที่ไม่ได้ใช้ AMP หรือก็คือหน้าปกตินี่แหละ จะเห็นได้ว่าใช้เวลาโหลด DOM Content อยู่ที่ 4.65 วินาที และ 188 KB

Accelerated Mobile Pages - After

แต่หลังจากที่ใช้ AMP แล้ว ผลที่ได้ออกมาค่อนข้างที่จะน่าพอใจอยู่ ใช้เวลาโหลด DOM Content อยู่ที่ 1.43 วินาทีและโหลด Content ไปแค่ 154 KB เท่านั้น ถือว่าดีขึ้นค่อนข้างมาก น่าประทับใจจริง ๆ
Note : หน้าที่ใช้โหลดทั้ง 2 มีหน้าตา และ Content เหมือนกัน โค๊ตเกือบเหมือน ต่างกันตรงที่มี Tag amp เข้ามา และตัวเลขที่เอามาแสดงเกิดจากการ Refresh หลาย ๆ ครั้งและเอาอันที่ใกล้เคียงกับค่าเฉลี่ยที่สุดมาให้ดูนะครับ

สรุป

Accelerated Mobile Pages ดูเป็นเทคโนโลยีที่น่าจะมีอนาคตที่สดใจอยู่พอสมควร ดูจากในตอนนี้มีบริษัทไอทีหลายเจ้าเริ่มหันมาเขียนเว็บโดยการใช้ AMP เข้ามาช่วย ไม่ว่าจะเป็น Twitter และ Line เป็นต้น ล่าสุดใน Blog ของ AMP บอกถึงความคืบหน้าของ Project และจะเริ่มแสดงผลการค้นหาของหน้าที่ใช้ AMP ในช่วงเดือนกุมภาพันธ์ที่จะถึงนี้ ก็ลองมาดูกันว่า AMP จะเป็นยังไงต่อไป แต่สำหรับในตอนนี้ก็เป็นอะไรที่น่าลองมาจับเล่นอยู่ เพราะดูจาก Performance ที่เพิ่มขึ้นก็ถือว่าคุ้มค่ามาก จะเป็นยังไงก็ขอให้โชคดีครับ

Read Next...

External HDD เสียอย่าพึ่งทิ้ง มาเปลี่ยน HDD กันเถอะ

External HDD เสียอย่าพึ่งทิ้ง มาเปลี่ยน HDD กันเถอะ

เรื่องของเรื่องมีอยู่ว่า Desktop External HDD คู่ใจของเราอย่าง My Book มันมีอาการแปลก ๆ มาสักพัก ไฟล์บางไฟล์อ่านไม่ได้ และบางครั้งก็ช้า จนพบว่า อ๋อ น้องลาโลกแล้ว แต่เราจะบอกว่า คนที่เจออาการแบบนี้ อย่าพึ่งทิ้งนะ เพราะเราสามารถซื้อ HDD มาเปลี่ยนแล้วใช้งานต่อได้ วันนี้เราจะมาเล่าให้อ่านกัน...

ใช้ HDD ขนาดใหญ่ หรือ HDD ขนาดเล็กจำนวนมากใน NAS ดี?

ใช้ HDD ขนาดใหญ่ หรือ HDD ขนาดเล็กจำนวนมากใน NAS ดี?

จากเมื่อเดือนก่อน ๆ เราเล่าเรื่องที่เราเปลี่ยน HDD ไปในความจุที่ใหญ่ขึ้น ทำให้เราคิดย้อนตอนที่เรา Design NAS ที่จะใช้ในบ้านครั้งแรกว่า เราควรจะใช้ HDD ขนาดเท่าไหร่ดี จะใช้ HDD ขนาดความจุเล็ก ๆ จำนวนมาก หรือเอาความจุสูง ๆ ไม่กี่ลูกดีกว่า วันนี้เราเอาประสบการณ์มาเล่ากัน...

Dual Stack และ Tunnelling วิธีการเชื่อมโลก IPv4 และ IPv6 เข้าด้วยกัน

Dual Stack และ Tunnelling วิธีการเชื่อมโลก IPv4 และ IPv6 เข้าด้วยกัน

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

ประหยัดเงินหลักหมื่นค่า Mac ด้วย External SSD

ประหยัดเงินหลักหมื่นค่า Mac ด้วย External SSD

หนึ่งในตัวเลือกที่ Apple ให้เราเลือกตอนจะซื้อเครื่อง Mac คือ Storage หรือขนาดของที่เก็บข้อมูล ปัญหาคือ ยิ่งเยอะ มันทำให้เรามีพื้นที่เก็บข้อมูลมากขึ้น แต่มันมากับราคาที่สูงเหลือเกิน วันนี้เราเอาตัวเลือกในการประหยัดเงินกว่าหมื่นบาท มาใช้ External SSD กัน...