SWELLで「画像圧縮・WebP・第3者遅延読み込み」の対策をしてPSI上げたい人
悩む人ページスピードインサイトの点数の見方がよくわかりません。
記事を投稿するときや、プラグインでできる「サイズや圧縮・WebP対応」対策について教えてください。
SWELL側の高速化設定で、アドセンス・アナリティクス・Twitterとかの第3者コード対策はどうやってやりますか？
スパム対策に入れてるreCAPTCHAを問い合わせページだけに読み込ませたいです。
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきますね。
ページスピードインサイトの点数の見方ってよくわかりませんよね…
ぼくも数字の多さと赤色表示に振り回されて、記事書くよりページスピードインサイト対策に翻弄されていました。
- ページスピードインサイトは点数以上に「ウェブに関する主な指標の評価」が重要で、「適切なサイズの画像・次世代フォーマットでの画像の配信・第3者の使用の最小化・使用していないJavaScriptの削除（reCAPTCHAなど）」が対策ポイント
- 記事投稿時は「iloveimg」のブラウザ上で「png→jpegと横幅サイズを850前後」にして、「TinyJPG」のブラウザ上で圧縮する
- 無料の「Imagify（画像圧縮）・WebP Converter for Media（次世代フォーマット変換）」プラグインを導入
- SWELL側の高速化設定で、フォント設定を「游ゴシック」または「ヒラギノゴシック＞メイリオ」にして、「キャッシュや遅延読み込み」にチェック後、「遅延読み込み対象にするスクリプトのキーワード」に「アドセンス・アナリティクス・Twitter」のコードを入力
- reCAPTCHA設定とInvisible reCAPTCHAをContact Form 7に適用したあとは、「function.php」を編集して問い合わせページだけに反映
本記事では理由や詳細を解説します。
ページのパフォーマンスが重要な理由
調査によれば、ウェブに関する主な指標を改善すると、ユーザー エンゲージメントとビジネス指標が向上します。次に例を示します。
調査によれば、サイトがウェブに関する主な指標のしきい値を満たすと、ユーザーがページ読み込みを放棄する可能性が 24% 低くなりました。
Largest Contentful Paint（LCP）が 100 ms 減少するごとに、Farfetch のウェブ コンバージョン率が 1.3% 上昇しました。
Cumulative Layout Shift（CLS）を 0.2 削減することで、Yahoo! JAPAN では、セッションあたりのページビュー数が 15% 増加し、セッション継続時間が 13% 長くなり、直帰率が 1.72% 低下しました。
Netzwelt はウェブに関する主な指標を改善し、広告収益が 18%、ページビュー数が 27% 増加しました。
CLS を 1.65 から 0 に減らすことで、redBus のドメインのランキングが全世界で大幅に向上しました。
引用：Search Consoleヘルプ
結論から言うと、ブログに投稿する画像の場合、基本的にはJPG、場合によってはPNGとなります。
まず、ブログに掲載する画像にはこんな特徴があります。
画質は普通でいい・できるだけ軽いほうがいい
引用：LOVEMAC.JP
SWELLはver.2.5.6よりスクリプトの遅延読み込み機能を追加しているので、第3者コード読み込みの遅延ができる唯一無二のテーマです。
下記の理由が「SWELL高速化」の背景にはあります。
SWELLの高速化・CWV（Core Web Vitals）対策をより一層強化していくため、「スキルシェア」さんと顧問契約を締結させていただきました。
引用：高速化のプロ、「スキルシェア」さんと顧問契約を締結しました。
スパム対策にreCAPTCHAを設定するのに必要な「設定やプラグインの導入」は、ContactForm7にreCAPTCHAを設定する方法【スパム対策】を参考にどうぞ。
とはいえ、デメリットに下記の現象が現れるので対策が必要です。
問合せフォームからのスパム防止の為、「reCAPTCHA」を設定した後、サイトのページ表示が極端に遅くなってしまいます。
原因としては、「reCAPTCHA」のスクリプトが全ページで読み込まれてしまうことに起因しています。
引用：スタビジ
実際に記事内容の施策の結果、点数を上げるのが難しいモバイルで「70点→95点」になりました（アナリティクス・アドセンス・Twitter・ポチップ・reCAPTCHAの設定を全て入れた状態）。
本記事を読むことでSWELLブログ運営に役立つSEO評価アップ施策となり、下記が身につきます。
身につくこと（クリックすると見出しへジャンプ）
あいうえおLIFEブログ運営が長くなるとサイトスピード遅くなりがちですが、モバイル評価95点スコアになってから、上位表示される記事も増えましたので一定の効果はありますよ！
今日はどうぞ最後まで、お読みくださいね。
1：当サイトのページスピードインサイト公開
サイトスピードはSEOや読者満足度に直結しますよね。
完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる
引用：海外SEO情報ブログ
上記のSEO情報のとおり、表示速度は「直帰率やコンバージョン」に直結しています。
ページスピードインサイトの計測法
サイトスピード改善に定番なプラグインはSWELLに非推奨
サイトスピードの改善と聞くと「Autoptimize・WP fastest chash」を導入しているケースは多いですよね。
とはいえSWELLユーザーはご存知のとおり、下記プラグインは推奨されていません。
SWELL非推奨プラグイン
- Autoptimize
- WP fastest chash
当サーバー環境はエックスサーバーで高速化設定
「エックスサーバーアカウント」＞「サーバー管理」＞「高速化」をクリック。
エックスサーバーでできる3点の高速化
- Xアクセラレータ
- サーバーキャッシュ設定
- ブラウザキャッシュ設定
スコアはモバイルで85点（後半施策で90点超えます）
あいうえおLIFE上記のスコアの「高速化施策」は「SWELL最新アップデート前の手動での第3者コード遅延読み込み」 （記事見出し5つ目）です。
何も考えずにやっていたときは、SWELLといえどモバイル70点くらいでした（すみません、当時の画像ないです）。
悩む人記事後半のSWELLの最新アップデートで「使用していないJavaScriptの遅延読み込み」の設定が楽になって、テーマ側の設定で完結していったんだね。
コアウェブバイタルズのデータ
「ウェブに関する主な指標の評価」と表記されるようになりました。
コアウェブバイタルズについては、SWELLはおすすめ！【評判・レビューに忖度なくメリット・デメリットを解説】に書きました。
苦戦しがちな4ヶ所はどこ？
ページスピードインサイトを改善するのに苦労した項目が下記です。
ページスピードインサイトを改善するのに苦労した項目
- 適切なサイズの画像（サイズや軽量化）
- 次世代フォーマットでの画像の配信（JPEGにするだけでは不十分）
- 第3者の使用の最小化（アドセンスやアナリティクス）
- 使用していないJavaScriptの削除（reCAPTCHAやjQueryなど）
あいうえおLIFE4点クリアしていく方法の詳細を網羅していきます。
2：画像の扱い方
適切なサイズの画像（サイズや軽量化）について解説します。
サイズや軽量化のポイント
- 画像サイズは横幅850
- JPEG使用【スクショしたpng等は変換】
- TinyJPGで圧縮
手順（シーン別で紹介）
jpgデータを選択→「ピクセルで」タブを選択→「幅（px）850」と入力してサイズ変更
画像データが100KB前後になっていればGOOD。
サイズ変更したjpgデータが圧縮後、容量が小さくなっていることを確認。
あいうえおLIFE画像をアップロードする前に行うべきルーティンですね。
悩む人WordPress管理画面のメディアのとこにアップロードするまで、手間ひまかけていく必要があるんだな。
3：プラグイン【SWELLと相性OK】
☑️ブログ運営でSEOとユーザビリティを意識した画像の扱い方
— あいうえおLIFE@登録販売者✖︎WordPress✖︎動画編集 (@pledge17uchs) September 15, 2021
↓記事執筆の最後に上から順にやる↓
〈オンライン〉
●JPEGに変換
●横幅と比率を統一(ぼくは850)
●Tiny JPGで圧縮
〈無料プラグイン〉
●Imagifyで更に圧縮
●WEBpコンバータ#ブログ初心者 #ブログ書け #ブログ仲間と繋がりたい
あいうえおLIFEツイート内容のとおりで、「ImagifyとWEBpコンバータ」を使用することが、プラグイン側でできる画像SEO対策。
- Imagify（画像圧縮プラグイン）
- WebP Converter for Media（次世代フォーマット変換）
上記プラグインは、圧縮と次世代フォーマット変換を可能にします。
①：Imagify（画像圧縮プラグイン）
ワンクリックで画像を最適化：画質を落とさずに画像を圧縮し、WebPを変換してウェブサイトを高速化します。
Imagify は、画像を最適化するための最先端のツールです。この力を WordPress で直接使うことができるようになりました。
Imagify を有効にすると、WordPress にアップロードされたサムネイルを含むすべての画像が自動的に最適化されます。Imagify は画像を圧縮するだけでなく、WebP 画像の変換にも使用でき、ウェブサイトのサイズを縮小して高速化することができます。
引用：Imagify公式ページ
導入後は「メディア」＞「ライブラリ」内をImagify圧縮
無料で毎月限られた容量圧縮できるが、翌月はリセットされ、便利（下記画像）。
WEBブラウザ上でTinyjpg圧縮した画像でもさらに、圧縮できます。
②：WebP Converter for Media
WebPやAVIFの画像を提供することで、ウェブサイトを高速化します。標準的なJPEG、PNG、GIF形式のファイルをWebPやAVIF形式に置き換えることで、品質を落とさずにページの重さを半分以上に減らすことができます。
プラグインをインストールした後は、もう何もする必要はありません。あなたの現在の画像は、新しい形式に変換されます。画像の圧縮が終了すると、ユーザーは自動的に、元の画像よりもはるかに軽い新しい画像を受け取ることになります。
今日の時点で、ユーザーの90％以上は、WebP形式をサポートするブラウザを使用しています。Webサイトの読み込み時間は、画像の重さに大きく左右されます。WebP変換を使えば、手間をかけずに数秒でスピードアップすることができます。
ユーザーにとっては多くのデータをダウンロードする必要がなくなり、サーバーにとっては負荷が軽減されるため、双方にメリットがあります。最適化されたウェブサイトは、Googleのランキングにも影響することを覚えておいてください。
引用：WebP Converter for Mediaの公式ページ
悩む人導入しておくだけでWebPへ変換可能なプラグインってすごいね！
あいうえおLIFEWebPにはWebブラウザのサービスで変換するのも手ですが、作業行程が増えるので、プラグインで解決しましょう。
英語で扱い辛いですが、下記の記事で導入方法が分かりやすく解説されています。
4：SWELL高速化設定
当サイトの設定を公開
効果ある施策【フォント設定】
「カスタマイズ」＞「サイト全体設定」＞「基本デザイン」の中の「フォント設定」でWebフォントを辞めましょう。
「Noto Sans JP」と「明朝体（Noto Serif JP）」ではなく、「游ゴシック」または「ヒラギノゴシック＞メイリオ」がおすすめ。
プラグインに関しての注意
記事冒頭でも挙げた『よく使用されるサイトスピード改善プラグインAutoptimizeとWP fastest chashは使わない』こと。
あいうえおLIFE「AutoptimizeとWP fastest chash」はSWELLだと相性が悪いです。
テーマ開発者の了（@ddryo_loos）さんの神アップデートによる「SWELL設定で高速化」が可能。
5：第3者コード遅延読み込み
☑️このツイートからのサイトスピード10点スコアアップの要因が最近のツイートスクショ添付画像と下記。
— あいうえおLIFE@登録販売者✖︎WordPress✖︎動画編集 (@pledge17uchs) September 16, 2021
●WEBp一括変換自動対応無料プラグイン導入
Google3大サービスへの施策
●アナリティクス遅延読み込み
●アドセンス遅延読み込み
●リキャプチャ範囲限定
上記入れなきゃ楽だけど、そうはいかん https://t.co/dGcICUqGP2 pic.twitter.com/vRo4FQ1Wad
あいうえおLIFEツイートのとおり画像の扱い方やSWELL設定にあわせて、第3者コードの影響を減らし、使用していないJavaScriptの遅延読み込みすると効果抜群。
下記の2つの方法を紹介します。
- そらいろログさんのメソッド（高度な設定にコードを入れる）
- テーマ側の設定（SWELL設定の高速化）
①：そらいろログさんのメソッド（高度な設定にコードを入れる）
2022年9月追記：SWELLはver.2.5.6から、スクリプトの遅延読み込み機能が追加されたので、②：テーマ側の設定（SWELL設定の高速化）をお読みください。
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "00000000");
</script>上記の”00000000”の部分は、Googleアナリティクスの「自身のトラッキングID」を入力。
Googleアナリティクス＞「管理」＞「トラッキング情報」＞「トラッキングコード」
<script>
var lazyloadads = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
//↓googleアドセンス用 開始↓
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
//↑googleアドセンス用 終わり↑
//↓googleアナリティクス用 開始↓
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://www.googletagmanager.com/gtag/js?id=00000000';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
//↑googleアナリティクス用 終わり↑
//↓Twitter用 開始↓
if (document.getElementsByClassName('twitter-tweet').length !== 0) {
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://platform.twitter.com/widgets.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
}
//↑Twitter用 終わり↑
lazyloadads = true;
}
}, true)
</script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>②：テーマ側の設定（SWELL設定の高速化）
あいうえおLIFESWELLの最新アップデートでテーマ側から「スクリプトの遅延読み込み」が設定可能になりました。
アップデート後の公式記事
twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
adsbygoogle.js,
clipboard.min.js,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,
pochipp/dist/js/update.js,
recaptcha__ja.js,
jquery.min.js?ver=3.6.0,関連記事では、7秒が「第三者コード遅延読み込み」にはおすすめと書いてあります。
当サイトでは、「5秒」が適度でした（遅すぎるとアドセンス表示が間に合いません）。
あいうえおLIFE以下、「ファイルの読み込み」と「ページと遷移高速化」は下記画像の感じで設定（基本ほぼチェックで問題なし）。
あいうえおLIFEGoogleの3大サービス「アドセンス・アナリティクス・reCAPTCHA」を攻略したのは大きくて、あとはTwitterやポチップ、jQueryとかも遅延読み込みできたのが驚異的。
悩む人モバイルの点数が驚愕の「95点」って、スクリプトの遅延読み込みすごすぎ！！
6：reCAPTCHA（キャプチャ）の対策
reCAPTCHAとは何？
reCAPTCHAは、摩擦を生じさせることなく、あなたのウェブサイトを不正や悪用から守ります。
reCAPTCHAは、高度なリスク分析エンジンと適応性のあるチャレンジを用いて、悪意のあるソフトウェアがあなたのウェブサイトで不正な活動を行わないようにします。
一方、正規のユーザーはログイン、購入、ページの閲覧、アカウントの作成が可能となり、偽のユーザーはブロックされます。
引用：Google reCAPTCHAサイト
reCAPTCHAの設定方法（Contact Form7の場合）
問い合わせページだけにreCAPTCHAを読み込む設定
作業環境
- お問い合わせページ：Contact Form 7（プラグイン）で作成
- Contact Form 7は追加CSSで、横幅いっぱいや、ボタンのカスタマイズ
- reCAPTCHA設定：Google reCAPTCHAにて設定後、Invisible reCAPTCHAでContact Form 7に適用
悩む人何が遅くなる原因だったの？
あいうえおLIFEサイトスピード測定すると、すべてのページにリキャプチャが読み込まれていたという現象でさ。
下記の記事読むと、リキャプチャが全ページに読み込まれ、遅くなることが判明。
対策【難易度】
「外観」＞「テーマファイルエディター」＞「SWELL CHILD」＞「functions.php」にコードを追加。
例：固定ページの「お問い合わせ」ページID：11
// お問い合わせページを除き、「reCAPTCHA」を読み込ませない
function dc_dq_style_script() {
if( ! is_page(11)){
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_script( 'google-invisible-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'dc_dq_style_script' );is_page(●●)){ の数字部分は、固定ページで作成した「お問い合わせ」ページのIDを入れてください。
※追加する箇所を間違えないこと
reCAPTCHAの設定とinvisible reCaptchaの導入、「問い合わせページだけにreCAPTCHA読み込み設定」するとページスピード改善とスパム対策両面で対策できますね。
まとめ | コンテンツSEOが本質です
今日はSWELLで「画像圧縮・WebP・第3者遅延読み込み」の対策をしてPSI上げたい人に向けて、下記を解説しました。
- SEO対策を意識した画像の扱い方
- SWELLと相性OKなプラグインでできるサイトスピードアップ
- SWELL高速化設定を公開
- 第3者コードの遅延読み込み
- reCAPTCHA（キャプチャ）の対策は簡単
あいうえおLIFEページスピードインサイトを向上させる中で、ブログ運営に必要な知識や施策が身につきますし、Googleの見解どおり「直帰率やコンバージョン」に影響する指標なので、やっておいて損はないですね。
今後もSWELL側のアップデートが楽しみなので、引き続き唯一無二のテーマを使い込んでいきましょう。
SWELLで満足いくサイトスピードが出せたあとは、SWELLテーマ購入費用の回収や、アドセンスより報酬単価の高いASPアフィリエイトに挑戦していくことがおすすめ。
まだ未実施の人は、A8のセルフバック【自己アフィリ】で5万円稼ぐ案件とは？【体験談】を読みながら、A8.netへのASP登録と、5万円以上のセルフバックを達成しましょう。
今日は最後までお読みいただき、ありがとうございました！