講師はサイバーエージェントのあほむ@ahomuさんでした。WCAN 2018/09/15「Web ページを高速化してユーザーに価値を届けたい制作者のためのセミナー＆ワークショップ」 - WCAN | Doorkeeper内容• Web ページはなぜ遅くなるのか• どのように調査、そして改善をすればいいのか• 速い Web ページを維持するために何ができるか本セミナーではこのようなテーマについて講義とワークショップを通し、次の日から現場で活かすための足がかりとなる考え方とノウハウをお伝えします。詳細は省きますが、ざっくり次のような流れで学びました。1. セミナー前半「Webページの速度」についての基本（考え方/ページロード・ランタイム/クライアント環境など）高速化ポイントのセルフチェック（Chrome Devtoolsの各機能、Lighthouse、WebPagetestなど）ページロードを遅くする頻出原因（HTML返却/画像/キャッシュ/圧縮/レンダリングブロックなど）2. グループワークパフォーマンスがよろしくないサイトについて、 ボトルネックの調査/改善アクションの考察/実行計画検討 をやる3. セミナー後半ページロード速度の運用（考え方/目標値）と定常計測（Real User Monitering/Synthetic Monitoring）Googleスライドをあらかじめ共有いただき、解説では動画まで盛り込まれていて充実した内容でした！ 不明点は直接コメントしてOK、という配慮もありがたかったです。なぜ参加したかサイトのパフォーマンスやユーザービリティの向上に興味はあるものの、その根本的なロジックをちゃんと知らないし、学ぶにも何から手を出したら良いのかわからない…。こんな私にはきっとちょうど良い機会だと思い参加しました。よかったことサイト高速化のポイントや、具体的な調査・改善の流れについて大まかにイメージができた。初めて聞いたキーワードや聞いただけだとピンときていない話については、今回をきっかけに少し深掘りしたいChrome Devtoolsの触れたことのなかった一部機能について使い方を知ることができた。中でも特に、Coverage でそのページで利用していないCSS/JSを調査できるのが便利そうLighthouseについて存在は知っていたが、そこから得られるデータをどう捉え活かしたら良いのか少しイメージが湧いた。Page Speed Insightsとの違いがなるほどだった終わりにWebページの高速化について、あほむさんの著書「超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)」でより詳しく解説されているとのこと。ちなみに今回LTされた方の中に、その実践事例をかなり具体的に紹介してくださった方がいらっしゃって、これまたナルホドな内容でした。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%81%88%E3%83%BC%E3%80%81%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fwcan%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23wcan%3C%2Fa%3E%20%E5%89%8D%E5%BA%A7LT%E6%9E%A0%E3%81%A7%E5%8F%82%E5%8A%A0%E3%81%95%E3%81%9B%E3%81%A6%E9%A0%82%E3%81%84%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%E3%81%94%E9%9D%99%E8%81%B4%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94%E3%81%96%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E6%A9%9F%E4%BC%9A%E3%81%8F%E3%82%8C%E3%81%9F%E6%A3%AE%E7%94%B0%E3%81%95%E3%82%93%E3%81%A9%E3%81%86%E3%82%82%E3%82%A2%E3%83%AA%E3%82%AC%E3%83%88%E3%82%A6%EF%BC%81%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E3%81%A7%E3%81%99%E3%80%82%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FAPOhrX1Ufx%22%3Ehttps%3A%2F%2Ft.co%2FAPOhrX1Ufx%3C%2Fa%3E%20%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%A0%E3%81%91%E7%B4%B9%E4%BB%8B%E3%81%95%E3%81%9B%E3%81%A6%E9%A0%82%E3%81%84%E3%81%9F%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%AA%E5%9C%A7%E7%B8%AE%E7%B5%90%E6%9E%9C%E6%AF%94%E8%BC%83%E3%83%84%E3%83%BC%E3%83%AB%E3%82%82P11%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%82%E3%82%8B%E3%82%93%E3%81%A7%E8%88%88%E5%91%B3%E3%81%82%E3%81%A3%E3%81%9F%E3%82%89%E3%81%9F%E3%81%A9%E3%81%A3%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%9C%E3%80%82%3C%2Fp%3E%26mdash%3B%20junkjunctions%2Fkaave%20(%40junkjunctions)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fjunkjunctions%2Fstatus%2F1040959266486575104%3Fref_src%3Dtwsrc%255Etfw%22%3ESeptember%2015%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E登壇されたあほむさん、運営・協賛のみなさま、どうもありがとうございました。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%EF%BC%BF%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%E4%BA%BA%EF%BC%BF%3Cbr%3E%EF%BC%9E%E3%80%80Web%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AF%E6%97%A9%E3%81%84%E6%96%B9%E3%81%8C%E3%81%84%E3%81%84%EF%BC%81%E3%80%80%EF%BC%9C%3Cbr%3E%EF%BF%A3Y%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5EY%5E%EF%BF%A3%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fwcan%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23wcan%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20%E3%82%8D%E3%81%8F%E3%81%9C%E3%81%86%E3%81%A9%E3%82%93%E2%9B%84%EF%B8%8F%20(%40rokuzeudon)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Frokuzeudon%2Fstatus%2F1040838382027329536%3Fref_src%3Dtwsrc%255Etfw%22%3ESeptember%2015%2C%202018%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E関連リンクWeb ページを高速化して ユーザーに価値を届けたい 制作者のための セミナー＆ワークショップ資料公開 ::ハブろぐ