ウェブサイト高速化勉強会に参加してきた #tnmk0929

勉強会 WebTech Apache

さくらのVPSにてサーバ＆ドメイン取得を行った流れもあり、個人用鯖にも何らかのWebコンテンツを配備・公開して行く事になるだろう(てかそういう風にして行きたい)と言うのもあり、ちょうど目にしたこちらの勉強会に目が留まり、参加して来ました。

なので現状のWebサイトを高速化させるために、ってのではなくて今後のために、という意味合いが強いですね。

会場は横浜タネマキ。最近は個人的にはYokohama.groovy等で2週間に一遍は使ってる感じですね。

開始間際、ディスプレイ接続で調整が上手く行かず10分程押した後スタート。

Web Site Optimization for Beginners

高速化をはじめる前に

  • Web高速化、この辺は仕組みを知らないと始まらない。
  • 過去発表した資料をmixしてご紹介。
  • コンテンツ配信の仕組み(おさらい)：アドレス解決、接続、リクエスト、レスポンス

まずはサイトを検証しましょう

  • 計測、そして原因を突き止める。
    • 接続からページが表示されるまでを視覚化。
    • ブラウザで見てるだけだとわからないが、ブラウザの裏では色々やってる
    • ツールやサービスを使ってみよう
      • 1.Chromeやsafariのwebインスペクタ
      • 2.Firefoxにfirebugを入れる
      • 3.Webpage Test
      • 4.Pingdom Tools...世界中に拠点、色々なアクセスが出来る。いずれの拠点も日本からは離れた所にある、国内サーバを検証するには時間が掛かる。
Pingdom Tools実演


診断結果の項目内容は以下の通り。

grade: ツール基準で定めた得点
files: 総ファイル数：
loadtime: 掛かった時間
pagesize: 転送データ量
    • 診断結果に表示される流れを読み解く事で表示までの流れが分かる。

    • 途中サーバにアクセスしに行ったりすると時間が掛かってるのが分かる。
    • どこで遅くなっている、間が開いているのかが分かる。
    • レスポンスが悪い場合もあったりする。
Webpagetest実演


検証結果から原因を見つけましょう

  • いったい何が原因で遅くなっているのか？
    • 1.DNSによる名前解決？
    • 2.最初のHTMLが出てくるまでが遅い？
    • 3.ページの構成要素がいつまでもダウンロードされてる？
    • 4.外部のサービスで止まってるみたい？
  • 心当たりはありませんか？
    • 1.CSS分割してたり
    • 2.Jsも一杯あったり
    • 3.見た目の装飾のために画像多かったり
    • 4.ソーシャル系ボタンも貼り付けてる
    • 5.外部の広告とかサービスいっぱいだ…(はてぶも付け方によってはパフォーマンスに影響出る)
  • それぞれがこんな問題を引き起こす
    • 1.ページのレイアウトがなかなか出来ない
    • 2.リクエストが増えると次に進めない
    • 3.画像が落ちてこなくてページが完成しない
    • 4.途中で一瞬止まったように見える
    • 5.反応が悪くて完全に止まる事も…
  • まずはどういう状況になっているかどうかをウォーターフローチャートツールで判断。
  • 出来る範囲で何をすれば効果が高いかを判断。
  • 何が出来るか、は人によって異なる。

何をすれば効果が高いか判断しましょう

  • 何をやっていいかがわからない。目星はつくけど…
    • それ以外に出来る事は？
YSlow

    • Firefox用のアドオン。FirebugとこのYSlowプラグイン両方を入れる必要があります。
    • Firebug機能の一部としてYSlowで結果を判定する事が可能。
    • 詳しい解説は以下の書籍に詳しいそうです。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

PageSpeed

Google Chrome エクステンション。

PageSpeed Insights

上記エクステンションのWebサービス版。

HTTPリクエストを減らすために出来ること

  • HTMLのロードに時間がかかる場合
    • 1.DNSを反応の早い所に変えてみる
    • 2.公開時のHTMLには、極力無駄な改行やコメントを入れない
    • 3.HTMLのデータサイズが大きいならGzip(サーバ側で,指示は簡単。サーバ側で有効にしてないと動かない)
    • 4.箱作りの元は早くダウンロードさせる
  • CSS, Javascriptにも目を向けよう
    • ばらばらは良くないので極力まとめる
    • ファイルから余分な改行やコメントを削除（ツールで簡単に出来るよ！）
    • 面倒くさいならGzipで圧縮する
    • ロードする順番はCSSが先、Javascriptが後の方がベター
    • 変更が少ないならブラウザにキャッシュ
  • CSSやJsのMinifyとか結合に。
    • ProCSSor
    • excssive
    • Closure Compiler Service
  • サーバ側でファイルに有効期限を付けるには
    • ディレクトリに所定の設定値を記載。
    • ※Apacheでmod_expiresが有効になっていないといけません。
  • テキスト系のファイルをGzipで圧縮する
    • に設定記載。
  • Apache2.2.x系でmod_filterを使う場合
  • 外部サービスへの接続が含まれると、DNSの名前〜
  • 最近ではソーシャル系のボタンが人気
  • でも、入れると結構色んなデータを拾いに行く
  • 対応：
    • 外部サービスのjsを非同期にする
  • HTTPSが原因→ならへらしましょう、今時スマホなどで見ることも多いし。
    • 低速化というよりもカオス化？様々な

　

CDN(CloudFront)を使ってみよう

  • 確実に効果を出すのなら、CDNがオススメ。
  • CDNってのはこんなもの
    • 高速にデータを配信する仕組み
    • 世界中に分散されたサーバにコンテンツデータを格納している
    • 距離的に近いところからクライアントに対してデータを送信する
    • 最近安価に使えるサービスも増えている

この後AWS上で実際にCloud Frontの実践デモを行なっておりました。この日の前日に新しい機能が追加されてたり、レイアウト等も変わっているそうで『AWSに関する書籍は書きづらい！』とコメントしておられました。(^_^;)

しかし、Amazon Cloud Frontを用いた対応は効果の程は高いようです。興味のある方はCDNを試してみてはいかがでしょうか。

まとめ

  • HTTPリクエストを減らしましょう。
  • どうしても減らせないのなら、サイズを小さくする、配信元を分ける等の対応を
  • 一番手っ取り早いのはCDNを使うこと。


Webサイトの高速化、という若干毛色の違う勉強会でしたが、表示のパフォーマンスという決して軽視出来ないポイントについて、まずは出来るところから始めよう／始められるところを見つけるための手法が幾つか知る事が出来たのは有意義でした。関係者の皆様、ありがとうございました！


また、この勉強会では本編の内容もさる事ながらデモ時に使っていたツールが非常に印象的でした。以下の2点のツールです。

これはこれですごい興味があって試しに両方入れてみたのですが、連携がまだうまく行ってない(^_^;) 講師のこもりさんは割とスムーズな操作をしてたような気がするのだが…これはもう少し調べてみる必要がありそうです。