KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed...

WordPress高速化セミナーKUSANAGI x WEXALでレンダリングまで高速化を実現！

～超高速CMS実行環境KUSANAGI、Web高速化エンジンWEXAL Page Speed Technology、戦略AI DAVIDで実現するUX最大化とPageSpeed100点の自動化戦略～

アジェンダ

1. 自己紹介

2. PageSpeed InsightでみるWebサイト高速化

3. Webサイト表示高速化の仕組み

4. Webサイト高速化３つのテクノロジー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

４. Webサイト高速化３つのテクノロジー

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の３つのエディション

無償版 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/

ご清聴ありがとうございました！