| @技術/プログラミング

Claude Code を使い始めた。いろいろやってみたことをメモ的に書いておく。

Nginx のログを集計して、日ごと、時間ごとのリクエストタイムと HTTP ステータスコードを集計するようにした。こんな感じ。

リクエストタイム

HTTP ステータスコード

アクセスランキングとかリファラーランキングとかを集計するシェルスクリプトは以前自分で書いていて、それらのコードを参考にして Claude Code に書かせてみたらほんの 10 分くらいでいいのができあがるのでびっくりする。特にリクエストタイムの集計は中央値も出すようにしたので、自分でやってたら awk の学習で 2 ~ 3 日時間を使ったと思うので、こういうのをサクッとやれるのはマジですごい。

リクエストタイムに関して、 15 年くらい前のクックパッド社は Rails アプリでトップページのレスポンスが 200ms を切るのが目標だと言っていた。それ以来、自分のウェブサイトでもそのくらいのパフォーマンスを目指していたが、こうやったあらためて集計してみると全然 200ms を切れていないことがわかった。リクエストログのうち時間がかかっているものを抽出し、これまた Claude Code に読ませて対策を考えさせた。 Cache を適切に設定したり、コードを読んで N+1 クエリになってるところやメソッド呼び出しを変数にメモ化できていないところを見つけてきて直してもらった。おかげで平均レスポンスタイムが 1/2 ~ 1/3 になっている。

平均レスポンスタイムの改善

HTTP ステータスコードにもちゃんと確認したことがなかったが、集計してみると結構 500 エラーがあることがわかった。エラーログを Claude Code に与えるとサクッと直してくれた。以前は 1 日 40 ~ 50 件くらいあった 500 エラーがいまはほぼなくなった。

500 エラーの削減

500 エラーの次に問題だったのが 404 エラーだ。存在しないパスへボットが絨毯爆撃のようなクローリングをしかけている。 Claude Code 先生によるとこういうアクセスは 444 ステータスコードを返して接続を切るのがサーバーに負荷をかけないということだったのでそうすることにした。 1 時間あたり 3 桁あることもあった 404 エラーが 1 桁になり、無駄に puma にリクエストが到達することがなくなった。

404 エラーの削減

一昔前なら、こういうチューニングとかは専門のコンサルタント的な人を雇わないとできなかったかもしれない。そういうところに頼むと 50 万円とか 100 万円とか費用がかかっただろう。個人の趣味のブログでそういう費用を払うのは割に合わないけど、 Claude Code なら 100 ドルでそれをやってくれる。マジですごい世の中になってしまった。

| @ブログ

インデックスページにカテゴリーへの導線を作るべきということを書いたがさすがにラディカル過ぎた。

インデックスページのコンテンツ数が増え、ページの応答速度が 800ms ほどになっていた。 DOM サイズも大きくなり、転送量が増えてユーザーフレンドリーではないなと思った。確かにユーザーの回遊性は高まるかもしれないが、ページがごちゃごちゃしていて快適ではない。これではブログサービスでブログをやっているのと大差ないと思い直し、インデックスページの記事数を最小限に絞った。

少しシンプルになったインデックスページ

全カテゴリーの最新記事の表示はやめ、最新の 7 記事だけ表示するようにした(最新の記事だけ大きく表示するというスタイルは残している)。カテゴリー一覧ごとの最新記事は別途 カテゴリー一覧ページ を用意してそちらに移した。

またページ下部に最近閲覧数が多い記事とはてブでホッテントリ入りした記事へのリンク1を付けた。これまではフッターに表示していたが、フッターのリンクはあまりクリックされていない疑惑があるし、結構面白コンテンツだと思うのでインデックスページのメインコンテンツとしてしつらえることにした。そもそも 21 世紀のブログでフッターなんてものはいらないのかもしれない。

人気記事一覧

シンプルにしたインデックスページは応答速度が 200ms を切っていてまぁまぁ高速で Google PageSpeed Insights でも 90 点くらいを取れる。個人ブログなのでシンプリシティは大切にしたい。

| @ブログ

関連記事

各記事の一枚目の画像をカバー画像とみなすようにして、関連記事にサムネイルを表示するようにしてみた。画像があるだけで記事をクリックしてみたい感が高まると思う(残念ながら Google Analytics で見る限り直帰率は改善してない)。人間は、文字だけを読むよりもイラストや画像など視覚的な情報を一緒に見ることで物事の理解度が高まると本で読んだ。自分で過去記事を読み直していても画像があると関連記事をクリックしてみたくなるし、満足感のある改修だった。

なおカバー画像の判定処理は記事本文を読み込んだ上で正規表現で調べているので多分重い(ベンチマークを取ったらタイトルを表示する処理に比べて二倍くらい遅かった)のだけど、関連記事表示部分はキャッシュしてるのでそんなに体感速度は悪化してないはず。