サイトを運営していると、レスポンスを早くするにはどうすればいいかと常に考えますね。 サーバーの性能を上げたり、ネットワーク環境を良くしたりとハードウエアでの対応も重要ですが、実際に動いているコードの最適化が一番大切な所ですね。 123ishはRailsで出来ていますが、コードの最適化にBullet というジャムを使っています。 Rails の便利なオブジェクト関連性の定義によって、実は一つで済むようなSQL呼び出しが、関連するレコードをSQLから一つ一つ呼び出すという、とても時間のかかる実装に陥ってしまうことがあります。 一括読読み込みをすれば２回ですむSQL呼び出しが、そうでないと１１回もSQL呼び出しをすることになってしまうという簡単な例と共に、このN+１クエリ問題についてRailsガイドに詳しく載っています。 このN+１クエリ問題を見つけてくれる便利なジャムがBullet です。 また、何時でも一括読み込みをすれば良いのでもなく、むしろ要らない読み込みはメモリーの浪費と逆にレスポンスを遅くしてしまいます。 この無駄な一括読み込みもBullet によってレポートされます。つまりBullet によって N+1クエリ問題の発見 無駄な一括読み込みの発見 が出来るのです。 Bulletジャムの導入方法 BulletジャムをGemfile に記述 新しい環境ファイル optimization.rbの設定 ジャムをoptimizationの時にのみ取り込み 実行 1. BulletジャムをGemfile に記述 2020年７月現在でバージョンは6.1.0でした。 2. 新し環境設定 Bulletを実行する環境を、optimizationとして普段使っているdevelopmentから分けます。development.rbをコピーしてobpimization.rbとしてconfig/environments に作り、以下のような設定を施します。 Bullet.enable = tureはBulletジャムを使って最適化を行うことを可能にします。 Bullet.alert = tureは問題点をjavascript のalertを使って表示することを可能とします。 Bullet.bullet_logger =…
Accelerated Mobile Page (AMP)はGoogleが主導する、モバイルサイトを構築するフレームワークです。123ishでは、導入後に検索経由でのユーザー数を有意に増やすことが出来ました。 AMPページと普通のモバイルページでは、コア指標であるLargest Contentful Paint (LCP)で圧倒的に差が出ます。 グーグルサーチコンソールの「拡張」欄に⚡マークのAMPもあります。 この「拡張」は英語だとEnhancementsで、強化、増強、向上の意味で使われていると思います。サイトSEOの強化、増強、向上に繋がる主要素だということですね。 でも、AMP導入は簡単ではありません。カスタムのjavascirptsが使えないしCSSは75kbまでと色々と制約があります。 123ishでは最初にrails_ampジャムを試しましたが、全く使えませんでした（このジャムは2017年から開発が止まっていますね・・・）。 ワードプレスでもプラグインを入れるだけではAMPページを上手く作れないあたり事情は似てると思います。 今回は、Railsの既存のモバイルページを、ジャムなど使わずにルールに従ってAMP化した方法を紹介します。 カスタムの MIMEタイプの指定 たった一行のコードですが、config/initializers/mime_types.rbにカスタムMIMEタイプを指定します。 ampをtext/htmlに対するカスタムフォーマットとして登録しています。これにより、ampの拡張子がつくページをコントローラで扱うことが出来るようになります。 コントローラーをampフォーマットに対応できるようにする AMP化したいページのコントローラーが対応できるようにします。123ishのサイトだと記事の表示を行うページのコントローラーです。 format.amp はユーザーが.ampのページに訪れた時に作成するページを定義します。 render amp/samples/show.amp で app/views/amp/samples/show.amp.erb をレンダリングすることを指示します。 layout: 'amp/layouts/application'…
