Angular
cdn
Netlify
Lighthouse

Angularを、高機能ホスティングサービス「Netlify」でつかって高速化/Lighthouse高得点とるためのビルドファイルを公開しました

rdlabo/netlify_build_angularを公開しました。タイトルの通り、AngularをNetlifyという高機能ホスティングサービスで使うためのビルドファイルです。

やることは、次の4つです。



  1. robot.txtを生成します

  2. wwwつきURLに自動的にリダイレクトするための _redirects を生成します

  3. ServerPushするための _headers を生成します

  4. CSSをインライン化します

Angularは、ビルド時にビルドファイルを生成するフォルダを再生成します。また、--prodがつくと、ファイル名に乱数がつくようになります。(main.jsmain.f1ec16ef52a78f4177f7.jsになるなど)

ですので、自動デプロイする場合、Netlify上でこれらのファイルを動的生成する必要があります。


どう使うか

レポジトリにあるnetlify.build.jsをダウンロードしてプロジェクトフォルダのトップディレクトリに設置してください。package.jsonangular.jsonとかと同じ階層です。

その後、L19-L26までをあなたの環境に変更してください。例えば、Ionic v4でしたらpublicDirwww/になりますし、appDomainはあなた自身のドメインに変更してください。

debug = true は、確認用ファイルを生成します。_redirects_headersはNetlify上ではアクセスできないので、同じ内容のファイルをそれぞれredirects.txt_headers.txtで生成します。falseにすると生成しません。

設定が完了したら、Netlifyのビルド時の設定を行います。

スクリーンショット 2018-08-09 15.41.41.png

こんな感じで、node netlify.build.js を追加してください。この状態で自動ビルドを走らせると、自動的にAngularをビルドしたあと、この設定ファイルに従ってビルドを行ってくれます。


これらの設定の効果


1. robot.txtを生成します

Lighthouseの点数が高くなります。Google botに、このサイトはインデックスしていいよーと教えてあげる内容です。


If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed.


https://www.rdlabo.jp/robots.txt といったファイルが生成されます。


2. wwwつきURLに自動的にリダイレクトするための _redirects を生成します


Netlifyではwwwなしのドメインも使うことができますが、wwwつきの利用が強く推奨されています。wwwをつけると、Netlify’s powerful CDNを使うことができます。

https://www.netlify.com/docs/custom-domains/


https://angular-default-sample.netlify.com/redirects.txt が生成されます。


3. ServerPushするための _headers を生成します


HTTP/2 の新機能「サーバープッシュ」は、次のリクエストが来る前に必要となるコンテンツをクライアントへ送信可能です。

https://developers.google.com/web/fundamentals/performance/http2/?hl=ja#_7


https://angular-default-sample.netlify.com/headers.txt といったファイルが生成されます。


4. CSSをインライン化します


ページの読み込み速度が上がると、ユーザ エンゲージメント、ページビュー、コンバージョン率の向上につながります。ページを高速で読み込むには、初回ペイント時に必要なスクリプトやリンクをインライン化して、それ以外の要素は後回しにします。

https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?hl=ja



おわりに

なお、弊社サイトではPHPでごにょごにょしてたのですが、公開するためにNode.jsで書き直しました。Angularを公開するためのビルドファイルなので、こっちのほうがしっくりきますねw

Ionicプロジェクト用のものはIonic-sub CLIに直接組み込む予定です。

rdlabo/netlify_build_angular

それでは、また。