มาลอง ทำเว็บไซต์แบบโหลดเร็วปริ๊ดด้วย AMP (Accelerated Mobile Pages) กันเถอะ

ก่อนอื่นมาเข้าใจกันก่อนว่า AMP คืออะไร AMP ย่อมาจาก Accelerated Mobile Pages ซึ่งเป็น Technology ของ Google ที่ต้องการให้เว็บแสดงผลรวดเร็วทันทีที่กดไม่ต้องโหลด เป็น Concept เดียวกับ Instant article ซึ่ง AMP เปิดตัวมาซักพักแล้ว แต่ว่า Google พึ่งเปิด เป็นทางการไปไม่กี่วันก่อน ซึ่งหากเรา Search บน mobile แล้ว เว็บไซต์ไหน Support AMP ก็จะมีรูปสายฟ้าโผล่ขึ้นมา

TL;DR
มันคือ Instant article version Google ที่จะแสดงผลใน Google Search

เริ่มต้น

หากคุณใช้ WordPress อยู่แล้วลง Plugin https://wordpress.org/plugins/amp/ หรือ อันไหนก็ได้ที่ Support AMP แล้วข้ามไป ขั้นตอน Verify เลย

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

https://gist.github.com/thangman22/9938e8db1f3148fd4a2263a6dee07ba4.js

Spec ของ tag และ CSS ที่ใช้ไม่หใน AMP

1. <script> ใช้งานไม่ได้ยกเว้นแต่ type=”application/ld+json” ที่เป็น config และ runtime ที่ต้องโหลด ซึ่งลองไปดูในนี้นะครับว่า ใส่อะไรได้บ้าง
2. <img> ต้องเปลี่ยนเป็น <amp-img> และต้องปิดด้วย </amp-img>
3. <video><audio> <iframe> ต้องเปลี่ยนเป็น <amp-video> <amp-audio><amp-iframe>
4. <frame><frameset><object><applet><embed><form> และ input ทั้งหมดยกเว้น button ใช้ไม่ได้
5. <style> ต้องเขียนเป็น <style amp-custom>
6. <link> ใช้ได้เฉพาะ ที่กำหนดไว้ใน http://microformats.org/wiki/existing-rel-values เท่านั้น ส่วน stylesheet, preconnect, prerender, prefetch อาจจะมีปัญหากับ Browser ที่ไม่ support
7. <meta> attubute “http-equiv” ใช้ไม่ได้
8. <a> ใช้กับ link ที่เป็น javascript: ไม่ได้ ถ้าจะใส่ target ต้องเป็น _blank
9. <svg> ใช้ได้
10. on….. ทั้งหลาย เช่น onclick ใช้ไม่ได้
11. ใข้ @import ไม่ได้ใน css
12. Custom font ใช้ได้เฉพาะ
    Typography.com: https://cloud.typography.com
    Fonts.com: https://fast.fonts.net
    Google Fonts: https://fonts.googleapis.com
    Font Awesome: https://maxcdn.bootstrapcdn.com

บอก Google ว่า AMP ของเราคือหน้าไหน

ใส่ tag link เข้าไปในหน้าเว็บปกติของเรา เพื่อเป็นการบอกว่า amp เราคือ url ไหน (แก้ url ใน href ด้วย)

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

นอกจากนั้นในหน้า amp ก็ใส่ tag link เข้าไปบอกด้วยว่า อันไหนคือ link หลักของเรา

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Validate AMP ว่าใช้งานได้มั้ย

มีอยู่ 4 วิธีครับ

1. เข้าหน้า AMP แล้วเปิด Developer tools ใน Chrome ขึ้นมา เลือกหน้า console ถ้าขึ้นแบบนี้แสดงว่าใช้งานได้ ถ้ามี error chrome ก็จะบอกว่าให้เราไปแก้อะไรบ้าง

2. Validate ผ่าน https://validator.ampproject.org/ อันนี้เจ๋งตรงจะบอกเลยว่าต้องแก้บรรทัดไหน

3. ลง extension Support Chrome และ Opera ครับ

4.ใช้ command line tools วิธีการลง npm install -g amphtml-validator

npm install -g amphtml-validator

เวลาใช้งานก็สามารถพิมพ์ คำสั่งข้างล่างได้เลย

amphtml-validator https://www.ampproject.org/

Extended components

ด้วยความที่ AMP มีข้อจำกัดเยอะมากเรื่อง embed script ทำให้เราไม่สามารถใส่ javascript ลงไปได้ แต่ถ้าต้องการใส่ พวก Twitter Facebook Youtube ลงไปจะทำยังไงหละ AMP เลยมีสิ่งที่เรียกว่า Extended components อยู่ โดยเป็น tag ที่ AMP allow ให้ใช้ได้ วิธีการใช้คือ เรียก script ที่ต้องการใช้เช่นในตัวอย่างคือ Youtube

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

หลังจากนั้นก็เรียก ผ่าน component แบบนี้ได้เลย

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>

ซึ่ง Extended ยังมีอีกมากมายตามไปดูได้ที่ https://www.ampproject.org/docs/reference/extended.html

รอ Google มาเก็บ

หลังจากที่ เช็คแล้วว่า AMP ของเราทำงานได้ ก็รอแค่ Google มา index เว็บ ซึ่ง เราสามารถดูได้ว่า Google มา index แล้วหรือยังจาก Search console https://www.google.com/webmasters/tools/

ทดสอบ AMP

ตอนนี้ Google ประกาศออกมาแล้วว่า เปิดให้ใช้อย่างเป็นทางการแล้ว แต่ผมลองดูก็ยังไม่ติด วิธีการเทสตอนนี้คือ เข้าไปที่ g.co/ampdemo แล้วก็ลอง search ให้ขึ้นเว็บไชต์ของเรา ถ้าตรงนั้นขึ้นรูป สายฟ้า ก็แสดงว่า ใช้งานได้แล้ว ซึ่ง Speed ของ AMP ก็จะประมาณนี้ครับ

บางคนตอนนี้ยังไม่เคยชินกับ AMP ส่วนใหญ๋ก็จะรู้จักแต่ Instant Article แต่บอกได้เลยครับเร็วไม่แพ้กัน แถม อยู่บน Platform เปิดมากกว่าด้วย อย่างล่าสุดก็มีข่าวออกมาแล้วว่า Microsoft Bing จะ Support AMP ก็ลองไปเล่นดูครับ น่าสนุกดีเหมือนกัน