WSOの現状とすすめかた

by 泰昌平@ShoheiTai

Slide 1

Slide 1 text

WSOの現状とすすめかた泰昌平 @ShoheiTai

Slide 2

Slide 2 text

2 shouhei.tai @ShoheiTai 泰昌平スパイスファクトリー株式会社 General Manager CakePHP/ PHP / Wordpress / Rails / React.js / Node.js / GCP / SEO / WSO ダーツ / バイク / VR / サバゲー / バー巡り tai-sho

Slide 3

Slide 3 text

Software Design 何度か寄稿させていただきました！

Slide 4

Slide 4 text

CMS高速化 CMSの高速化を競う大会(ロフトワーク主催:CMSプロレス) Redboxの小川社長と共同参戦し優勝。 MovableTypeやConcrete5チームが立ち並ぶ中、単独Wordpressで勝利

Slide 5

Slide 5 text

WSO Service スパイスファクトリーとRedbox社の共同でWebサイトの高速化・コンサルティングを行う、WSOサービスを2018年2月に開始

Slide 6

Slide 6 text

今日覚えて帰っていただきたいこと ▷ WSO (Website Speed Optimization) ▷ 表示速度との向き合い方 ▷ Webの表示速度に何が起こっているか ▷ 高速化のための最新技術

Slide 7

Slide 7 text

“ WSO Website Speed Optimization

Slide 8

Slide 8 text

WSOのいま Webサイトスピードの傾向と最新事情

Slide 9

Slide 9 text

表示速度に関する世の中の動き ▷ モバイルユーザの比率が増加 ▷ 表示速度がページランクの評価指標に採用 ▷ フロントエンドの進歩によりよりリッチな表現やコンテンツの実装が可能

Slide 10

Slide 10 text

ユーザはもう待ってくれない速いことが当たり前になりリッチなコンテンツをより速く提供する必要がある 10

Slide 11

Slide 11 text

Googleもモバイルを意識 ▷ 計測ツールの対象もモバイル主体に ○ TEST MY SITE ○ モバイルフレンドリーテスト ▷ モバイルファーストインデックス ▷ (Speed Update)

Slide 12

Slide 12 text

表示速度が与える影響ビジネスとの繋がり

Slide 13

Slide 13 text

表示速度がビジネスに与える影響 ▷ WSOのプロジェクトを動かす為の前提 ▷ Test My Site ○ 高速化によるビジネスへの影響や競合調査 ○ レポートが出力できる

Slide 14

Slide 14 text

$100,000 / day ECサイトの売上 $2,500,000 / year 年間損失額 1 second delay / page 1秒の表示遅延 14 Source： How Loading Time Affects Your Bottom Line https://blog.kissmetrics.com/loading-time/

Slide 15

Slide 15 text

直帰率と表示速度の相関 ● 2018年2月の調査 ● 表示速度が落ちる事により直帰率が上がる Source： https://www.thinkwithgoogle.com/marketing -resources/data-measurement/mobile-page-s peed-new-industry-benchmarks/

Slide 16

Slide 16 text

WSOのすすめかた

Slide 17

Slide 17 text

WSOのすすめかた評価ツールによる計測モニタリングアクセス解析計測・調査ツールによる計測モニタリング問題箇所の切り分け実行フロントエンドバックエンドインフラ 17

Slide 18

Slide 18 text

計測・調査の方法 ▷ 計測ツールによるモニタリング ○ 時間帯によって変動する可能性もあるため継続的にモニタリングを行う

Slide 19

Slide 19 text

ツール ▷ GTmetrix ○ 非エンジニアでもある程度は扱いやすい ○ モニタリング機能が便利(有料) ○ 日本リージョンがない (最寄りはChina) ▷ Web Page Test ○ リソース周りのレポートが詳細に出る

Slide 20

Slide 20 text

ツール ▷ Page Speed Insights ○ LightHouseを使用したより詳細な分析 ○ Chrome Dev Toolでも利用可能

Slide 21

Slide 21 text

問題の切り分け ▷ インフラ？ ○ サーバスペック、ミドルウェアチューニング ▷ フロントエンド？ ○ 静的リソース最適化、遅延読み込み ▷ バックエンド？ ○ ネックとなる処理がないか、外部連携など

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

WSO関連の注目技術表示速度に関わる新しめの技術

Slide 24

Slide 24 text

imgタグのloading属性 hoge

▷ imgタグにloading属性を付与することで遅延ロードが可能 ▷ ブラウザが通信状態など様々な状況を見ながら、遅延ロードタイミングなどを制御できる

Slide 25

Slide 25 text

Service WorkerによるCache ▷ ブラウザの裏側で動くjavascript ▷ リソースの事前取得やコンテンツのキャッシュをプログラマブルに制御できるようになる ▷ 爆速で有名なdev.toでも利用されている

Slide 26

Slide 26 text

AMPの進歩 ▷ AMP周辺技術や表示が次々リリース ▷ AMP for Email ▷ のリリース ▷ AMPとGoogle Discoverの相性