【WordPress】誰でも簡単にサイトを爆速で表示させられる方法！？
どうも。
少々雑な気がしないでも無いですが、高速化に関する一番手っ取り早い方法というのを書いていきます。
まぁアレですよね、またphotonの話なんですけども。
とりあえず見た目が固まりましたので有効化し、その検証結果を載っけてみることとしましょうか、という話の流れですね。
事前準備
今回の方法で爆速表示させるためにまず必要なことは、PC表示とモバイル表示でそれほど大差が無いサイト構成にしておく必要があります。
キャッシュ系プラグインを使用しますのでモバイルにも同じコンテンツが表示される場合があります。
一応出し分けは出来ますが、「モバイルユーザーにはキャッシュを表示しない」という設定にしてしまうとモバイル側は爆速には出来ない、ということになってしまいますよね。
「ウィジェットやヘッダー画像等、PCとモバイルで出し分けしているのに…」という場合は各CSSをインラインで埋め込むことで対処出来ます。
phpを使ったプラグイン（「ウィジェットロジック？」忘れた…ｗ）の場合だと設定がガン無視されますｗ
また詳しいやり方は時間ある時に書いてみますが、とりあえずはグーグル先生にお聞きください。
爆速表示方法検証結果
ロリポップ先輩オンリー
まずはロリポップ先輩のコンテンツキャッシュ機能のみのGTmetrixの結果から。
普通にこの状態でも優秀です。
一応環境としては（ステマ臭いですがｗ）国産無料最速テーマ「Luxeritas」を使用しWebフォントは英数字にのみ適用し、日本語は確か「游ゴシック＋ヒラギノ角ゴ」です。
その他の設定はこちらの記事にある通り。
https://ksukelife.com/blog/1374/これでも全然問題ありませんね。
WPFC＋photon
続いてこちらがプラグインを有効化した場合の結果。
…前回記事からWPFCと略してますが「WPFastestCache」の略です。長いので。
このプラグイン上でphotonも有効化出来ます。（設定方法は後日書いてみます。）
設定上変更したものは、
- Luxeritasで追記した「高速化用.htaccess」を消しました。理由はWPFCでもほぼ同様の追記が行われるので重複してたらまずいかな…と思いまして。
- ロリポップのコンテンツキャッシュ機能はオフ
これだけです。
結果がこれ↓
良いんじゃないでしょうか。(*´∀｀)
注意点
今回はLuxeritasが「Intersection Observer」を採用したことにより、photonを使用できるようになりました。詳細は前回記事で。
なのでもし仮に、通常のLazyLoadを使用している場合だとphotonは有効にするべきではありませんのでご注意ください。
普通に画像が表示されなくて焦りますｗ
また、キャッシュがめちゃくちゃ強力（＝融通が効かない状態）になりますのでCSS等変更を加えても反映されない可能性があります。慣れてない方は注意です。
管理バーの「ClearCache」でのキャッシュ削除及びブラウザ履歴のクリアが必須作業になります。
やったことはWPFCをインストールして圧縮・結合等の項目以外を選択し、CDNからphotnを有効化しただけです。
たったこれだけで、1秒縮められるとは…。
とりあえず一旦はこのまま様子見るつもりですがまた不具合あれば追記致します。