画像専用CDNを導入してページ速度を高速化した話

ページ表示速度が重かったWebサイトに、画像専用のキャッシュ配信サービス（CDN）を導入した事でレスポンスが軽くなった件を紹介したいと思います。

はじめに

SEOツール「GetKeyword」を個人開発している平です。本業とは別に、スキマ時間で企画したり開発しています。

公開から1年が過ぎ、お陰様で利用者ID数も1万を超えました。

ページのローディングスピードに違和感を感じる

サイトを公開して以降、トップページにアクセスすると背景画像が表示されるまで5秒近く待つ事がありました。

一度ブラウザでアクセスすれば背景画像がキャッシュされるため、その後は瞬時に表示されるものの、初めてアクセスするユーザーには5秒間もの空白を見せ続けている事になります。

これでは初めてのユーザーの第一印象も悪くなるばかりです...

この重いユーザーアンフレンドリーなページを改善すべく、要因調査に着手しました。

要因の調査

ChromeのDevToolsを使って、画像読み込み速度が遅くなっている要因を探ります。

まず気になるのがFCP（First Contentful Paint）です。

FCPとは、一番初めに表示される箇所を指したもので、改善前のGetKeywordでは1.5秒あたりで表示されていました。

そして、最も大きなコンテンツ箇所であるLCPが表示されるまで、さらに約３秒以上かかっている状態でした。

これはさすがに遅すぎます...

そこでDevToolsの「Performance」タブから、ローディングが遅いファイルやJavaScriptによるLongTaskなどを解析しました。

しかし、根本的な要因が見当たりません。

レンダリングを長時間ブロックしているJavaScriptのタスクも見当たらず、ローディングされるファイルも極限まで圧縮していたので、ファイルサイズが要因でもなさそうでした。

画像ローディングが遅いのは確か...

とわいえ、画像ファイルのローディング自体が遅いのは確かでした。

すでにCloudflareを利用していたので、このあたりの設定が問題っぽい感じはしていました。さらに調査を進めて、要因を探せば解決できそうな気はするものの、時間がかかりそうな感じでした...

スキマ時間で開発している関係上、できればこの日に解決しておきたかったので、素早く解決できる他の方法を探してみました。

探していると、さくらインターネットのImageFluxを発見。

画像に特化したキャッシュ配信サービスで、価格もお手頃。

スタータープランであれば0円から始められそうだったので、試しに導入してみました。

まず画像ファイルをS3に移動し、ImageFlux経由で配信するように設定。Webページの画像読み込み先URLを一気に置換しました。

これでCDN経由による配信設定は完了です。

ちなみに、ここまで30分もかかりませんでした。

5秒→0.5秒以内に短縮

結果、ファーストビューの表示に５秒近くかかっていた状態から、１秒以内で表示できるように。

また、Page Speed Insightsでも、LCP、FCPともに緑色の「良好」を指し示している事がわかります。

実感値でも確認すべく、ブラウザのキャッシュをクリアにした環境や、一度もアクセスしたことが無いスマホで確認。

以前は、アクセスしてから数秒続いた「空白画面の表示」が無くなり、１秒以内で表示されるように感じました。

これで、私の頭の隅にあった「ユーザーさんを待たせてしまうストレス」が一気に晴れました。

かかった費用

私の環境下では、１ヶ月あたりの利用量と費用は下記の通りになりました：

• 月間リクエスト数：301.73 K
• 合計転送量：4.67 GiB
• 費用：約950円

そこまで費用もかからないので、これでサクッと改善できるなら全然アリだとも思えました。

最後に

今回は、画像専用のCDNを使って手っ取り早くページ速度を改善する方法を紹介しました。

本質的な要因発見には至っていないものの、調査に時間を取られ改善が遅れるくらいなら、コストをかけてでもいち早く改善するのもアリだと考えています。

とわいえ、ページ速度改善はやり切れている訳では無く、GoogleFontなどの外部ファイルの読み込みが遅かったりと、まだまだ改善するべき箇所は多数あるのも実情です。

今回は、さくらインターネットのImageFluxでサクッとページ速度を解決できた例を紹介しました。