Django/Mezzanine Template に critical CSS 組み込む思索と施作 2

Django/Mezzanine Templateにcritical CSS 組み込む思索と施作 1 | Monotalk の続きです。
critical CSS を Django/Mezzanine の template に組み込む方法を検討します。

前提

以下の環境で実行しています。

• OS
  CentOS release 6.9 (Final)

• Python Version
  Python 2.7.8

• Package (必要そうなものだけ抜粋)
  Django (1.10.7) Mezzanine (4.2.3) mezzanine-pagedown (1.0)

動的ページ での critical CSS を読み込む際の関心事

critical CSS は、「卵か先か、鶏が先か」な代物で、実装パターンとしては以下、3パターンがあると考えました。

1. ページ描画時に critical css を生成する。次回の読み込み時は cache から取得する。²
   [2] 一度目の読み込み時は遅い。

2. デプロイ後に、別タスクで、critical css を生成する。ページ側はファイルが生成されていたら、html 上にインライン展開する。

3. 開発環境でデプロイ後に、事前に生成しておく。Production 環境では事前生成したものを組み込み、読み込む。

3 でできると、パフォーマンス、耐障害性は良くなりそうですが、個人 Blog の投稿、デプロイの仕組みとしては組み込みが難しいため、1、2 のどちらかで上手く実装できるかを検討します。

Django pulgin で 作成されているものがあるか ?

Django で、critical CSS の生成、組み込みが可能が plugin があるか調べてみました。
現在、martinblech/django-critical: Inlines critical path CSS and defers loading full CSS asynchronously. が見つかりました。
この記事では、このプラグインをインストールして、具合を見てみようかと思います。
以降は、django-critical について記載します。

Django-critical を使う

設定の流れ

django-critical を使用するためには以下が必要になります。

1.前提となる node.js のライブラリのインストール
django-critical は、pocketjoso/penthouse: Generate critical css for your urls に依存していて、 penthouse は npm に依存していて、npm は node.js に依存しているため、周辺のミドルウェアのインストールが必要になります。

2.django-critical のインストール、設定
django-critical のインストール、設定を実施します。

3.template ファイルの調整
template ファイルに読み込み記述を追加する必要があります。

4.動作確認

1. 前提となる node.js のライブラリのインストール

node.js 関連のツールをインストールしていきます。

• node npm のインストール
  node.jsをyumでインストールする(centos6.5) - Qiita を参考にしました。
  

  yum install gcc gcc-c++
  yum install epel-release
  yum install nodejs npm --enablerepo=epel
  

  WARNING が出ますが、強行します。
  

  パッケージをダウンロードしています:
  warning: rpmts_HdrFromFdno: Header V4 RSA/SHA1 Signature, key ID f2ee9d55: NOKEY
  Retrieving key from file:///etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-SIG-SCLo
  Importing GPG key 0xF2EE9D55:
   Userid : CentOS SoftwareCollections SIG (https://wiki.centos.org/SpecialInterestGroup/SCLo) <security@centos.org>
   Package: centos-release-scl-rh-2-3.el6.centos.noarch (@extras)
   From   : /etc/pki/rpm-gpg/RPM-GPG-KEY-CentOS-SIG-SCLo
  

• penthouse のインストール
  django-critical で使用可能な penthouse の version は 結構前のものです。
  python からは、index.js ではなく、penthouse.js を指定する必要があり、0.4.0 以前だと、penthouse.js がバンドルされていますので、ここでは、alpha 版ではない1番新しい version の0.3.6をインストールします。
  また、settings.py の default 設定に従う場合は、django-project の root フォルダの配下に node_module フォルダがあると、設定がしやすいので、install コマンドは django-project の root フォルダで実施するのをお勧めします。
  

  npm install penthouse@0.3.6       
  

2.django-criticalのインストール、設定

django-critical には、encoding 関連のバグがあり、マルチバイド文字列を含む html 、もしくは、encoding 設定が UTF-8 等だと、plugin 内の処理でエラーとなります。このため、以下 pullrequest を参考に、プログラムを修正する必要があります。
あまりよい修正の仕方ではないのかもしれませんが、取り込めば動かすことができます。
Fixes Encoding issue by programmdesign · Pull Request #4 · martinblech/django-critical

django-critical を folk して上記の修正を取り込んだものを以下に UP しました。 kemsakurai/django-critical: Inlines critical path CSS and defers loading full CSS asynchronously.
この folk したものをインストールします。

django-critical のインストール

pip で django-critical をインストールします。

pip install git+https://github.com/kemsakurai/django-critical
pip list | grep django-critical
---------------------------------------------
django-critical (0.1.1)
---------------------------------------------

設定

基本的に、README.md の設定に従い設定を行います。
settings.py に設定を追加します。

• INSTALLED_APPS critical を追加
  

  INSTALLED_APPS = (
      # other apps
      "critical",
  )
  

• MIDDLEWARE_CLASSES に、"critical.middleware.CriticalCssMiddleware" を追加
  

  MIDDLEWARE_CLASSES = (
      ....
      # django-htmlmin
      "htmlmin.middleware.HtmlMinifyMiddleware",
      "critical.middleware.CriticalCssMiddleware",
      "django.contrib.sessions.middleware.SessionMiddleware",
      ...
      )
  

• CRITICAL_PENTHOUSE_PATH と、CRITICAL_PHANTOMJS_PATH の設定
  以下のように、penthouse.js の path と phantomjs の path を設定します。
  phantomjs は、penthouse.js をインストールすると、芋づるでインストールされます。
  

  CRITICAL_PENTHOUSE_PATH = os.path.join(
      BASE_DIR, 'node_modules/penthouse/penthouse.js')
  
  CRITICAL_PHANTOMJS_PATH = os.path.join(
      BASE_DIR, 'node_modules/penthouse/node_modules/phantomjs/bin/phantomjs')
  

3.template ファイルの調整

以下、テンプレートタグの抜粋です。全量はmezzanine-theme-clean-blog/base.html at master · kemsakurai/mezzanine-theme-clean-blog をご確認ください。

• base.htmlの抜粋
  

      {% load critical %}
      {% critical %}
      {% compress css %}
          <!-- Bootstrap Core CSS -->
          <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
          <link href="{% static "css/clean-blog.min.css" %}" rel="stylesheet">
          <!-- Custom Fonts -->
          <link href="{% static "css/font-awesome.min.css" %}" rel="stylesheet">  
          <link href="{% static "css/fonts.css" %}" rel="stylesheet">
          <!-- Code Hilite -->
          {% ifinstalled mezzanine_pagedown %}
          <link rel="stylesheet" href="{% static "css/codehilite.css" %}">
          {% endifinstalled %}        
          {% if LANGUAGE_BIDI %}
           <link rel="stylesheet" href="{% static "css/rtl.css" %}">
          {% endif %}
          {% ifinstalled cartridge.shop %}
          <link rel="stylesheet" href="{% static "css/cartridge.css" %}">
          {% if LANGUAGE_BIDI %}
          <link rel="stylesheet" href="{% static "css/cartridge.rtl.css" %}">
          {% endif %}
          {% endifinstalled %}
          {% block extra_css %}{% endblock %}
      {% endcompress %}
      {% endcritical %}
      .................
  
      {% autoescape off %}
      {% critical_async %}
      {% endautoescape %}
      </body>
  

• criticalタグのロード
  {% load critical %} でタグの読み込みをします。

• criticalCSS を生成したい箇所を囲む
  {% critical %}、 {% endcritical %} で、criticalCSSを生成したい箇所を囲みます。
  上記は、タグ内に django-compressor の {% compress css %} タグがあり、圧縮、結合して作成されたcssファイルのcriticalCSSを生成します。

• 元々のcss の遅延ロードを行う
  body タグ直前に以下のタグを追加することで、criticalCSSの出力対象 css ファイルを遅延読み込みすることができます。
  

      {% autoescape off %}
      {% critical_async %}
      {% endautoescape %}
  

  上記タグで、以下のHTMLが出力されます。
  

  <script>
  !function(e){"use strict";var n=function(n,t,o){function r(e){if(a.body)return e();setTimeout(function(){r(e)})}function i(){l.addEventListener&&l.removeEventListener("load",i),l.media=o||"all"}var d,a=e.document,l=a.createElement("link");if(t)d=t;else{var s=(a.body||a.getElementsByTagName("head")[0]).childNodes;d=s[s.length-1]}var f=a.styleSheets;l.rel="stylesheet",l.href=n,l.media="only x",r(function(){d.parentNode.insertBefore(l,t?d:d.nextSibling)});var c=function(e){for(var n=l.href,t=f.length;t--;)if(f[t].href===n)return e();setTimeout(function(){c(e)})};return l.addEventListener&&l.addEventListener("load",i),l.onloadcssdefined=c,c(i),l};"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n;
    var elem = document.getElementById("django-critical-async-css-marker");
        loadCSS('https://www.monotalk.xyz/static/CACHE/css/690a0d57c104.css', elem);
    elem.parentNode.removeChild(elem);
  }("undefined"!=typeof global?global:this);
  </script>
  

  で、もともと CSS のリンクが出るはずの場所に、inline CSS が書き出させれます。

4.動作確認

動作確認のした際の挙動について記載します。

• 初回表示時は異常に遅い
  初回表示時、ページ描画とともに、penthouse のコマンドが実行され、phantomjs が起動します。
  10秒ほどページ描画に時間がかかり、inline CSS の cache が作成され、2回目の表示以降 cahce が使われ早くなる動作となります。
  ですので、実ユーザが初回起動にあたらないように、cache 作成のタイミングを工夫する必要があるかと思います。

• 実施前、実施後の Page Speed Insight の点数
  実施前、88点で、実施後、92点になりました。
  実施労力の割に点数の上がり幅は低いです。

まとめ

Django/Mezzanine の template に critical CSS を組み込むため、django-critical を使ってみました。
以下、まとめます。

• django-compressor との相性がいい。
  compressor で 圧縮/結合した CSS を入力に用いることができ、また CSS の遅延読み込みが可能なため競合することなく使えます。

• メンテされていないが、動く。
  日本語環境で使えないバグもあり、依存する node ライブラリが古いです。頑張って動かすことはできましたが、仕事で使ったりするには少し不安です。

• エンコードの問題を解決し、新しめの critical で動かす?
  penthouse の新しい version で動くようにして、エンコードの問題を解決すれば、結構イケてるものになりそうな気がします。

critical を試してみたので、それで動作するように改造してみようかと思います。
以上です。