本ページには広告が含まれています。

KonoHaWING+WEXAL+Cocoon高速化!

当サイトは、現在 ConoHaWING+WEXAL+Cocoonで稼働しています。

前回記事で AMPの不具合が解消された WEXAL PST の使用を再開してから、不具合なく比較的高速に安定稼働しているので、現在の設定内容を紹介します。もちろん「AMP」も設定しています。

スポンサーリンク

WEXAL PST の設定

PST」とは、WEXAL® Page Speed Technology® の公式略称です。

当サイトでは、ConoHaWING で 無料提供されている WEXAL PST を次のように設定しています。

WEXAL PST 3つの設定項目

WEXAL PST で設定する項目は「基本設定」「Webコンテンツ最適化」「ファーストビュー高速化」の3つです。それぞれについて現在設定している状況を説明します。

「基本設定」

次のように設定しています。と言っても、これが「デフォルトの設定」そのままという状況です。

WEXAL PST  基本設定

最適化モードは、「スタンダード」か「プロフェッショナル」を選択できます。

「Webコンテンツ最適化」

これも各項目の ON/OFF は「デフォルト」でこの設定です。

WEXAL PST「Webコンテンツ最適化」

変更しているのは次の2か所です。

「画像圧縮レベル」は、デフォルトでは「80」ですが「70」にして圧縮率を高めてみましたが、当サイトの場合は影響がないので「70」としています。

「最適化除外」の設定に、当サイトでソースコードの表示に使用している「Highlighting Code Block」が使用する ”/wp-content/temes/cocoon-child-master/hcb/prism.js” を追加しています。

「ファーストビュー高速化」

「ファーストビュー高速化」を開いた状態がこちらです。
LazyLoad(画像)は「無効」にしています。(Cocoon側で設定しているため)

WEXAL PST「ファーストビュー最適化」

画像は戦略設定のファイルパスの一部だけ表示しています。ステータスに「無効」「有効(推奨)」と表示されていますが、ボタンをクリックして編集状態にしたのが下の画像です。

WEXAL PST「Webコンテンツ最適化」編集状態
「最適化モード」がスタンダードの場合の編集状態

ただし「最適化モード」がスタンダードの場合、「有効(推奨)」の部分だけが変更可能です。

「最適化モード」をプロフェッショナルにした場合、下画像のとおり「無効」の部分も変更可能になります

WEXAL PST  「最適化モード」変更
最適化モードは「スタンダード」から「プロフェッショナル」に変更できる
WEXAL PST  「プロフェッショナル」モードの戦略設定
「最適化モード」がプロフェッショナルなら「無効」も編集状態になる

「プロフェッショナル」で設定したのちに「スタンダード」に変更しも設定した内容は引き継がれるようです。

ファーストビュー高速化のしくみ

「WEXAL® Page Speed Technology®」ファーストビュー高速化の仕組みについて次のとおり説明されています。

WEXAL PST  「ファーストビュー高速化」のしくみ
「WEXAL®」のファーストビュー高速化のしくみ から引用

「WEXAL®」はDOMツリーの形成を妨げるリソースを一旦格納し、DOMツリーの形成を高速化します。
DOMツリーの形成後(DOMContentLoaded)戦略AI「David」の最適化戦略にもとづき、ファーストビューの表示に必要な優先度の高いリソースを読み込み、表示します。

「WEXAL®」のファーストビュー高速化のしくみ から引用

DOMツリー形成など「最適化モード」をうまく設定すれば、ものすごくよさそうな感じがします。

Cocoon 側の設定(記事UP時点の状況)

Cocoo高速化設定と使用しているプラグインを紹介します。

Cocoon 高速化設定

Cocoon の高速化設定については、次の2つだけ設定しています。

1つ目は「ブラウザキャッシュ」です。
Cocoon高速化設定「ブラウザキャッシュ」

ブラウザキャッシュは KonoHaWING 側でも設定できますが、Cocoon側で設定した方が .htaccess に詳細な設定を書き込んでくれます。
また、Cocoon 側で設定すると KonoHaWING 側の設定も連動して「ON」になります。

2つ目は「画像のLazy Load設定」です
Cocoon高速化設定「画像のLazyLoad」

WEXALの「ファーストビュー高速化」にも「画像のLazy Load」がありますが、Cocoon の場合は Lazy Load を行いたくない場合の設定を「img」タグで指定できます。当サイトでは「アイキャッチ」や「カルーセル」などを遅延読み込みさせたくなかったので Cocoon 側を「ON」に設定しました。

高速化のために使用しているプラグイン

採用しているプラグインは次の2つです。

Cocoon高速化で採用している「プラグイン」①
Cocoon高速化で採用している「プラグイン」②
Flying Scripts

WEXALの「ファーストビュー高速化」の「LazyLoad(CSS・JavaScript)戦略設定」に表示されていない JavaScript を遅延読み込みさせるために使っています。

Flying Scripts の設定はよく効きますが、今後は状況を見て使わない方向も検討していきます。

WP Fastest Cache

当初、こちらは一旦外していましたが、「WP Fastest Cache」の高速ページキャッシュを使ったほうが読み込みがかなり早くなります。

テストを繰り返した結果、動作に支障が無いことも確認できたので再び採用することとしました。

(下記は)前回記事で設定していた内容と変更があったものに打ち消し線を入れました。

Cocoon の高速化設定をすべて解除しました。
 ・ブラウザキャッシュの有効化
 ・HTMLの縮小化
 ・CSSの縮小化
 ・JavaScriptの縮小化
 ・Lazy Loadの有効化
高速化のために使用していたプラグインを停止・削除しました。
 ・EWWW Image Optimizer(画像圧縮プラグイン)
 ・WP Fastest Cache(高速ページキャッシュプラグイン)

パフォーマンスを確認

2022年5月18日 16:47 WEXALを再び「ON」にした時の「モバイル」のパフォーマンスがこちら。

・PageSpeed Insights の パフォーマンススコアは通常で「70」点前後
AMPで「77」点前後
・Cumulative Layout Shift (CLS) 0.07 ・・・合格!
・First Input Delay (FID) が 79ミリ秒 ・・・一応100はクリアしている?

現在(2022年6月12日 17:50)の「モバイル」パフォーマンスはこちらです。

PageSpeed Insights「モバイル」評価

AMPではない通常の点数がこちらです。90を超える場合もあります。

PageSpeed Insights「モバイル」パフォーマンスの点数

AMP の点数がこちらです。(画像のAMPという文字が切れている^^;)

PageSpeed Insights「モバイル」AMPパフォーマンスの点数

AMPの方が点数が低い!という結果です!

サイトの表示も違いが出ている!

ひとまず現状はこんな感じです。もう少しだけテストしながら様子を見てみますが、AMPはやめる方向にどんどん気持ちが傾いています。

PCでもカルーセルを表示していないのにAMPが負けている!

PageSpeed Insights「PC」パフォーマンスの点数
PageSpeed Insights「PC」AMPパフォーマンスの点数

まとめ(おわりに)

以上、当サイトの KonoHaWING+WEXAL+Cocoon で安定稼働中! の設定内容について書いてみました。

ConoHaWING で Cocoon を使っている方の参考にしていただけたなら幸いです。

前回も書きましたが、ConoHaWING 利用中の方は勿論ですが、レンタルサーバーを検討中の方は是非「WEXAL PST」の利用も検討してみてください。

AIを用いてサイトを高速化できる「WEXAL PST」の利用は、ConoHaWING なら 無料!です。

くるみこ
くるみこ

いかがでしたか?
通常とAMPのパフォーマンスを比較したら、以前よりも通常の点数がよくなってきていることに驚きを感じ始めています!
今後はAMPを利用しなくても良いのではないかという思いがますます強くなってきました。

★★★ ブログランキング参加中! クリックしてね(^^)/ ★★★

【今後の記事について】

今回の記事はいかがだったでしょうか。皆さまのお役に立てたなら幸いです(^^;
「汎用でだれでも使えて活用できるように考えてる」というポリシーで、記事を継続して書いていきたいと思っています。どうぞよろしくお願いしますm(_ _)m

【検討中の今後の記事内容は・・・・】
・実務に役立つものを提供できるよう常に検討しています(^^ゞ
・その他雑記的に「プチネタなど」もいろいろ考えていきたいと思っています・・・・
・今後の記事にご期待ください(^^)/

スポンサーリンク
スポンサーリンク

過去記事のサンプルファイルをダウンロードできます

過去の記事で使用したサンプルファイルをダウンロードできるようにページを設置していますので、こちら(このリンク先)からご利用ください