reveal

Cover

𝔄𝔐𝔓 π”žπ”«π”‘ 𝔱π”₯𝔒 π”ͺ𝔦𝔰𝔰𝔦𝔫𝔀 π”­π”žπ”―π”±π”°

π”­π”žπ”²π”© 𝔏𝔦

Profile

π”­π”žπ”²π”© 𝔏𝔦꒐

  • Front End engineer
  • HTML / JavaScript / CSS
  • work @ Verizon Media
  • facebook: mei.studio.li
  • #DoRightThings

Agenda

Agenda

  • - What's AMP ?
  • - What's new on Google SERPs
  • - Rendering performance
  • - CSS limitation
  • - Form / Links & Ally
  • - Image Resource
  • - Fancy & Maintenance
  • - Remote SD fetching
  • - Payment friendly

What's AMP ?

What's AMP ?

AMP is a web component framework to easily create user-first websites / stories / ads / emails.

10:21

amp.dev

What's new on Google SERPs

What's new on Google SERPs

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

10:21

web.dev

Rendering performance

unfold 
Rendering performance


<!doctype html>
<html ⚑ dir="ltr" lang="zh-Hant-TW">

<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Page's title</title>

<link rel="shortcut icon" href="shortcut_icon.png">

<link rel="canonical" href="canonical_address.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,viewport-fit=cover">
<meta name="description" content="page's description">

<link rel="preconnect" href="https://cdn.ampproject.org" crossorigin>show
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>

<link rel="dns-prefetch" href="https://cdn.ampproject.org">
<link rel="dns-prefetch" href="//s.yimg.com">

<style amp-boilerplate />
<style amp-custom> show
/* custom style start from here */
.subject-unit {
  content-visibility: auto;
  ...
}
</style>

<script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script> show
<script async src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" custom-element="amp-carousel"></script>
<script async src="https://cdn.ampproject.org/v0/amp-form-0.1.js" custom-element="amp-form"></script>
<script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>

</head>

<body>
  <header />
  <main >

  <amp-carousel
    width="450"
    height="300"
    layout="responsive"
    type="slides"
    aria-label="Basic carousel"
  >
    <amp-img
      src="image1.jpg"
      layout="fixed"
      width="450"
      height="300"
    ></amp-img>
    ...
    ...
  </amp-carousel>

  </main >
  <footer />
</body>
  
</html>
10:21

amp.dev

CSS limitation

CSS limitation

Whether your style is a professional journalist website or bohemian ecommerce emails, AMP now gives you more room to show it.

10:21

tw.bid.yahoo.com

Links & Ally

unfold 
Form / Links & Ally

<!doctype html>
<html dir="ltr" lang="zh-Hant-TW">
...
<title>Page's title</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,viewport-fit=cover">
...
</head>

<body>

<!-- form element -->
<form>
  <input id="input-name" type="text" />
  <label for="input-name">
    input your name:
  </label>

  <label>
    input you address
    <input type="text" />
  </label>

  <button role="button" aria-label="submit"></button>
</form>

<!-- clear description -->
<a
  href="product_detail.html"
  title="click to visit product detail"
  aria-label="click to visit product detail"
>
  <img src="product_image.png" alt="produt image" />
</a>

<a href="#close" class="btn-close"> show
  close
</a>

<a href="https://cross-origin.com/some_address.html" target="_blank" rel="noopener">
  Visit Cross Origin website
</a>
10:21

tw.bid.yahoo.com

Image Resource

unfold 
Image Resource



Clear definition helps a lot no matter vistor is human or bot.


<amp-img
  layout="responsive"
  width="100"
  height="100"
  src="https://cdn.com/image_1x.jpg"
  srcset="
    https://cdn.com/image_1x.jpg 1x,
    https://cdn.com/image_2x.jpg 2x,
    https://cdn.com/image_3x.jpg 3x
  "
  alt="images fulfill mult display ratio"
></amp-img>

Fancy & Maintenance

unfold 
Fancy & Maintenance


Once the worst amp-component has mutated as the best component ever. Let's take a look what it changed ?



Before:

<ul class="listings">
  <li class="listings__li">
    <div class="item-card">
      <p>item title</p>
      ...
    </div>
  </li>
  ...
  ...
  ...
</ul>

<form id="infinites-listing">
  <a
    on="tab:infinites-listing.submit"
  >
    ζ›΄ε€šη΅ζžœ
  </a>
  <div submit-success template="template-listing"></div>
</form>

<template id="template-listing" type="amp-mustache">
  <ul class="listings">
    {{#hits}}
      <li class="listings__li">
        <div class="item-card">
          <p>{{title}}</p>
          ...
        </div>
      </li>
    {{/#hits}}
  </ul>
</template>



After:

<amp-list
  src="ws_listings.php"
  width="auto"
  height="200"
  items="."
  single-item
  load-more="auto"
  template="template-listing"
>
  <amp-list-load-more load-more-button>
    <a>
      ζ›΄ε€šη΅ζžœ
    </a>
  </amp-list-load-more>
</amp-list>

<template id="template-listing" type="amp-mustache">
  <ul class="listings">
    {{#hits}}
      <li class="listings__li">
        <div class="item-card">
          <p>{{title}}</p>
          ...
        </div>
      </li>
    {{/#hits}}
  </ul>
</template>
10:21

tw.bid.yahoo.com

Remote SD fetching

Remote SD fetching

Use structured data to help Google understand the content of your site and enable special Search result features for your pages.

10:21

www.google.com

Remote SD fetching

unfold 
Remote SD fetching



Use amp-component to do remote structured data fetching.


// CSS 
<style amp-custom>
.remote-sd-fetching {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
</style>


// amp component 
<amp-list
  class="remote-sd-fetching"
  width="1"
  height="1"
  layout="fixed"
  items="."
  single-item
  binding="no"
  src="web-service-for-remote-sd-fetching.php"
>
  <template type="amp-mustache">
    <script type="application/ld+json">
      {{{.}}}
    </script>
  </template>
</amp-list>
10:21

tw.mall.yahoo.com

Remote SD fetching

Validation

Developers could verify structured data through validation tool which provide from google.

10:21

search.google.com/

Payment Request API friendly

unfold 
Payment friendly



The whole new attitude for convience payment experience - Payment Request API



<amp-iframe
  height="44"
  class="payment"
  allowpaymentrequest
  sandbox="allow-scripts allow-same-origin allow-top-navigation allow-modals"
  layout="fixed-height"
  frameborder="0"
  src="https://your-domain.com/amp-payment-request-api-inner.html?_=RANDOM"
>
</amp-iframe>
10:21

blog.lalacube.com

Recap

Recap

  • - Mobile First Indexing & Core Web Vitals
  • - Rendering performance
  • - CSS limitation (75K)
  • - Form / Links & Ally
  • - <amp-img /> & image search
  • - Mighty <amp-list />
  • - Remote SD fetching
  • - Payment friendly

Reference

Reference

thankful

Thanks, all of you.