Google AMP - บทนำ

Google Accelerated Mobile Pages(Google-AMP) เป็นโครงการโอเพ่นซอร์สใหม่ของ Google ที่ออกแบบมาเป็นพิเศษเพื่อสร้างหน้าเว็บที่มีน้ำหนักเบาโดยใช้ amp html จุดมุ่งหมายหลักของโครงการนี้คือเพื่อให้แน่ใจว่าโค้ด AMP ทำงานได้ดีและโหลดได้เร็วบนอุปกรณ์ทั้งหมดที่เป็นไปได้เช่นสมาร์ทโฟนและแท็บเล็ต

AMP เป็นเพียงส่วนเสริมของ HTML มาตรฐาน แท็ก HTML มีการเปลี่ยนแปลงเล็กน้อยและ AMP ได้เพิ่มข้อ จำกัด ในการใช้งาน ในบทนี้เราจะแสดงรายการแท็ก html ซึ่งมีการเปลี่ยนแปลงและข้อ จำกัด ที่เพิ่มเข้ามา แท็กที่เกี่ยวข้องกับการโหลดทรัพยากรภายนอกเช่นรูปภาพ, css, js, การส่งแบบฟอร์ม, วิดีโอ, เสียง ฯลฯ มีการเปลี่ยนแปลง

นอกจากนี้ยังมีคุณสมบัติใหม่มากมายที่เพิ่มเข้ามาใน amp เช่น amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox และอื่น ๆ อีกมากมายซึ่งสามารถใช้ได้โดยตรงในหน้า html พักผ่อนอื่น ๆ ที่มีไว้สำหรับการแสดงผลจะใช้ตามที่เป็นอยู่

ด้วยการเปลี่ยนแปลงและคุณลักษณะใหม่ทั้งหมดนี้ AMP สัญญาว่าจะให้โหลดได้เร็วขึ้นประสิทธิภาพที่ดีขึ้นสำหรับหน้าเว็บเมื่อใช้ในสภาพแวดล้อมจริง

เมื่อคุณค้นหาสิ่งใดก็ตามในการค้นหาของ Google บนมือถือของคุณการแสดงผลที่เห็นในภาพหมุนของ Google ที่ด้านบนส่วนใหญ่จะเป็นหน้าแอมป์ดังที่แสดงด้านล่าง

เมื่อคุณคลิกหน้า AMP URL ที่คุณได้รับในแถบที่อยู่จะเป็นดังนี้ -

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

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

ตัวอย่างหน้าแอมป์

ตัวอย่างหน้าแอมป์แสดงอยู่ด้านล่าง -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

สิ่งที่ควรทำและไม่ควรทำในหน้า AMP

ให้เราเข้าใจสิ่งที่ควรทำและไม่ควรทำที่โปรแกรมเมอร์ต้องปฏิบัติตามในหน้า AMP

แท็กบังคับ

มีแท็กบังคับบางอย่างที่ต้องรวมไว้ในหน้าแอมป์ตามที่ระบุด้านล่าง -

เราต้องตรวจสอบให้แน่ใจว่ามีการเพิ่ม amp หรือ⚡ลงในแท็ก html ดังที่แสดงด้านล่าง -

<html amp>
   OR
<html ⚡>

ควรเพิ่มแท็ก <head> และ <body> ในหน้า html
ควรเพิ่มเมตาแท็กที่จำเป็นต่อไปนี้ในส่วนหัวของหน้า มิฉะนั้นจะล้มเหลวในการตรวจสอบความถูกต้องของแอมป์

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

ลิงก์ของ rel = "canonical" ที่จะเพิ่มเข้าไปใน head tag

<link rel = "canonical" href = "./regular-html-version.html">

แท็กสไตล์พร้อม amp-boilerplate -

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

แท็ก Noscript พร้อม amp-สำเร็จรูป -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

สำคัญมากแท็ก amp script ที่เพิ่ม async ตามที่แสดงด้านล่าง -

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

ในกรณีที่คุณต้องการเพิ่ม CSS ที่กำหนดเองลงในเพจโปรดจดบันทึกไว้ที่นี่เราไม่สามารถเรียกสไตล์ชีตภายนอกในแอมป์เพจได้ ในการเพิ่ม CSS ที่กำหนดเอง CSS ทั้งหมดของคุณต้องไปที่นี่ดังที่แสดง -

<style amp-custom>
   //all your styles here
</style>

แท็กสไตล์ควรมีแอตทริบิวต์ที่กำหนดเองและเพิ่มเข้าไป

สคริปต์สำหรับส่วนประกอบ AMP

โปรดทราบว่าไม่อนุญาตให้ใช้สคริปต์ที่มี src และ type =” text / javascript” ใน amp page โดยเด็ดขาด อนุญาตให้เพิ่มเฉพาะแท็กสคริปต์ที่ async และเกี่ยวข้องกับ amp-components ในส่วน head

ส่วนนี้แสดงสคริปต์บางส่วนที่ใช้สำหรับส่วนประกอบแอมป์ตามที่ระบุด้านล่าง -

amp-ad

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

amp-iframe

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

สังเกตว่าสคริปต์มีแอตทริบิวต์ async และองค์ประกอบที่กำหนดเองพร้อมชื่อของคอมโพเนนต์ amp ที่จะโหลด Amp ตรวจสอบความถูกต้องของแท็กสคริปต์ตามคุณสมบัติ async และองค์ประกอบที่กำหนดเองและไม่อนุญาตให้โหลดสคริปต์อื่น ๆ มันต้องใช้เวลาtype=application/json ซึ่งเราได้เพิ่มไว้ในไฟล์ตัวอย่างดังที่แสดงด้านล่าง

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

สคริปต์ข้างต้นสามารถใช้กับส่วนประกอบ amp อื่น ๆ ได้หากจำเป็นตัวอย่างเช่นสำหรับ amp-analytics

แท็ก HTML

จนถึงตอนนี้เราได้เห็นแท็กบังคับที่จำเป็นในหน้าแอมป์ ตอนนี้เราจะพูดถึงองค์ประกอบ HTML ที่อนุญาต / ไม่อนุญาตและข้อ จำกัด ที่กำหนดไว้

นี่คือรายการแท็ก HTML ที่อนุญาต / ไม่อนุญาต -

ซีเนียร์ No	แท็ก HTML และคำอธิบาย
1	img แท็กนี้ถูกแทนที่ด้วย amp-img ไม่อนุญาตให้ใช้แท็ก img โดยตรงในหน้า AMP
2	video แทนที่ด้วย amp-video
3	audio แทนที่ด้วยแอมป์เสียง
4	iframe แทนที่ด้วย amp-iframe
5	object ไม่ได้รับอนุญาต
6	embed ไม่ได้รับอนุญาต
7	form สามารถใช้เป็น <form> เราต้องเพิ่มสคริปต์เพื่อให้ทำงานกับฟอร์มในหน้า AMP Example − `<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>`
8	Input elements `Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed`
9	<fieldset> ได้รับอนุญาต
10	<label> ได้รับอนุญาต
11	P, div, header,footer,section ได้รับอนุญาต
12	button ได้รับอนุญาต
13	a แท็ก <a> ได้รับอนุญาตโดยมีเงื่อนไขต่อไปนี้ href ไม่ควรขึ้นต้นด้วย javascript หากมีค่าแอตทริบิวต์เป้าหมายต้องเป็น _blank
14	svg ไม่ได้รับอนุญาต
15	meta ได้รับอนุญาต
16	Link ได้รับอนุญาต แต่ไม่อนุญาตให้โหลดสไตล์ชีตภายนอก
17	style ได้รับอนุญาต จำเป็นต้องมี amp-boilerplate หรือ amp-custom แอตทริบิวต์
18	base ไม่ได้รับอนุญาต
19	noscript ได้รับอนุญาต

ความคิดเห็น

ไม่อนุญาตให้แสดงความคิดเห็น html ตามเงื่อนไข ตัวอย่างเช่น -

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

เหตุการณ์ HTML

เหตุการณ์ที่เราใช้ในหน้า html เช่น onclick, onmouseover ไม่ได้รับอนุญาตในหน้า AMP

เราสามารถใช้เหตุการณ์ได้ดังนี้ -

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

นี่คือตัวอย่างเหตุการณ์ที่ใช้กับองค์ประกอบอินพุต -

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

เหตุการณ์ที่ใช้จะถูกป้อนเข้า - throlled

ชั้นเรียน

คุณไม่สามารถมีชั้นเรียนในเพจของคุณด้วยคำนำหน้าเช่น -amp- or i-amp-. นอกจากนี้คุณสามารถใช้ชื่อคลาสตามความต้องการของคุณ

รหัส

คุณไม่สามารถมีรหัสสำหรับองค์ประกอบ html ของคุณที่นำหน้าด้วย -amp หรือ i-amp- นอกจากนี้คุณสามารถใช้รหัสกับองค์ประกอบ html ของคุณได้ตามความต้องการของคุณ

ลิงค์

ไม่อนุญาตให้ใช้ JavaScript เป็น href ในหน้า amp

Example

<a href = "javascript:callfunc();">click me</a>

สไตล์ชีท

ไม่อนุญาตให้ใช้สไตล์ชีตภายนอกในหน้า AMP เป็นไปได้ที่จะเพิ่มสไตล์ที่จำเป็นสำหรับหน้าภายใน -

<style amp-custom>
   //all your styles here
</style>

แท็กสไตล์ควรมี amp-custom เพิ่มแอตทริบิวต์แล้ว

@ -rules

อนุญาตให้ใช้ @ -rules ต่อไปนี้ในสไตล์ชีต -

@ font-face, @keyframes, @media, @page, @ รองรับ @ นำเข้าจะไม่ได้รับอนุญาต การสนับสนุนสำหรับสิ่งเดียวกันจะถูกเพิ่มในอนาคต
@keyframes ได้รับอนุญาตให้ใช้ภายใน<styleamp-custom> . หากมี @keyframes มากเกินไปจะเป็นการดีที่จะสร้าง<styleamp-keyframes> แท็กและเรียกแท็กนี้ที่ส่วนท้ายของเอกสารแอมป์
ชื่อคลาสรหัสชื่อแท็กและแอตทริบิวต์ไม่ควรนำหน้าด้วย -amp- และ i-amp- เนื่องจากใช้ภายในในโค้ด amp ซึ่งอาจทำให้เกิดความขัดแย้งหากกำหนดไว้บนเพจด้วยขณะรันไทม์
!important ไม่อนุญาตให้ใช้คุณสมบัติภายในสไตล์เนื่องจากแอมป์ต้องการควบคุมขนาดองค์ประกอบเมื่อใดก็ตามที่ต้องการ

แบบอักษรที่กำหนดเอง

สไตล์ชีตสำหรับแบบอักษรที่กำหนดเองได้รับอนุญาตในหน้า AMP

Example

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

แบบอักษรเป็นรายการที่อนุญาตพิเศษสำหรับการติดตามต้นกำเนิดซึ่งสามารถใช้ในหน้า AMP ได้

Fonts.com - https://fast.fonts.net
Google Fonts - https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (แทนที่ kitId ตาม)

Note - อนุญาตให้ใช้แบบอักษรที่กำหนดเอง @ font-face ในหน้าแอมป์

Example

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP Runtime

สภาพแวดล้อมรันไทม์ของแอมป์จะถูกตัดสินใจเมื่อโหลดไฟล์หลัก amp -

<script async src = "https://cdn.ampproject.org/v0.js"></script>

ไฟล์หลักดูแลการโหลดทรัพยากรภายนอกตัดสินใจจัดลำดับความสำคัญว่าจะโหลดเมื่อใดและยังช่วยในการตรวจสอบความถูกต้องของเอกสาร amp เมื่อเพิ่ม # development = 1 ลงใน amp URL

Example

http://localhost:8080/googleamp/amppage.html#development=1

URL ด้านบนเมื่อเรียกใช้งานในเบราว์เซอร์จะแสดงรายการข้อผิดพลาดหากล้มเหลวในการตรวจสอบความถูกต้องของแอมป์หรือแสดงข้อความยืนยันความถูกต้องของแอมป์หากไม่มีข้อผิดพลาด

ส่วนประกอบ AMP

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

มีส่วนประกอบ 2 ประเภทใน AMP

Built-in
External

Note- <amp-img> เป็นส่วนประกอบในตัวและพร้อมใช้งานหากมีการเพิ่มไฟล์ core amp js ส่วนประกอบภายนอกเช่น <amp-ad>, <amp-facebook>, <amp-video> และอื่น ๆ อีกมากมายต้องการไฟล์ js ที่เกี่ยวข้องกับคอมโพเนนต์ที่จะเพิ่ม

คุณสมบัติทั่วไป

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

คุณลักษณะข้างต้นทั้งหมดที่แสดงไว้สำหรับ AMP จะกล่าวถึงโดยละเอียดในบทต่อ ๆ ไปของบทช่วยสอนนี้

โปรดทราบว่าตัวอย่างทั้งหมดในบทช่วยสอนนี้ได้รับการทดสอบสำหรับอุปกรณ์และใช้โหมด Google Mobile Emulator ให้เราเรียนรู้เกี่ยวกับเรื่องนี้โดยละเอียดตอนนี้

Google Mobile Emulator

ในการใช้โปรแกรมจำลองอุปกรณ์เคลื่อนที่ของ Google ให้เปิดเบราว์เซอร์ Chrome คลิกขวาและเปิดคอนโซลนักพัฒนาตามที่แสดงด้านล่าง -

เราสามารถเห็นเครื่องมือสำหรับนักพัฒนาสำหรับ Chrome ดังที่แสดงด้านบน กดลิงค์ที่คุณต้องการทดสอบในเบราว์เซอร์ สังเกตว่าหน้านี้แสดงในโหมดเดสก์ท็อป

ในการรับหน้าด้านบนเพื่อทดสอบอุปกรณ์ให้คลิกที่สลับแถบเครื่องมืออุปกรณ์ตามที่แสดงด้านล่าง -

คุณยังสามารถใช้แป้นพิมพ์ลัด Ctrl + shift + M สิ่งนี้จะเปลี่ยนโหมดเดสก์ท็อปเป็นโหมดอุปกรณ์ดังที่แสดงด้านล่าง -

รายชื่ออุปกรณ์สามารถดูได้ตามที่แสดงด้านล่าง -

คุณสามารถเลือกอุปกรณ์ที่คุณต้องการทดสอบหน้า โปรดทราบว่าหน้าทั้งหมดในบทช่วยสอนเหล่านี้ได้รับการทดสอบบน Google Mobile Emulator ตามที่แสดงด้านบน คุณลักษณะเดียวกันนี้สามารถใช้ได้กับ Firefox และเบราว์เซอร์ Internet Explorer ล่าสุดด้วย