README.md A Jekyll html theme in the vague style of Medium.com built using Google AMP Google’s Accelerated Mobile Pages Project Check out a live example of this theme at There are two reasons to use Google AMP: First, it’s really fast! An often sited claim (by Amazon, Yahoo, Walmart and Second, Google might feature your AMP page in Search Results! Google gives To get a general idea of how this theme performs, let’s compare this page Of course our page and https://facebook.github.io/react/ have different If you are on a fast connection, both pages load about the same speed but our You’ll see the main content render much faster because AMP You can get even faster speeds when your So there’s some tiny benefit on a 100mbs wired connection. But optimization is much more Even a horribly slow connection with high latency, the user will still see a page render in To use this theme, it’s just like using any other Jekyll template: Step 1: Install Jekyll Step 2: Clone this repo to your computer Step 3: Tweak Just fill in everything in the Step 4: Run Step 5: Publish your site Google AMP sets many Limitation: All CSS must be inline (no external css files). Because of this, the main css file for this site is in Limitation: Size all resources statically Every image you include in your page must have a height and width. This also Writing posts works Google AMP has it’s own set of special html tags for including content. You The two you are are most likely to need are The AMP Project provides helpers for many other types of content like audio, Built-in AMP tags: Extended AMP tags: Google AMP adds built-in validation logic to make sure your pages follow all To check your page, just add http://localhost:4000/#development=1 You will either see a success message: Or you will see a list of errors to fix: Google will cache valid AMP pages if you link to them with one of these urls: Or: But keep in mind these two limitations: To actually get your page featured in Google search results, it needs to include This theme is inspired by MIT. See LICENSE file in repo.
(a.k.a. “Google AMP” or Google ) is an open-source project that defines rules
for creating websites that load nearly instantly even on mobile devices with
slow connections.
http://ageitgey.github.io/amplify/
or
via Google’s CDN.Screenshot
Why use Google AMP?
others) is that every extra 100ms improvement in page load time increases
incremental revenue by up to 1%. Your personal blog might not be selling
anything, but why settle for a slow page and risk losing readers?
preferential treatment to AMP pages on Mobile Search. When it displays your
page in the AMP search results widget, it will even serve your page through
it’s own CDN to make the page load even faster. It’s similar to how
Facebook Instant Articles works on the
Facebook platform.How fast is this theme?
hosted on Github vs. another static page hosted on Github. We can use
https://facebook.github.io/react/ as a comparison page.
layouts. But the main point is that the React page is another typical
static site hosted on Github and is well-designed. So it should give us
a rough idea of how a typical page might perform. I’m not suggesting anything
is wrong with their page. It’s actually pretty fast!
page renders the main content much faster:First page vist with no throttling
Second page visit with no throttling
doesn’t allow anything in your page
that would block the page from rendering after the initial HTML loads. This means no external
css, no custom js, etc.
page is served via Google’s AMP CDN.
important on a slow, high-latency mobile connection (i.e. most actual internet users in 2016).
Let’s try loading the page using the “Regular 2G (250kb/s, 300ms RT)” throttling setting in
Chrome Dev Tools:First page vist with “Regular 2G” throttling
Second page visit with “Regular 2G” throttling
half a second. That’s great! The difference between 385ms and 28s is the different between
someone reading your blog is skipping your blog.Getting Started
_config.yml
.# Site settings
section.
You’ll want to set your site’s title, your name, your twitter username, etc.jekyll serve
and then open
http://localhost:4000/ to see your site!
just like any other Jekyll site.Google AMP Limitations
strict limits on what you can include in your web pages.
A few of these are worth talking about:_includes/styles.scss
instead of in the normal css/
Jekyll folder. This css file is inlined
into the header of every page via the special scssify
filter in _includes/head.html
.
applies to other things like embedding videos or other resources. Check below
for more details.Writing Posts with Google AMP
just like it does normally in Jekyll
except when you want to include extra resources likes pictures, videos,
embedded Twitter posts, etc.
should use these instead of normal Markdown or HTML tags. and
:
Images in your posts
Youtube Videos in your posts
Embedding other types of content
ads, Google Analytics, etc.
Validating your page with Google AMP
the rules so they render as fast as possible.#development=1
to any url on your site and then
check the javascript console in your browser.Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation successful.
Powered by AMP ⚡ HTML – Version 1457112743399
AMP validation had errors:
The attribute 'style' may not appear in tag 'span'
The attribute 'style' may not appear in tag 'div'
Making Google serve your page
https://cdn.ampproject.org/c/s/
https://amp.gstatic.com/c/s/
is done!/s
from both urls if your page isn’t served over https://
.Required Schema Data
a http://schema.org NewsArticle schema. See _includes/metadata.json
for the
version generated by default. You might want to tweak it.Credits
Mediator by Dirk Fabisch. I used some
of the css and html from that theme as a starting point. Thanks!License
Original URL: http://feedproxy.google.com/~r/feedsapi/BwPx/~3/kd-q7NzcL38/amplify