Google に
AMP URL API で
その後、
実施した
AMP Optimizer とは 何か?
AMP HTML を
自前の
amp-toolbox/packages/optimizer at master · ampproject/amp-toolbox のWhy is it faster?
の
Why is it faster?
In order to avoid Flash of Unstyled Content (FOUC) and reflows resulting from to the usage of web-components, AMP requires websites to add the amp-boilerplate in the header.
なぜそれが 速いのですか?
FOUC(Flash of Unstyled Content)や
The amp-boilerplate renders the page invisible by changing it’s opacity, while the fonts and the AMP Runtime load. Once the AMP runtime is loaded, it is able to correctly set the sizes of the custom elements and once that happens, the runtimes makes the page visible again.
amp-boilerplate は、
As a consequence, the first render of the page doesn’t happen until the AMP Runtime is loaded.
結果、
To improve this, AMP server-side rendering applies the same rules as the AMP Runtime on the server. This ensures that the reflow will not happen and the AMP boilerplate is no longer needed. The first render no longer depends on the AMP Runtime being loaded, which improves load times.
これを
通常の
前提
当ブログは、
この
Pythonの
Version python -V Python 3.6.7
Django の
Version pip list | grep Django Django 1.11.20
Mezzanine の
Version pip list | grep Mezzanine Mezzanine 4.3.1
Blog で AMP Optimizer で 最適化した HTML を 表示する ために 実施した こと
処理の 全体像
処理の 流れ
処理の
AMP ページの
ページリンクURLを 調整して おく。 kemsakurai/amp-optimized-page-generator: Amp optimized page generator for https://www.monotalk.xyz で、
日次で、 AMP ページを スクレイピング、 取得した HTMLを インプットに、 最適化した HTMLを 生成する。 ユーザーが
AMP Cache に アクセスし、 リンクを クリックすると、 urls.py で URLが 調整した ページリンクか どうかを 判断、 調整した ページリンクであれば、 最適化した ページを 表示する。 urls.py で
URLが 調整した ページリンクではない 場合、 つまり 通常の Webページからの リンクの 場合は、 通常ページを 表示する。
実施した こと
以下、
1. AMP ページの ページリンクURLの 調整
filter を
作成した
フィルター @register.filter def append_amp_optimized_param(url): url_parts = list(urlparse.urlparse(url)) url_parts[2] = "/ampoptimized" + url_parts[2] return urlparse.urlunparse(url_parts)
Djangテンプレートの
修正箇所 <li><a href="{{ post.get_absolute_url|append_amp_optimized_param }}">{{ post.title }}</a></li>
2. amp-optimized-page-generator で、 日次で AMP ページを スクレイピング、 取得した HTML を インプットに、 最適化した HTML を 生成する。
Node.js で、
kemsakurai/amp-optimized-page-generator: Amp optimized page generator for https://www.monotalk.xyz
ツールは
ampUrlFinder.js
Sitemap.xml に記載されている ページから、 AMP HTML の URLを 取得し、 通常ページ URLと、 AMP HTML の URLの 関係を 示す JSONファイルを 生成します。 htmlGenerator.js
ampUrlFinder.js
が生成した JSONファイルを 元に、 最適化した HTMLファイルを 生成します。
ツールがconfig.js
で
- config.js
module.exports = { siteMapUrl : 'https://www.monotalk.xyz/sitemap.xml', domainUrl : 'https://www.monotalk.xyz' };
ツール実行には
- gen_amp_optimized_page.sh
#!/bin/sh PROJECT_HOME="/var/xxxxx/" # run npm task cd /root/script/amp-optimized-page-generator npm run find-amp-url npm run gen-html # cp gen htmls # django のテンプレートディレクトリに生成したhtmlをコピーする rm -Rf "$PROJECT_HOME"amp_start_blog_post/templates/amp_start_blog_post/htmls \cp -Rf htmls "$PROJECT_HOME"amp_start_blog_post/templates/amp_start_blog_post/htmls #################################### # clear cache BLOG_ROOT="var/xxxxx/" cd $BLOG_ROOT python3.6 manage.py clear_cache ################################################### # RESTART httpd /bin/systemctl restart httpd.service
3. urls.py での ディスパッチ設定と、 View の 作成
3. ユーザーが<wbr> AMP Cache に<wbr>アクセスし、<wbr>リンクを<wbr>クリックすると、<wbr>urls.py で<wbr> URLが<wbr>調整した<wbr>ページリンクか<wbr>どうかを<wbr>判断、<wbr>調整した<wbr>ページリンクであれば、<wbr>最適化した<wbr>ページを<wbr>表示する。<wbr>
と、4. urls.py で<wbr> URLが<wbr>調整した<wbr>ページリンクではない<wbr>場合、<wbr>つまり<wbr>通常の<wbr>Webページからの<wbr>リンクの<wbr>場合は、<wbr>通常ページを<wbr>表示する。<wbr>
を
urls.py
urlpatterns += [ ... # add amp_start_blog_post url("^ampoptimized/", OptimizedAmpView.as_view()), ]
views.py
from django.views import View from django.shortcuts import render from django.conf import settings as django_settings import urllib.parse class OptimizedAmpView(View): def get(self, request, *args, **kwargs): base_url = urllib.parse.quote(request.path) elems = base_url.split("/") file_name = elems[len(elems) -2][:100] + ".html" return render(request, 'amp_start_blog_post/htmls/' + file_name)
OptimizedAmpView
の作りが 適用で、 上記で ファイルが ない 場合は、 500エラーが 発生します。
ファイルが内場合は、 404エラーと ハンドリングした ほうが 良いかと 思います。
ファイルがなければ、 404エラーを 返す。 render
だと、テンプレートと して 評価されるので、 直接ファイルを 取得するように 変更しました。 from django.views import View from django.http import HttpResponse from django.http import Http404 import urllib.parse from pathlib import Path class OptimizedAmpView(View): def get(self, request, *args, **kwargs): base_url = urllib.parse.quote(request.path) elems = base_url.split("/") file_name = elems[len(elems) -2][:100] + ".html" response = HttpResponse(content_type="text/html") directory = str(Path(__file__).resolve().parents[1]) try: for line in open(directory + '/amp_start_blog_post/templates/amp_start_blog_post/htmls/' + file_name): response.write(line) except FileNotFoundError: raise Http404("Page does not exist") return response
Page Speed Insights の 結果、 適用して 思った こと
最適化した
Page Speed Insights の 結果
以下は、
以下は、
通常の
何より
適用して 思った こと
適用した
自動広告が
表示されない
これは、通常の AMPページでも 最近出てきていない 気が しますが、 自動広告が 表示されません。
広告タグを埋める 場合は、 通常HTMLの 広告タグを 設定しないと 表示されないのかもしれません。 通常の
HTMLを 差し込んでも いいかもしれない
試してないですが、Optimizeした HTMLに それだけでは 表現と して 足りない 部分に 通常 HTML を 差し込んでも 良いかもしれません。 Google Analytics には
元の HTML に GTM タグを 設定を していると 記録された
GTM はAMP と 通常ページで タグの 差し替えが 必要に 思いましたが、 サーバー上で 表示してみると、 AMP ページと 同様に 記録されました。
参考
以下、
広告は
以上です。
コメント