チューニング

1 minute read

  1. 前提 環境などの前提条件は前回の1から3と同じです。 今回は教科書の[1. Reduce number of HTTP requests]-[Use Browser Cache]をやってみました。 修正が少ない静的ファイルはブラウザキャッシュの期間を延ばし、2回目以降のアクセスはキャッシュから読み込むことで速度向上につなげます。 作業は下記の2点です。 (1) キャッシュ期間延長  Webサーバーの設定でjs、cssのブラウザ・キャッシュ期間を延ばします。 (2) ファイル名のユニーク化  上記1によって修正がすぐに反映されないという状況を避けるため、ファイル名に修正ごとのハッシュ値を付けてキャッシュが効かないようにします。(gulpの機能を利用)
    1. キャッシュ期間延長 nginxの設定ファイルにjs、cssの設定とキャッシュ期間を追記しました。 記述が冗長なのは追って別の書き方を調べたいと思います。 server { listen 443 ssl; server_name [ドメイン名]; ssl_certificate [ファイルパス]; ssl_certificate_key [ファイルパス]; location / { proxy_pass http://[ホスト名]:[ポート番号]; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto https; proxy_set_header X-Forwarded-Port 443; proxy_set_header Host $host; } # — css/jsの指定を追加。 — location ~* .(css|js)$ { proxy_pass http://[ホスト名]:[ポート番号]; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto https; proxy_set_header X-Forwarded-Port 443; proxy_set_header Host $host; # キャッシュ期間を設定。 expires 365d; } # — css/jsの指定を追加。 — } ChromeのDeveloper Toolsで見て、Expiresヘッダーの追加とjs、cssがキャッシュから読み込まれていることを確認します。(下図オレンジの枠線)

Webサイト・スピードアップ - gulp

Webサイトの表示速度を改善。

1 minute read

 更新日:2017年03月07日 0. 環境 フロントエンドの話なのでサーバー環境はあまり関係ないのですが、参考まで。 サーバー [Nginx] 1.10.2 [Kitura] 1.1.2 [Swift] 3.0.1 ローカル [Mac] 10.11.6 [Node.js] 7.6.0 [gulp] 3.9.1 1.準備 仕事でやっているWebサイトのスピードアップを個人でもやってみたくて、適当なページを1つ作ってみました。 シンプルカレンダー そしてパフォーマンス改善の教科書に選んだのはこちらです。 Speed Up Your Website 2.現状 Apacheで運用しているWebアプリが他にあるため、下記のようなちょっと珍しい構成になっています。 Nginx(リバースプロキシとして使用) + ServerSide-Swift(Kitura) 僕のネット環境(下り57Mbps/上り18Mbps)(※1)だとシンプルカレンダーのロードタイムが約2.5秒(※2)でそこまでストレスは感じませんが、DBを使ってないわりにこの数字なので改善の余地ありです。 (※1) 回線速度はSPEEDTESTで計測。 (※2) Chrome Developer Tools で計測。 3.ブラウザからのリクエスト削減 Chrome Developer ToolsのNetworkタブで見るとCSS、JavaScript(以下JS)のダウンロードに時間がかかっているので、教科書の[1. Reduce number of HTTP requests]-[Combine files]から取り掛かってみました。 HTMLから静的ファイル(CSS、JSなど)を複数ダウンロードする際、ブラウザが並列でリクエストできる数が決まっているため、なるべくそれを減らしましょうという内容です。 複数の静的ファイルをまとめるためのツール(※3)を検討しましたが、一番簡単に実現できそうだったgulpを使いました。 (※3) webpack、gulp、Grunt 4.