Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
WordPress高速化セミナーKUSANAGI x WEXALでレンダリングまで高速化を実現!
~超高速CMS実行環境KUSANAGI、Web高速化エンジンWEXAL Page Speed Technology、戦略AI DAVIDで実現するUX最大化とPageSpeed100点の自動化戦略~
アジェンダ
1. 自己紹介
2. PageSpeed InsightでみるWebサイト高速化
3. Webサイト表示高速化の仕組み
4. Webサイト高速化3つのテクノロジー1. KUSANAGI(超高速CMS実行環境)
2. WEXAL® Page Speed Technology(Web高速化エンジン)
3. Onimaru David(戦略AI)
5. KUSANAGIの各エディションとライセンスについて
自己紹介
中野陽子Yoko Nakano
業務推進課
You can find me at LinkedIn : yookonakano
Web制作 / システム管理などの業務経験後、アメリカへ留学。ニューヨークのカレッジ在学中にWomen Who CodeやWordPressイベントなどに参加し、プライム・ストラテジーに出会う。
2. PageSpeed Insightsでみる
Webサイト高速化
Googleが提供しているWebサイトの速度計測ツール
PageSpeed InsightsでみるWebサイト高速化
https://developers.google.
com/web/fundamentals/pe
rformance/why-
performance-
matters?hl=ja
パフォーマンスが重要なのはなぜか
PageSpeed InsightsでみるWebサイト高速化
https://medium.com/pinterest-engineering/driving-user-growth-with-
performance-improvements-cfc50dafadd7
Pinterest では、ユーザーが体感している待ち時間を
40% 削減した結果、検索エンジンのトラフィック
とサインアップ数が15% 増加しました。
パフォーマンスが重要なのはなぜか
PageSpeed InsightsでみるWebサイト高速化
https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-
conversion-and-sales-autoanything/
AutoAnythingは、ページの読み込み時間を半分
に短縮したところ、売上が12-13% 増加
する結果となりました。
パフォーマンスが重要なのはなぜか
PageSpeed InsightsでみるWebサイト高速化
Easy to change
colors photos
and Text.
PageSpeed InsightsでみるWebサイト高速化
どうして高速化が必要なのか?
Webサイトの高速化PSIで高得点を取る
あくまで手段
重要なのはUXの最大化
3. Webサイト表示高速化の仕組み
Webサイト表示高速化の仕組み
① HTTPリクエスト
②動的処理
④HTTPレンダリング
通信の高速化
処理の高速化
ファーストビューレンダリング
通信の高速化
www
③ HTTPレスポンス
HTTPリクエストからレンダリングまでの、ひとつひとつの処理を丁寧に最適化・高速化する
通信
Webサーバ
アプリ
DB
通信
ファーストビューレンダリング
I/O Webサイト表示の高速化
||各ステップでかかる時間を削減する
Webサイト表示高速化の仕組み
通信
Webサーバ
アプリ
DB
通信
ファーストビューレンダリング
I/O
Webサイト表示の高速化
||各ステップのスコア合計を100点にする
Webサイト表示高速化の仕組み
15点
15点 70点
バックエンド
ファーストビューレンダリング
Webサイト表示の高速化
||渋滞を解消し、ファーストビューとインタラクティブを最短にする。
インタラクティブセカンドビューレンダリング
高速道路 交通規制 交通整理
レンダリングの渋滞通信の渋滞
配信リソースの最適化
スポーツカー
15点 70点
Webサイト表示高速化の仕組み
ファーストビューレンダリング
Webサイト表示の高速化
||渋滞を解消し、ファーストビューとインタラクティブを最短にする。
インタラクティブセカンドビューレンダリング
高速道路 交通規制
レンダリングの渋滞通信の渋滞
配信リソースの最適化
スポーツカー
15点 70点
・jpeg,png,gif等画像最適化・Webp等次世代画像フォーマット・Lazy Load・CSS/JS最適化・gzip/Brotli通信最適化など
交通整理
Webサイト表示高速化の仕組み
ファーストビューレンダリング
Webサイト表示の高速化
||渋滞を解消し、ファーストビューとインタラクティブを最短にする。
インタラクティブセカンドビューレンダリング
高速道路 交通規制 交通整理
レンダリングの渋滞通信の渋滞
配信リソースの最適化
スポーツカー
15点 70点
Phase 1 Phase 2sync (同期)
async(非同期)
cssjs
cssjs
cssjs
cssjs
Engagement delay
Webサイト表示高速化の仕組み
ファーストビューレンダリング
インタラクティブセカンドビューレンダリング
高速道路 交通規制 交通整理
レンダリングの渋滞通信の渋滞
配信リソースの最適化
スポーツカー
15点 70点
low
ファーストビューレンダリング
インタラクティブ
セカンドビューレンダリング
配信リソースの最適化
middle
ファーストビューレンダリング
セカンドビューレンダリング
配信リソースの最適化
high
body DCL load
Webサイト表示高速化の仕組み
Engagement delay
4. Webサイト高速化3つのテクノロジー
1.高速・セキュアなOS超高速CMS実行環境「KUSANAGI」
2.高速化エンジン「WEXAL® Page Speed Technology」
3.戦略AI「David」
Webサイト高速化3つのテクノロジー
KUSANAGI Premium Editionに搭載
KUSANAGI Premium Editionに搭載
OS(28プラットフォーム対応)
超高速WordPress仮想マシン
KUSANAGI(超高速CMS実行環境)
稼働開始4年で累計3万台を突破!
・WordPressを通常の15倍で実行するOS
・1,000 リクエスト/秒
(ページキャッシュ非使用)
・60,000 リクエスト/秒
(ページキャッシュ使用)
※4vCPU、最大性能時
https://kusanagi.tokyo/
通信
Webサーバ
アプリ
DB
通信
ファーストビューレンダリング
I/O
Webサイト表示高速化の仕組み
15点15点 70点
バックエンド
https://www.wexal.jp/• オリジナルソース• WEXALで出力
オリジナルのシステムに改変を加えずに、
・HTML、CSS、Javascript、画像等のリソース最適化
・リソース、プログラムの実行タイミング、順序の制御
WEXAL® Page Speed Technology(Web高速化エンジン)
ファーストビューを素早く表示
広告もスムーズに表示
WEXAL® Page Speed Technology(Web高速化エンジン)ユーザー体験の向上
画像の最適化
ユーザーの
環境に合わせ(利用ブラウザ別)
適切な画像を表示
オリジナルフォルダ
IMG
同じフォーマットで最も効果的な圧縮方法を選択
初 期:コマンドで画像書き出し稼働後:画像の追加を検知
最適化フォルダ
最適な画像を格納IMG
WebPなど次世代フォーマットと比較
• サイズ・圧縮率の調整• メタ情報の削除
WEXAL® Page Speed Technology(Web高速化エンジン)
・圧縮転送
・gzip
・Brotli
・ホワイトスペースの削除
・空行の削除
・インデントの削除
・コメントの削除
・URLの省略
HTML/CSS/JSの軽量化 圧 縮
WEXAL® Page Speed Technology(Web高速化エンジン)
•ページ速度の指標『Google PageSpeed Insights』の評価を圧倒的改善
•画像容量の圧縮、不要なリソースの削除などにより表示高速化を実現
オリジナルに一切改変を加えない
画像・ソースコード共に
オリジナルには一切改変を行わない
ON,OFFで瞬時に元の状態に戻せる
運用時の不具合などの切り分けが容易
WEXAL® Page Speed Technology(Web高速化エンジン)
通信
Webサーバ
アプリ
DB
通信
ファーストビューレンダリング
I/O
Webサイト表示高速化の仕組み
15点15点 70点
バックエンド
Webサイト高速化3つのテクノロジーOnimaru David(戦略AI)
Nemo 船長(AI・Puppeteer制御) Onimaru David
(AI・戦略立案)クラスター対応設定ファイル
Nautilus 号(Puppeteer)
Aronnax 教授(AI・クラスタリング)
ページごとの設定ファイル
クラスタリング(DBSCANアルゴリズム)
RPA
RPA
RPA
Webサイトページ1
Webサイトページ2
Webサイトページ3
KUSANAGI① HTTPリクエスト
②動的処理
④HTTPレンダリング
通信の高速化
処理の高速化
ファーストビューレンダリング
通信の高速化
www
③ HTTPレスポンス
Webサイト高速化3つのテクノロジー
WEXAL
KUSANAGI① HTTPリクエスト
②動的処理
④HTTPレンダリング
通信の高速化
処理の高速化
ファーストビューレンダリング
通信の高速化
www
③ HTTPレスポンス
Webサイト高速化3つのテクノロジー
DAVID
WEXAL
KUSANAGI① HTTPリクエスト
②動的処理
④HTTPレンダリング
通信の高速化
処理の高速化
ファーストビューレンダリング
通信の高速化
www
③ HTTPレスポンス
Webサイト高速化3つのテクノロジー
Easy to change
colors photos
and Text.
Webサイト高速化3つのテクノロジー
5. KUSANAGIの各エディションと
ライセンスについて
KUSANAGIの3つのエディション
無償版 Business Edition Premium Edition
これまでの
KUSANAGIの基本機能
WordPress の動作保証や
シングルサインオンの
シボレス認証にも対応してい
ます。
提供しているKUSANAGIの全ての機能が利用可能。
WEXAL® Page Speed Technology搭載で多層的
な表示高速化の実現や、KUSANAGI
管理画面(開発中)、シボレス認証に対応していま
す。
※ソフトウェア利用料は、サーバのコア数によっ
て変動します。推奨の2コア8GBメモリのサーバ
の場合は1ヶ月約5万円から利用が可能です。
無償 有償 有償最上位
個人向けパーソナルライセンスは無料!
WEXAL® が使える KUSANAGI Premium Edition は
個人サイトでの利用であれば
なんと無料で使用することが可能です!
Premium Edition
パーソナルライセンスはKUSANAGI Marketplaceから
https://marketplace.prime-strategy.co.jp/
ハンズオンセミナーを実施中!
https://enterprise-wordpress.doorkeeper.jp/
ご清聴ありがとうございました!