39
WordPress高速化セミナー KUSANAGI x WEXALでレンダリングまで 高速化を実現! ~超高速CMS実行環境KUSANAGIWeb高速化エンジンWEXAL Page Speed Technology、戦略AI DAVIDで実現するUX最大化とPageSpeed 100点の自動化戦略~

KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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

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

Page 2: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

アジェンダ

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の各エディションとライセンスについて

Page 3: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

自己紹介

中野陽子Yoko Nakano

業務推進課

You can find me at LinkedIn : yookonakano

Web制作 / システム管理などの業務経験後、アメリカへ留学。ニューヨークのカレッジ在学中にWomen Who CodeやWordPressイベントなどに参加し、プライム・ストラテジーに出会う。

Page 4: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

2. PageSpeed Insightsでみる

Webサイト高速化

Page 5: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

Googleが提供しているWebサイトの速度計測ツール

PageSpeed InsightsでみるWebサイト高速化

Page 6: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

https://developers.google.

com/web/fundamentals/pe

rformance/why-

performance-

matters?hl=ja

パフォーマンスが重要なのはなぜか

PageSpeed InsightsでみるWebサイト高速化

Page 7: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

https://medium.com/pinterest-engineering/driving-user-growth-with-

performance-improvements-cfc50dafadd7

Pinterest では、ユーザーが体感している待ち時間を

40% 削減した結果、検索エンジンのトラフィック

とサインアップ数が15% 増加しました。

パフォーマンスが重要なのはなぜか

PageSpeed InsightsでみるWebサイト高速化

Page 8: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-

conversion-and-sales-autoanything/

AutoAnythingは、ページの読み込み時間を半分

に短縮したところ、売上が12-13% 増加

する結果となりました。

パフォーマンスが重要なのはなぜか

PageSpeed InsightsでみるWebサイト高速化

Page 9: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

Easy to change

colors photos

and Text.

PageSpeed InsightsでみるWebサイト高速化

Page 10: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

どうして高速化が必要なのか?

Webサイトの高速化PSIで高得点を取る

あくまで手段

重要なのはUXの最大化

Page 11: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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

Page 12: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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

① HTTPリクエスト

②動的処理

④HTTPレンダリング

通信の高速化

処理の高速化

ファーストビューレンダリング

通信の高速化

www

③ HTTPレスポンス

HTTPリクエストからレンダリングまでの、ひとつひとつの処理を丁寧に最適化・高速化する

Page 13: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

通信

Webサーバ

アプリ

DB

通信

ファーストビューレンダリング

I/O Webサイト表示の高速化

||各ステップでかかる時間を削減する

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

Page 14: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

通信

Webサーバ

アプリ

DB

通信

ファーストビューレンダリング

I/O

Webサイト表示の高速化

||各ステップのスコア合計を100点にする

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

15点

15点 70点

バックエンド

Page 15: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ファーストビューレンダリング

Webサイト表示の高速化

||渋滞を解消し、ファーストビューとインタラクティブを最短にする。

インタラクティブセカンドビューレンダリング

高速道路 交通規制 交通整理

レンダリングの渋滞通信の渋滞

配信リソースの最適化

スポーツカー

15点 70点

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

Page 16: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ファーストビューレンダリング

Webサイト表示の高速化

||渋滞を解消し、ファーストビューとインタラクティブを最短にする。

インタラクティブセカンドビューレンダリング

高速道路 交通規制

レンダリングの渋滞通信の渋滞

配信リソースの最適化

スポーツカー

15点 70点

・jpeg,png,gif等画像最適化・Webp等次世代画像フォーマット・Lazy Load・CSS/JS最適化・gzip/Brotli通信最適化など

交通整理

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

Page 17: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ファーストビューレンダリング

Webサイト表示の高速化

||渋滞を解消し、ファーストビューとインタラクティブを最短にする。

インタラクティブセカンドビューレンダリング

高速道路 交通規制 交通整理

レンダリングの渋滞通信の渋滞

配信リソースの最適化

スポーツカー

15点 70点

Phase 1 Phase 2sync (同期)

async(非同期)

cssjs

cssjs

cssjs

cssjs

Engagement delay

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

Page 18: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ファーストビューレンダリング

インタラクティブセカンドビューレンダリング

高速道路 交通規制 交通整理

レンダリングの渋滞通信の渋滞

配信リソースの最適化

スポーツカー

15点 70点

low

ファーストビューレンダリング

インタラクティブ

セカンドビューレンダリング

配信リソースの最適化

middle

ファーストビューレンダリング

セカンドビューレンダリング

配信リソースの最適化

high

body DCL load

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

Engagement delay

Page 19: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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

Page 20: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

1.高速・セキュアなOS超高速CMS実行環境「KUSANAGI」

2.高速化エンジン「WEXAL® Page Speed Technology」

3.戦略AI「David」

Webサイト高速化3つのテクノロジー

KUSANAGI Premium Editionに搭載

KUSANAGI Premium Editionに搭載

OS(28プラットフォーム対応)

Page 21: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

超高速WordPress仮想マシン

KUSANAGI(超高速CMS実行環境)

稼働開始4年で累計3万台を突破!

・WordPressを通常の15倍で実行するOS

・1,000 リクエスト/秒

(ページキャッシュ非使用)

・60,000 リクエスト/秒

(ページキャッシュ使用)

※4vCPU、最大性能時

https://kusanagi.tokyo/

Page 22: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

通信

Webサーバ

アプリ

DB

通信

ファーストビューレンダリング

I/O

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

15点15点 70点

バックエンド

Page 23: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

https://www.wexal.jp/• オリジナルソース• WEXALで出力

オリジナルのシステムに改変を加えずに、

・HTML、CSS、Javascript、画像等のリソース最適化

・リソース、プログラムの実行タイミング、順序の制御

WEXAL® Page Speed Technology(Web高速化エンジン)

Page 24: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ファーストビューを素早く表示

広告もスムーズに表示

WEXAL® Page Speed Technology(Web高速化エンジン)ユーザー体験の向上

Page 25: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

画像の最適化

ユーザーの

環境に合わせ(利用ブラウザ別)

適切な画像を表示

オリジナルフォルダ

IMG

同じフォーマットで最も効果的な圧縮方法を選択

初 期:コマンドで画像書き出し稼働後:画像の追加を検知

最適化フォルダ

最適な画像を格納IMG

WebPなど次世代フォーマットと比較

• サイズ・圧縮率の調整• メタ情報の削除

WEXAL® Page Speed Technology(Web高速化エンジン)

Page 26: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

・圧縮転送

・gzip

・Brotli

・ホワイトスペースの削除

・空行の削除

・インデントの削除

・コメントの削除

・URLの省略

HTML/CSS/JSの軽量化 圧 縮

WEXAL® Page Speed Technology(Web高速化エンジン)

•ページ速度の指標『Google PageSpeed Insights』の評価を圧倒的改善

•画像容量の圧縮、不要なリソースの削除などにより表示高速化を実現

Page 27: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

オリジナルに一切改変を加えない

画像・ソースコード共に

オリジナルには一切改変を行わない

ON,OFFで瞬時に元の状態に戻せる

運用時の不具合などの切り分けが容易

WEXAL® Page Speed Technology(Web高速化エンジン)

Page 28: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

通信

Webサーバ

アプリ

DB

通信

ファーストビューレンダリング

I/O

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

15点15点 70点

バックエンド

Page 29: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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

Page 30: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

KUSANAGI① HTTPリクエスト

②動的処理

④HTTPレンダリング

通信の高速化

処理の高速化

ファーストビューレンダリング

通信の高速化

www

③ HTTPレスポンス

Webサイト高速化3つのテクノロジー

Page 31: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

WEXAL

KUSANAGI① HTTPリクエスト

②動的処理

④HTTPレンダリング

通信の高速化

処理の高速化

ファーストビューレンダリング

通信の高速化

www

③ HTTPレスポンス

Webサイト高速化3つのテクノロジー

Page 32: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

DAVID

WEXAL

KUSANAGI① HTTPリクエスト

②動的処理

④HTTPレンダリング

通信の高速化

処理の高速化

ファーストビューレンダリング

通信の高速化

www

③ HTTPレスポンス

Webサイト高速化3つのテクノロジー

Page 33: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

Easy to change

colors photos

and Text.

Webサイト高速化3つのテクノロジー

Page 34: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

5. KUSANAGIの各エディションと

ライセンスについて

Page 35: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

KUSANAGIの3つのエディション

無償版 Business Edition Premium Edition

これまでの

KUSANAGIの基本機能

WordPress の動作保証や

シングルサインオンの

シボレス認証にも対応してい

ます。

提供しているKUSANAGIの全ての機能が利用可能。

WEXAL® Page Speed Technology搭載で多層的

な表示高速化の実現や、KUSANAGI

管理画面(開発中)、シボレス認証に対応していま

す。

※ソフトウェア利用料は、サーバのコア数によっ

て変動します。推奨の2コア8GBメモリのサーバ

の場合は1ヶ月約5万円から利用が可能です。

無償 有償 有償最上位

Page 36: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

個人向けパーソナルライセンスは無料!

WEXAL® が使える KUSANAGI Premium Edition は

個人サイトでの利用であれば

なんと無料で使用することが可能です!

Premium Edition

Page 37: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

パーソナルライセンスはKUSANAGI Marketplaceから

https://marketplace.prime-strategy.co.jp/

Page 38: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

ハンズオンセミナーを実施中!

https://enterprise-wordpress.doorkeeper.jp/

Page 39: KUSANAGI x WEXALでレンダリングまで 高速化を …ossforum.jp/jossfiles/WEXAL Page Speed Technologyのご...Pinterest では、ユーザーが体感している待ち時間を

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