Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

Accelerated Mobile Pages

Faster is better!

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

PROTIP: A recent innovation (from the geniuses at Google) enables websites to load nearly instantly even on mobile devices with slow connections.

This means that visitors will be more engaged, and thus buy more, etc.

Official sites about AMP

The rest of this section describes its use.

Marvel at the speed of AMP

See how fast the Jekyll theme’s demo website (by Adam Geitgey) renders:

See even faster rendering on Google’s CDN (Content Delivery Network):

or

See Google’s search demo featuring the AMP carousel:

Videos about AMP

Paul Bakaus, Developer Advocate has two videos:

 

The more technical:

 

Malte Ubl (@cramforce) at Google I/O 2016 (May): “How AMP achieves its speed”:

 

Alex Russell at Google I/O 2016 (May): “AMP + Progressive Web Apps: Start fast, stay engaged”:

 

BTW, the above videos were served using AMP on this Jekyll-based site.

How I added AMP to my Jekyll-based site

PROTIP: You don’t need to have the whole site under AMP. Add the JavaScript to use AMP when you can.

Add JavaScript libraries

  1. Add in the <HEAD> section this: (In a Jekyll site, edit the _head.html within the _includes folder.)

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

  2. Add this above the ending </HEAD> tag:

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

Yes, these really should be under the fold, but that’s what Google does.

Use <amp-youtube> tags

Instead of this:

https://www.youtube.com/watch?v=lBTCB7yLs8Y &LT;

Use this:


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

To get around in Markdown, put the above in a amp-video.html file within the _includes folder, then use a Liquid include tag referencing that file:


   {% include youtube-amp-video-01.html %}

WordPress Plug-ins

Jekyll sites to use AMP

If you see more, please let us know!

Get a sample Jekyll AMP site

  1. Clone a AMP-enabled Jekyll theme from:

     

  2. Obtain dependencies:

    bundle

    The response on May 24, 2016:

    Using hitimes 1.2.2
Using colorator 0.1
Using ffi 1.9.10
Using sass 3.4.15
Using rb-fsevent 0.9.5
Using kramdown 1.9.0
Using liquid 3.0.6
Using mercenary 0.3.5
Using rouge 1.10.1
Using safe_yaml 1.0.4
Using jekyll-paginate 1.1.0
Using bundler 1.11.2
Using timers 4.0.1
Using rb-inotify 0.9.5
Using jekyll-sass-converter 1.3.0
Using celluloid 0.16.0
Using listen 2.10.1
Using jekyll-watch 1.2.1
Using jekyll 3.1.2
Using jekyll-compose 0.4.1
Bundle complete! 3 Gemfile dependencies, 20 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

    NOTE: Previously, on March 30, 2016, there was an error “Gem::RemoteFetcher::UnknownHostError: no such name (https://rubygems.org/gems/hitimes-1.2.2.gem)”

  3. Build the site:

    jekyll serve

    I get these errors:

Configuration file: /Users/mac/gits/jekyll/amplify/_config.yml
            Source: /Users/mac/gits/jekyll/amplify
       Destination: /Users/mac/gits/jekyll/amplify/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.909 seconds.
 Auto-regeneration: enabled for '/Users/mac/gits/jekyll/amplify'
Configuration file: /Users/mac/gits/jekyll/amplify/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Previously, this needed:

```
gem install jekyll-watch -v 1.1
gem install jekyll-paginate
```

  1. Bring up:

     bundle exec jekyll serve

  2. In a browser, view the site in validation mode:

    localhost://4000

AMP Validator

  1. In a browser, view the site in validation mode:

    http://localhost:4000/#development=1

Examples include:

  • no scrollng elements
  • no stylesheets over 50K

Add NewsArticle for better search positioning

PROTIP: Google gives preferential treatment to AMP pages on Mobile Search.

To get featured on Google search results, the _includes/metadata.json file provides the NewsArticle file Google uses. See:

Convert SCSS to CSS

With AMP, all CSS must be inline (no external CSS files) within a &LT;style amp-custom> in the header. Because of this, the main css file for this site is in _includes/styles.scss (instead of the standard css/ folder) and in-lined into the header of every page via the special scssify filter in _includes/head.html.

CAUTION: The AMP specification forbids the use of some CSS selectors and attributes. Because of this, it is not a good idea to include the main stylesheet by default.

  1. Copy from within folder css file main.scss.

  2. Open folder _includes to paste in file styles.scss.

  3. Rename file name main.scss to styles.scss.

  4. Edit folder _includes file head.htm to define the include:

</code>
   {% include styles.scss %}
   </code>

  1. Paste in the target page between style tags.

  2. Ensure the page still renders correctly.

In order to do DNS pre-connects for faster speed, AMP needs an extra attribute in links to make links discoverable by the Google search engine. This makes it happen on existing Jekyll templates:

  1. Get the rb files local:

    git clone https://github.com/juusaw/amp-jekyll

  2. Copy in folder _plugins the ruby files from the repo:

    amp_generate.rb and amp_filter.rb.

  3. Copy into the _layouts folder file amp.html from the repo.

  4. Install for HTML parsing:

    gem install nokogiri

  5. Install for image processing:

    gem install fastimage

  6. Add this to post headers:

</code>
   {% if page.path contains '_posts' %}
   <link rel="amphtml" href="https://wilsonmar.github.io/accelerated-mobile-pages/index.html">
   {% endif %}
   </code>

Add rel=”canonical” to regular href links.

Use <amp-ad> for advertisements

AMP enables lazy-load of and prioritization of ads identified like this:


   <amp-ad width=300 height=250 type="a9"
   data-axx_size="300x250"
   data-axx_pubname="test1"
   data-aax_src="302">
   </amp-ad>

Ad Platforms integrated into AMP:

  • AdSense by Google
  • A9 by Amazon
  • DoubleClick
  • Ad Reactor
  • Ad Tech by AOL

Use &LT;amp-img> instead of &LT;img> tags

AMP gets some of its speed from caching images and video. It needs special tags with both a height and width specified. Examples:


   <amp-img media="(min-width: 650px)" width="600" height="300" 
   layout="responsive" src="/assets/images/your_picture.jpg"></amp-img>

(Replace src contents with your own)

Add other extended AMP tags

They are described at:

NOTE: AMP implements RAIL.

Add NewsArticle for better search positioning

The AMP Project provides helpers for many other types of content like audio, ads, Google Analytics, etc. Built-in AMP tags are described at:

Coding JavaScript

  • FastDOM library

More videos

Opinion about implementing AMP

More on front-end styling

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML

  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)

  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development

  12. Gatsby app generator

  13. Website styles
  14. Website Styling

  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites

  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau

Accelerated Mobile Pages was published on .