Amplify for Jekyll
A Jekyll html theme in the vague style of Medium.com built using Google AMP
Google’s Accelerated Mobile Pages Project (a.k.a. "Google AMP" or Google
Why use Google AMP?
There are two reasons to use Google AMP:
First, it’s really fast! An often sited claim (by Amazon, Yahoo, Walmart and 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?
Second, Google might feature your AMP page in Search Results! Google gives 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?
To get a general idea of how this theme performs, let’s compare this page hosted on Github vs. another static page hosted on Github. We can use https://facebook.github.io/react/ as a comparison page.
Of course our page and https://facebook.github.io/react/ have different 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!
If you are on a fast connection, both pages load about the same speed but our page renders the main content much faster:
First page vist with no throttling
Second page visit with no throttling
You’ll see the main content render much faster because AMP 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.
You can get even faster speeds when your page is served via Google’s AMP CDN .
So there’s some tiny benefit on a 100mbs wired connection. But optimization is much more 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
Even a horribly slow connection with high latency, the user will still see a page render in half a second. That’s great! The difference between 385ms and 28s is the different between someone reading your blog is skipping your blog.
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
git clone <blah>
Step 3: Tweak
Just fill in everything in the
# Site settings section. You’ll want to set your site’s title, your name, your twitter username, etc.
Step 4: Run
jekyll serve and then open http://localhost:4000/ to see your site!
Step 5: Publish your site just like any other Jekyll site .
Google AMP Limitations
Google AMP sets many strict limits on what you can include in your web pages . A few of these are worth talking about:
Limitation: All CSS must be inline (no external css files).
Because of this, the main css file for this site is in
_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
Limitation: Size all resources statically
Every image you include in your page must have a height and width. This also applies to other things like embedding videos or other resources. Check below for more details.
Writing Posts with Google AMP
Writing posts works just like it does normally in Jekyll except when you want to include extra resources likes pictures, videos, embedded Twitter posts, etc.
Google AMP has it’s own set of special html tags for including content. You should use these instead of normal Markdown or HTML tags.
The two you are are most likely to need are
Images in your posts
<amp-img width="600" height="300" layout="responsive" src="/assets/images/your_picture.jpg"></amp-img>
Youtube Videos in your posts
<amp-youtube data-videoid="NpEaa2P7qZI" layout="responsive" width="480" height="270"></amp-youtube>
Embedding other types of content
The AMP Project provides helpers for many other types of content like audio, ads, Google Analytics, etc.
Built-in AMP tags:
Extended AMP tags:
Validating your page with Google AMP
Google AMP adds built-in validation logic to make sure your pages follow all the rules so they render as fast as possible.
To check your page, just add
You will either see a success message:
Powered by AMP :zap: HTML – Version 1457112743399 AMP validation successful.
Or you will see a list of errors to fix:
Powered by AMP :zap: 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
Google will cache valid AMP pages if you link to them with one of these urls:
https://cdn.ampproject.org/c/s/<your page url here>
https://amp.gstatic.com/c/s/<your page url here>
But keep in mind these two limitations:
- The caches don’t refresh that often. So don’t view these urls until your page is done!
/sfrom both urls if your page isn’t served over
Required Schema Data
To actually get your page featured in Google search results, it needs to include a http://schema.org NewsArticle schema. See
_includes/metadata.json for the version generated by default. You might want to tweak it.
This theme is inspired by Mediator by Dirk Fabisch . I used some of the css and html from that theme as a starting point. Thanks!
MIT. See LICENSE file in repo.
转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Using Google AMP to build a Medium-style Jekyll site that loads in 65ms