TL;DR

コンテンツの表示速度改善にはCDN配信が有効です。
【対応前】

【対応後】

はじめに

アプリケーションで使用するCSSやJavascript、デザインアイコン、アップロードした画像など同一ページ内にそれらが入り混じっていると表示にかなり時間がかかりますよね。lazyloadやCache-Controlをしているけどさらに全体最適を考えている方はCDN配信を利用してみるのは如何でしょうか。

今回は詰まった箇所をまとめていくので以下の部分は省略します。

S3バケットの作成方法
Carrierwaveの初期設定
CloudFrontの作成方法

作成方法などは丁寧な記事がたくさんあるのでそちらを確認したほうがわかりやすいです。
S3バケットの作成、Carrierwaveの接続設定、CloudFrontの作成は済んでいる前提で進めていきます。

CloudFrontの設定

config/initializer/carrierwave.rb

config.asset_host = 'https://d3if231hoge.cloudfront.net'

https:// を付け忘れるとエラーになります。

config/environments/production.rb

config.assets.compile = true

config.action_controller.asset_host = '//d3if231hoge.cloudfront.net'

compile=false だとエラーになるようです。

ActionView::Template::Error(The asset "d1234.cloudfront.net/../hoge.png" is not present in the asset pipeline.

app/assets/

上記、各自作成したhostを設定後にbundle exec rake assets:precompileを実行するとapp/assetsにあるファイルは自動的にS3に配置されます。
　
表示する際はasset_pathで指定。相対パスではなくファイル名指定。

= image_tag asset_path('hoge.png')

Heroku運用している場合は、デプロイ時に自動でプリコンパイルしたいと思います。

その場合はheroku.ymlのreleaseブロックに追記すると自動プリコンパイルしてくれます。

heroku.yml

release:
  command:
    - rake assets:precompile

app/assets/以外のS3配置のファイル

アプリケーション経由でS3に直接配置されたファイルはassets:precompileの対象外です。(考えてみたら当然なのですが、S3のassets配下に画像設置しているのにプリコンパイルされない!みたいなよくわからない思考になっていた時がありました..)

おわりに

app/assets周りの画像を多用しているページでCDN対応ができると、GoogleのPageSpeed Insightsで10ポイントほど上がりました。

app/assetsやアップロードされたS3上のファイルはCloudFrontで速度改善しよう