読者の悩み

SWELLでブログ運営していますが、Googleのサイトスピードで計測すると遅いみたいので、速くしたいです。
無料でお金かけずにやりたいです(有料プラグイン買わずに)。
アドセンス貼ったり、Twitter埋め込みも遅くなる原因っぽいけど、どうにかできる?



こんにちは!あいうえおLIFE(@pledge17uchs)
今日は、上記のお悩みを解決します。
まずは『サイトスピード』の計測については、下記を確認ください。




☑️ブログ運営でSEOとユーザビリティを意識した画像の扱い方
— あいうえおLIFE@登録販売者✖︎WordPress✖︎動画編集 (@pledge17uchs) September 15, 2021
↓記事執筆の最後に上から順にやる↓
〈オンライン〉
●JPEGに変換
●横幅と比率を統一(ぼくは850)
●Tiny JPGで圧縮
〈無料プラグイン〉
●Imagifyで更に圧縮
●WEBpコンバータ#ブログ初心者 #ブログ書け #ブログ仲間と繋がりたい
本記事のタイトルを見て、「サイトスピードの改善ってことは『AutoptimizeとかWP fastest chash』なんじゃないの〜?」と思われたかも。
とはいえ、SWELLユーザーはご存知のとおり、下記プラグインは推奨されていません。
- Autoptimize
- WP fastest chash



じゃあ、対策はどうするの?



ツイート内容のとおりで、プラグインでは『ImagifyとWEBpコンバータ』を使用して、「画像の扱い方を工夫」。
プラスアルファで、SWELLテーマ側の『高速化設定』するのもオススメ。
☑️このツイートからのサイトスピード10点スコアアップの要因が最近のツイートスクショ添付画像と下記。
— あいうえおLIFE@登録販売者✖︎WordPress✖︎動画編集 (@pledge17uchs) September 16, 2021
●WEBp一括変換自動対応無料プラグイン導入
Google3大サービスへの施策
●アナリティクス遅延読み込み
●アドセンス遅延読み込み
●リキャプチャ範囲限定
上記入れなきゃ楽だけど、そうはいかん https://t.co/dGcICUqGP2 pic.twitter.com/vRo4FQ1Wad
上記のツイートのとおり、第三者コードの遅延読み込みも効果抜群ですので、本記事で解説します。
気になる項目へクリックしてジャンプできます



難易度高めな施策もあるよね。



モバイル評価95点スコアのぼくが網羅したから、ぜひ実施してみてくださいね。
難しいところは、手を止めて作業してみてください。
1、当サイトのページスピードインサイト公開


サイトスピードはSEOや読者満足度に直結しますよね。
完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる
引用:海外SEO情報ブログ
当サーバー環境はエックスサーバー
「エックスサーバーアカウント」>「サーバー管理」>「高速化」をクリック。
下記の3点を実施
- Xアクセラレータ
- サーバーキャッシュ設定
- ブラウザキャッシュ設定
公式エックスサーバー
スコアはモバイルで85点(後半施策で90点超えます)



上記のスコアの「高速化施策」は「SWELL最新アップデート前の手動での第三者コード遅延読み込み」 (記事見出し5つ目)になります。
何も考えずにやっていたときは、SWELLといえどモバイル70点くらいでした(すみません、当時の画像ないです、、)。



記事後半のSWELLの最新アップデートで『使用していないJavaScript』の遅延読み込みが設定が楽になって、テーマ側の設定で完結していった感あるよね。



ググって出てくるプラグインは使わずとも、SWELLテーマ内でSEO対策完備に近づけているの開発者『神』。
コアウェブバイタルズのデータ


上記の関連記事に、コアウェブバイタルズについて書いた箇所があります。
苦戦しがちな4ヶ所はどこ?


上記画像のように、合格するのに苦労した項目を挙げます。
- 適切なサイズの画像(サイズや軽量化)
- 次世代フォーマットでの画像の配信(JPEGにするだけでは不十分)
- 第三者の使用の最小化(アドセンスやアナリティクス)
- 使用していないJavaScriptの削除(reCAPTCHAやjQueryなど)



上記4点クリアしていく方法を解説しますね。
2、画像の扱い方


適切なサイズの画像(サイズや軽量化)について解説します。
ポイント
- 画像サイズは横幅850
- JPEG使用【スクショしたpng等は変換】
- TinyJPGで圧縮
手順(シーン別で紹介)
jpgデータを選択→「ピクセルで」タブを選択→「幅(px)850」と入力してサイズ変更
画像データが100KB前後になっていればGOOD
サイズ変更したjpgデータが圧縮後、容量が小さくなっていることを確認



上記手順踏んだら、画像をアップロードしましょう。



WordPress管理画面のメディアのとこにアップロードするまで、手間ひまかけていく必要があるんだね。
3、プラグイン【SWELLと相性OK】


- Imagify(画像圧縮プラグイン)
- WebP Converter for Media(次世代フォーマット変換)
上記プラグインは、圧縮と次世代フォーマット変換を可能にします。
①Imagify(画像圧縮プラグイン)


DeepLにて英語→日本語訳
ワンクリックで画像を最適化:画質を落とさずに画像を圧縮し、WebPを変換してウェブサイトを高速化します。
Imagify は、画像を最適化するための最先端のツールです。この力を WordPress で直接使うことができるようになりました。
Imagify を有効にすると、WordPress にアップロードされたサムネイルを含むすべての画像が自動的に最適化されます。Imagify は画像を圧縮するだけでなく、WebP 画像の変換にも使用でき、ウェブサイトのサイズを縮小して高速化することができます。
Imagify公式ページ
導入後は「メディア」>「ライブラリ」内をImagify圧縮


無料で毎月限られた容量圧縮できるが、翌月はリセットされ、便利(下記画像)。


WEBブラウザ上でTinyjpg圧縮した画像でもさらに、圧縮できます。
- 無料版の圧縮の容量は?すぐなくなる?
-
無料の圧縮上限25MBなので、日頃からWordPressメディア管理画面にアップロードする前に本記事で紹介した「jpgで扱う」「サイズ変更」「圧縮」を実施していれば、数10枚はImagify圧縮可能。
②WebP Converter for Media


DeepLにて英語→日本語訳
WebPやAVIFの画像を提供することで、ウェブサイトを高速化します。標準的なJPEG、PNG、GIF形式のファイルをWebPやAVIF形式に置き換えることで、品質を落とさずにページの重さを半分以上に減らすことができます。
プラグインをインストールした後は、もう何もする必要はありません。あなたの現在の画像は、新しい形式に変換されます。画像の圧縮が終了すると、ユーザーは自動的に、元の画像よりもはるかに軽い新しい画像を受け取ることになります。
今日の時点で、ユーザーの90%以上は、WebP形式をサポートするブラウザを使用しています。Webサイトの読み込み時間は、画像の重さに大きく左右されます。WebP変換を使えば、手間をかけずに数秒でスピードアップすることができます。
ユーザーにとっては多くのデータをダウンロードする必要がなくなり、サーバーにとっては負荷が軽減されるため、双方にメリットがあります。最適化されたウェブサイトは、Googleのランキングにも影響することを覚えておいてください。
WebP Converter for Mediaの公式ページ



早い話、ワンタッチで、WebPへ変換可能なプラグインってことね(すごいな!!)。



WebPにはWebブラウザのサービスで変換するのも手です。
とはいえ、作業行程が増えるので、プラグインで解決しましょう。
英語で扱い辛いですが、下記の記事で分かりやすく解説されています。


上記プラグイン使うことで、次世代フォーマットの配信が可能に。
4、SWELL高速化設定


当サイトの公開


効果ある施策【フォント設定】
「カスタマイズ」>「サイト全体設定」>「基本デザイン」の中の「フォント設定」でWebフォントを辞めましょう。
「Noto Sans JP」と「明朝体(Noto Serif JP)」ではなく、「游ゴシック」または「ヒラギノゴシック>メイリオ」がおすすめ。
プラグインに関しての注意
記事冒頭でも挙げた『よく使用されるサイトスピード改善プラグインAutoptimizeとWP fastest chashは使わない』こと。



上記はSWELLだと相性が悪いです。
テーマ開発者の了(@ddryo_loos)さんが、解説しました『SWELL設定』で高速化できるように施されてます。
5、第三者コード遅延読み込み





画像の扱い方とSWELL設定のあとに、第三者コードの影響を減らし、使用していないJavaScriptの遅延読み込みは効果抜群。
下記の2つの方法を紹介します。
- そらいろログさんのメソッド(高度な設定にコードを入れる)
- テーマ側の設定(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設定の高速化)



SWELLの最新アップデートでテーマ側から「スクリプトの遅延読み込み」が設定可能になりました。
アップデート後の公式記事


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秒」が適度でした(遅すぎるとアドセンス表示が間に合ってないオチ)。



以下、「ファイルの読み込み」と「ページと遷移高速化」は下記画像の感じで設定(基本ほぼチェックで問題なし笑)。





モバイルの点数は驚愕の「95点」!
スクリプトの遅延読み込みすごすぎ!!





Googleの3大サービス『アドセンス・アナリティクス・リキャプチャ』を攻略したのは大きいな。
あとは、Twitterやポチップ、jQueryとかも遅延読み込みできたのすごいわ。
6、reCaptcha(キャプチャ)の対策


reCAPTCHAとは何?
reCAPTCHAは、摩擦を生じさせることなく、あなたのウェブサイトを不正や悪用から守ります。
reCAPTCHAは、高度なリスク分析エンジンと適応性のあるチャレンジを用いて、悪意のあるソフトウェアがあなたのウェブサイトで不正な活動を行わないようにします。
一方、正規のユーザーはログイン、購入、ページの閲覧、アカウントの作成が可能となり、偽のユーザーはブロックされます。
Google reCAPTCHAサイトより
SWELLにreCPATCHA設定する
問い合わせページだけにリキャプチャを読み込む設定
作業環境
- お問い合わせページ:Contact Form 7(プラグイン)で作成
- Contact Form 7は追加CSSで、横幅いっぱいや、ボタンのカスタマイズ
- reCAPTCHA設定:Google reCHAPTCHAにて設定後、Invisible reCAPTCHAでContact Form 7に適用



何が遅くなる原因だったの?



サイトスピード測定すると、すべてのページにリキャプチャが読み込まれていたという現象でさ。
下記の記事読むと、リキャプチャが全ページに読み込まれ、遅くなることが判明。
対策【プログラミング少しやります】
「外観」>「テーマファイルエディター」>「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を入れてください。
追加する箇所を間違えないこと


上記実行すると、問い合わせページだけにリキャプチャが読み込まれ、サイトスピード改善に。
まとめ | コンテンツSEOが本質です
以上、SWELLユーザー向けに「GoogleのPageSpeed Insights」のサイトスピード改善について、解説しました。
ブログで稼ぐには、コンテンツSEOといった「ライティング力や記事作成」が本質ではありますが、ついついこだわってしまう「サイトスピード」は内部SEO対策は沼です。
本記事で、サクッとSEO対策につながるアクションをして、ユーザーファーストのブログ記事をガンガンを作りましょう。



ブログ運営しながら、セルフバックで収益得つつ、アフィリエイトの感覚つかむなら下記の記事。



ブログは資産形成にもなるので、同時に仮想通貨投資で資産運用するなら、コインチェックもセルフバックして、始めちゃいましょう。