■WordPressテーマ「JIN」利用中の悩み
JINの速度が遅い…
WP Rocket使ってみようカナ
以上のような、高速化プラグインWP rocketのJIN設定上の疑問についてお答えします
結論からいうと
JINでWP Rocket導入後、サイト速度大幅UP!
▼JINでWP Rocket導入!数値比較
導入前 | 導入後 | |
LCP | 8.7秒 | 1.7秒 |
CLS | 0.075秒 | 0.033秒 |
- 高速化プラグイン「WP Rocket」
- JINでWP Rocket導入!5ステップ
- 注意点!WP Super Cache削除
- JINにWP Rocket設定!不具合は?改善策は?
JINでWP rocket導入!体験談を中心にまとめます
WP Rocket導入の結果
- 月500円でサイト高速化
- 記事インデックス速度&PV向上
WP Rocketで高速化!
さっそく見ていきましょう!
Contents
速度改善!なぜ重要?
Google最新発表!
“Page Experience Update” 2021
▼ウェブページUX重要指標(3つ)
LCP | Largest Contentful Paint ページ表示速度を測る指標 |
FID | First Input Delay サイトのインタラクティブ性や 反応速度を測る指標 |
CLS | Cumulative Layout Shift 「累積レイアウト変更」の意味 視覚要素の安定性を示す指標 |
グーグルアプデ2021
当サイトには以下発令↓
ただちに改善せよ!!!
高速化!JIN「公式」対処法
結果、
少し改善!
でも、まだJIN遅い…
▼JIN公式おすすめ高速化対処法(7つ)
- JINを最新版にアップデート
- FontAwesomeをOFFにする
- 画像は圧縮してアップロード
- アニメーションをOFFにする
- 標準フォントを利用する
- 高速化プラグインを活用する
- Xアクセラレーターを活用する
引用元:JINの高速化方法を全まとめ!表示速度が遅い時の対処法は?|JIN MANUAL
↓↓↓
▼JIN公式高速化!結果は「パフォーマンス34」💦
それなら!
有料版!高速化プラグイン「WP Rocket」
高速化!WP Rocket
WP Rocket?
WordPress高速化プラグイン!
引用元:WordPressキャッシュプラグイン-WP rocket
WP rocketは、世界で180万サイト以上の利用実績!
あの有名な「hitodeblog」でも使っているそうです。
それなら、無料プラグイン「WP Super Cache」から乗り換えてみようかな。
金額は?
年額49ドル (1サイト)
引用元:WordPressキャッシュプラグイン-WP rocket
選択したプランはSingle!
- サイト数:1つ
- ライセンス期間:1年
- 金額:49ドル(月4ドル)
アレコレ対策してもムリだった高速化が、ワンコインで実現!
→1年間、トライしてみよかな
効果は?
あり!数値が大幅UP
■WP rocket導入前後の数値
導入前 | 導入後 | |
LCP | 8.7秒 | 1.7秒 |
CLS | 0.075秒 | 0.033秒 |
▼サチコ合格ライン!数値は?
祝!Google「合格ライン」初クリア!
WP Rocket導入!5ステップ
ステップ① サイトのスピードチェック!
WP rocket導入前後の速度変化を比較!
■スピードチェック
いろいろなツールで測定!
ステップ② WP rocket購入!支払い方法は?
Paypal「ドル」払いを選択!
■支払い方法:2択
- クレジットカード
- Paypal
■Paypalを選択した理由は?
- 海外サイトにクレジットカード情報入力は不安
- ソニー銀行デビットカードのドルを使用すれば、為替手数料が最小(たぶん)
※為替手数料(円→ドル):Paypal4%、クレカ1.6%前後
ステップ③ 重複プラグイン一時停止!
WP rocket導入前、重複プラグインを一時停止!
チョイスした重複プラグインを「一時停止」!
当サイトでは、以下4つ
- Autoptimize
- BJ Lazy Load
- WP Super Cache
- WP-Optimize
ステップ④ WP Rocket設定
サイトに合う設定が必要!
この設定作業が一番大変!
参考までに、設定の当サイト事例を記しておきます。
■どんなサイトで設定した?
- WordPressテーマ:JIN
- WP rocketバージョン:version3.10.7(2022年2月)
■WP rockt設定:チェックを入れた項目
Cache | ☑ Enable caching for mobile devices |
☑ Cash Lifespan 10hours | |
File Optimization | ☑ Minify CSS Files |
☑ Combine CSS files | |
☑ Optimize CSS Delivery: LORD CSS ASYNCHRONOUSLY | |
☑ Minify JavaScript files | |
☑ Load JavaScript deferred | |
☑ Delay JavaScript execution | |
MEDIA | ☑ すべてチェック |
Preload | ☑ すべてチェック ※途中、サイトマップURL入力 |
Advanced Rules | 設定なし |
Database | ☑ すべてチェック |
CDN | 設定なし |
Heartbeat | ☑ Control Heartbeat |
Add-ons | WebP Compatibility Add on status「on」 |
Image Optimization | 設定なし |
ネットで情報収集しながら、チェック選択
迷ったらとりあえずチェック!
で、不具合箇所をあとから検証修正していく感じ
ステップ⑤ 設定完了!サイトで動作チェック!
おおむねOK!
■Let’s動作チェック!
- スピードチェック、点数大幅改善!(導入10分後)
- サイトデザイン、大きな崩れなし ※スマホヘッダーの1部崩れ(後述)
- サイト動作、問題なし!
- リンク、正常機能!
サイト反映にどの程度時間がかかるか不明
→様子見期間として、2日間は設定ノータッチ
WP Rocket設定!注意点は?
WP Super Cache「削除」
その「無効化」ボタン、ちょっと待った!!!
- Autoptimize
- BJ Lazy Load
- WP Super Cache
- WP-Optimize
引用元:WP Super Cache-WordPressプラグイン
当サイトは、なにも考えずWP Super Cache「削除」ボタン実行!
→結果、1部ファイルが削除されていません
困難な「手動削除」未解決問題、絶賛取り組み中。
WP Rocket設定!不具合は?
不具合は?
レイアウトの1部崩れ発見!
動作は問題ナシ!
■レイアウト崩れ部位:サイト上部↓↓↓
改善策は?
チェックON・OFFを試す!
試行① 失敗!File Optimization変更
■ File Optimization:CSS Files
Optimize CSS Delivery: REMOVE UNUSED CSS (BETA)
→LORD CSS ASYNCHRONOUSLYにチェック変更
↓
【失敗】サイトの崩れ残存!しかも
LCPとCLS数値、少し落ちる・・・
試行② 成功!Cash変更
▼赤枠チェック追加!
結果、
スマホヘッダー上部崩れ修正!
WP Rocket導入!考察
体験からわかった点!3つ
- WP Rocket設定で速度結果が大きく変動
- 特にFile Optimizationの設定は重要
- 生じた不具合はヘッダー崩れ→改善
WP Rocket設定でサイトが永久に修正できなくなる?
トライした結果、その心配は杞憂でした
各サイトにあわせたベターな調整を!
まとめ
以上、JINでWP rocket導入!体験談を中心にまとめました
ただちに改善せよ!!!
WP Rocket導入の結果
- 月500円でサイト高速化
- 記事インデックス速度&PV向上
- サチコ(LCPの問題)改善が必要→合格
▼コアバイタル大幅改善!
導入前 | 導入後 | |
LCP | 8.7秒 | 1.7秒 |
CLS | 0.075秒 | 0.033秒 |
・・・サチコの「コアバイタル水準」高すぎ~
!気を取り直して
▼サイト高速化!プランB
▼サイト高速化プランAB実行→サチコから通知(2カ月後)
パソコン:すべて合格!
モバイル:LCP「は」合格!
サイト高速化!
- ユーザー満足度向上
- アクセス、PV、売上増加
- 検索順位アップ
IN以外でもWP rocketと相性のいいテーマはたくさん!
トライしてみる!WP rocket
≫WordPressキャッシュプラグイン-WP rocket
◆「エックススサーバー」キャンペーン
50%キャッシュバック!
6/16まで
\WordPressブログで副収益/
▼例)スタンダード12ヶ月契約
通常 | キャンペーン | |
---|---|---|
サーバー 12ヶ月 | 6600円 | |
ドメイン (com.netなど) | 前後 | 永久無料 |
月550円!WordPressブログに挑戦
お試し10日間!解約無料
◆キャンペーン!動画配信サービス(VOD)
すべて無料で楽しめる!
計289日間、ほぼ1年!
月額 (税込) | 無料 トライアル | |
---|---|---|
Amazonプライム・ビデオ | 500円 | 30日間 |
2189円 | 31日間 | |
NETFLIX | 990円~ | ー |
Hulu | 1026円 | 14日間 |
dTV | 550円 | 31日間 |
dアニメストア | 440円 | 31日間 |
Paravi | 1017円 | 14日間 |
DAZN | 1925円 | 31日間 |
ABEMA | 960円 | 14日間 |
mieru-TV | 990円 | 最大 31日間 |
ディズニー+ | 990円 | ー |
WOWOW | 2530円 | 最大 31日間 |
WATCHA-iOS専用 | 869円~ | 最大 31日間 |
▼テレビで手軽に動画視聴!
▼NHKEテレ録画不要!Fire TV Stick
◆Amazon「オーディブル」キャンペーン
30日間無料!
\オーディオブックが1冊無料でもらえる/
通常 | キャンペーン | |
---|---|---|
月額 | 0円 |
▼オーディオブック1冊無料!例えばコチラ
英検対策本3000円分お得!
無料体験後は1500円!
◆オンライン英会話NativeCampキャンペーン
5000円分コイン!プレゼント
5/31まで
\無料体験7日間!/
≫業界初!予約無しでレッスン回数無制限のオンライン英会話【ネイティブキャンプ】
コイン特典 | 通常 | キャンペーン |
---|---|---|
プレミアムプラン | 5000円分 |
\テディ先生と英語レッスン!/
≫業界初!予約無しでレッスン回数無制限のオンライン英会話【ネイティブキャンプ】
▼どんなコースがある?
- キッズコース
- (LET’S GO、LET’S GO Phonics)
- SIDE by SIDE
- 英検2次対策(3級~準1級)
- 発音(基礎、実践) etc.
無料体験でこどもの反応チェック
7日間受けホーダイ☻
無料体験7日ダケ?→OK!
(継続しばりなし)
≫業界初!予約無しでレッスン回数無制限のオンライン英会話【ネイティブキャンプ】
◆オンライン英会話「エイゴックス」キャンペーン
初月0円!
期間限定!5/31まで
▼ポイント定期プラン800(例)
月額 (税込) | ネイティブ&日本人 キャンペーン講師 | |
---|---|---|
1ヵ月目 | →0円 | 16回 |
2ヵ月目 | 8250円 | 16回 |
3ヵ月目 | 8250円 | 16回 |
計 | 16500円 | 48回 |
▼エイゴックスは家族シェアOK!
お得にネイティブ!eigox
◆オンライン英会話kiminiキャンペーン
30日間無料!
5/30まで
\継続しばりナシ!/
通常 | キャンペーン | |
---|---|---|
無料体験 | 30日間 |
6028円お得!
スタンダード(毎日1レッスン)
通常6028円→0円
◆オンライン英会話Novakidキャンペーン!
1500円割引!
友達紹介コード掲載!
▼どれだけお得?1500円ボーナス利用例
スタンダード | 通常 | 友達紹介 キャンペーン | 友達 ボーナス |
---|---|---|---|
4週4回 | 2820円 | 940円OFF | |
4週8回 | 5220円 | 1500円OFF |
※ボーナス利用上限:受講料25%まで
▼ノバキッド受講中(ウチの3兄弟)
そのため、
友達紹介コードつかえます!
※紹介コードはお互いの個人情報はわからないようになっています
▼兄弟シェアならさらにお得
- 回数:1回(25分)
- クレジットカード登録不要!
- 記載事項は4つだけ
- ①保護者名前 ②mail ③電話 ④紹介コード