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/

위에서 작성한 호스트를 설정한 후 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포인트 정도 올랐습니다.