メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。今回はリクエストからレンダリング完了までの時間を減らした取り組みについて書こうと思います。Railsで開発しています。Railsで開発を始めてから2年半、すくすくとアプリケーションが成長してきています。成長していくにつれ問題が出てくるのが世の常、以下のような問題が生じてきました。「ページ読み込みが遅い...」Webアプリケーション開発者は開発環境で1日に何十回とページ読み込みをさせると思いますが、Railsの成長と共にそれがめちゃくちゃ遅くなってきたのです。pipeline(browserify-railsを用いてビルドしている)で管理している部分と、Webpackerで管理している部分があります。pipelineからWebpackerへ移行している過渡期に行いました。問題は何か?さて、ページの読み込みがめちゃくちゃ遅いという問題にぶちあたりましたが、これだと問題が大き過ぎるのでもうちょっと細分化してみましょう。以下はリクエストからページレンダリング完了までの流れになります(超ざっくりです)。1~5まで確認してみたところ、2と4、5に時間がかかっていることがわかりました。toolの計測を見てみましょう。青色が待機時間、サーバーから応答が返るまでの待ち時間です。最初のHTML取得で結構時間がかかっていることがわかります。ピンク色はブロック時間、ネットワーク接続の待ち行列で費やした時間を表しています。最初のHTML取得までの時間、つまり2の時間が遅いことについては、開発環境であるためRailsのconfig.cache_classesをfalseにしていてコードのキャッシュをさせないようにしているので、遅いのはある程度仕方がないのですが、それにしても遅い...。サーバ側でのViewのレンダリングにかなりの時間を費やしています。toolの計測を見てみると、CSSやJavaScriptといったアセットを取得しに行く時間、つまり4、5も異常に遅いです、全リソースを読み込むのに15秒もかかってるorz。そもそも読み込もうとしているJavaScriptが多すぎますね。原因は何か?2が遅い原因アプリケーションログを遡っていくと、あることに時間を費やしているのがわかりました、browserifyのビルドです。JavaScriptに何かしらの変更を加えた時に、browserifyのビルドが走っていてそれが遅く感じる原因のようです。browserifyはWebpackなどと違い、デフォルトで差分ビルドができず(watchifyというプラグインが必要)、JavaScriptを変更した後にエントリーポイントで読み込むファイルを全ビルドしていたためにかなり遅くなっていました。読み込んでいるJavaScriptの種類にもよりますが、約4~6秒ほどかかっていました。読み込もうとしているJavaScriptが多すぎて、ブラウザの同時接続数(Chromeは6)をオーバーしているためです。toolのピンク色がブロック時間、つまり接続待ちを表しています。pipelineで本来一纏めにされるJavaScriptがデバック用にバラバラで読み込まれる設定がされているようです。trueこれにより読み込むJavaScriptが多くなりすぎて、接続待ちに時間が多く費やされていました。対策browserifyのビルドが遅い問題watchifyを導入して、差分ビルドをさせるようにするという案もありましたが、最終的にWebpackに置き換えるという形にしました。これについては別に記事を書いているのでよろしければご覧ください。短縮することができました。読み込むJavaScriptが多すぎる問題デバックモードもそれはそれでデバックしたい時には便利なので、単純にconfigの値をfalseにするだけだと切り替えが面倒です。デバッグしたい時にtrueに書き換えてappサーバを再起動する必要があるしかしconfig.assets.debugがfalseの時、Railsのjavascript_include_tagヘルパーのdebugオプションをtrueにすることで、デバックモードに切り替えることができます。railsguides.jpこのオプションを利用して、debugしたい時だけURLに特定のパラメータを付与するとdebugモードに切り替わるヘルパーを作成しました。endこのヘルパーを利用することで、通常時のリクエストはdebugモードはOffですが、以下のように特定のパラメータを付与するとOnにできるようになりました。https://hostname.jp/articles?js_debug=on終わりに今回は開発環境の話でしたが、本番環境でもリソース取得時間の改善の余地がまだまだあります。「サイトの読み込み時間を爆速にする」ことに興味がある方は是非一度メドピアに遊びに来てください。9月12日にメドピアでRailsの技術的負債をテーマにした「MedBeer」というイベントを開催します。medpeer.connpass.com負債の予防・返却に興味がある人、ビールが飲みたい人は是非参加してください。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Orbを作りました11月に入社したCTO室SREの@sinsokuです。SREの侘美(たくみ)です。開発事例公開~こんにちは。エンジニアの宮原です。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。