気になっているテーマでしたので超早割で申し込みました。自分も表示速度最適化に関しては興味があった(勉強会でお話させていただく機会もあった)のでかなり期待してお話を聞きました。実際に濃い話が多く、4時間あっという間でした。以下に自分用のメモとして書きます。光司さん(サイバーエージェント)~改善をどこから行うかこのテーマについては自分も悩んでいましたが、石本さんの定義方法は理解しやすかったです。定義されていますが、両者で重複する項目が多いもののフロントエンドからバックエンドまで様々です。そこでハイパフォーマンスWebサイトに掲載されている14のルールから、実際に対応しやすく効果が高いものから順に対応したほうがよいとのことでした。フロントエンジニアからみた場合、実際に対応の候補は以下の5つ。実際に1000回実施した場合を報告されている方がおり、2009年に実施された時には最適化の有無で-20ms、そして最近のブラウザではさらにパーシングが改善されているので-5msとのこと。この程度しか変わらないであるなら、他の対策を優先したほうがいいですね。上から全体→詳細となるので、上から順に進めるのがよいとのこと。(サイトではPC/モバイルがわかれる。(CSSの処理にかかる時間を計測する)ソーシャルボタンについてソーシャルボタン(カウント数つき)を設置すると0.8sec~1.0sec程度表示完了までの時間が増加する。実際に押されたのは訪問者に対して0.01%~0.2%程度。この数字を高いと見るか低いと見るかは難しいですが、拡散されることで訪問率があがるというメリットがあることを考えると一概に低すぎると考えるのは...。いえカウント数なしのポップアップタイプであれば表示完了までの時間は増加しないので、カウント数が不要であれば、カウント数を外すとのもありだなと思いました。和昌さん(ヤフー)~画像フォーマットの選び方GIFを使うかPNGを使うかで悩むことがありますが、岡部さんは以下の指針を示していました。アニメーションをするならGIF色数が多い写真ならJPEGそれ以外はPNGえ?それ以外はPNGでいいの?と思いましたが圧縮アルゴリズムの最適化でGIFよりもファイルサイズが軽くできるとのこと。PNG8でもFireworsであれば半透過が可能とのことなので、PNGを避ける理由はないようです(IE6まではアルファチャンネルが含まれると正しく描画されない問題が残るが...)。使用するツールとしては以下が紹介された。(Mac、Web)実際に減色するデモをされていたが、大きく減色しても劣化が見た目ではわからない場合もあって驚きました。いう事例もあったので、減色はかなり効果があります。Spriteとは、1つの画像ファイルに複数の画像を配置して、CSSで画像をずらして表示することです。CSSを手動で書くことは難しいですが、ツールを使用して簡単に作成するデモが行われました。CS6作ることはツールを使用することで容易にはなりますが、注意点もあります。更新時にはファイル名を常に変更するクライアントキャッシュやサーバキャッシュに残ってしまうので、更新時にファイル名(もしくはディレクトリ名)を変更することで、トラブルを予防します。Spriteの読み込みは1箇所で行う更新時にはファイル名の変更が発生しますが、複数箇所で定義していると修正漏れが懸念されるため、読み込みを1箇所で行うと、トラブルが予防できます。Spriteを1つのファイルで行うのでなく、一部分で適応できるように枚数を分けると運用は容易になります。サイト全体ではファイル数が増えるので速度はトレードオフとなります。このあたりは運用での見極めが必要となりそうです。画像は隣接させない過去に古いiOSでは1px外側の画像まで持ってくることがあったので、画像は1px以上あけて配置したほうが良いとのこと。Spriteに関して、それぞれ具体的でわかり易かったのが印象に残りました。モバイルではさらに重要となってくるのことです。API利用HTTPリクエストを減らすために以下のAPIが利用が可能とのことです。Storage)cookieより多くの内容をモバイル端末に保存しサーバへの問い合わせを減らす。sprite、変更の少ない画像を読み出しオフラインでも閲覧できるようにする私はこのあたりは苦手なもんで、ちょっと戸惑ってしまいました(汗)ブラウザが限定できる環境であれば、これらのアプローチも試してみたいところです。CSS3の利用グラデーション、角丸、バックグラウンドパターンの使用することで、画像を使用しなくても様々な表現ができます。アニメーションもCSSでできるので、javascriptでアニメーションしなくてもよいのでは?とのことでした。dataURIは確かにリクエスト数は減らせるけど、CSSのファイルサイズが大きくなるから使い所は難しいという印象をうけました。DOMを減らす気になったのはこの話。DOMを減らすことでレンダリングを早くなるとのこと。sectionを使用する、divを避ける、空ノードは削除するといった対応でDOMを減らすをことができます。まさあきさん~さまざまな著書を書かれていらっしゃるこもりさんが最後に登場。短い時間ながらデモもされました。話されていたのですが自分の気になったポイントをピックアップしてみます。gzip圧縮した高速化サーバ側でgzip圧縮すると、ファイルによるがテキストファイルであれば1/3~1/5にファイルサイズを削減できます。(1.xはmod_gzip)とのこと。キャッシュ一概にキャッシュと言っても、ブラウザキャッシュ、アプリケーションキャッシュ、サーバキャッシュ等があります。キャッシュを有効に利用するには変更頻度の少ない、CSS/javasctipt、使用頻度が高い画像ファイル、jQueryなどのライブラリを対象とするのが良いとのことでした。2.x)を追記することで、Expireヘッダーが設定されます。これにより2回目以降のHTTPリクエスト数を削減できます。アプリケーションキャッシュ.appcacheを利用してキャッシュを有効するファイルを指定します。こちらもHTTPリクエスト数の削減が期待できます。Varnishを使用するWebサーバプログラムをnginxに変更するjavascriptのフォールバックCDN上のjQueryを使用する場合、CDN側でサービスが停止されることを想定してフォールバックできるように記述したほうが良いとのことでした。確かにCDN上がまったく落ちないとは限らないためこのような配慮も必要ですね。server切り替え型。(こちらはWB埼玉でも使用されていた)こもりさんは最後に、オリジンサーバへのHTTPリクエストを可能な限り減らすこと、と話されていましたが自分の経験からも共感できました。4時間話を聞いて色々と得ることがありました。実際の現場で活用していきたいです。(@tama200x)が運営しております。ネットワークやインフラ、WordPressそして艦これなどを中心に書いています。(at)を@に変換してください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。