【完全版】SWELLサイトスピードUP【WebP・第三者コード対策が必須】

あいうえおLIFE

登録販売者∞WordPress∞動画編集

広島在住 / 医薬品登録販売者【薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住ライフスタイルやメンタルヘルスケア/ 配置薬10年・WordPress2年・動画編集1年半 / 雑記ブログ:あいうえおLIFE【健康のススメ】「好きや得意なことを情報価値に」 / 特化ブログ:人生を変えた映画・アニメBlog「映画・アニメの体験価値を」/ 2サイト計月間7,000PV / 収益1万

プロフィール

読者の悩み

SWELLでブログ運営していますが、Googleのサイトスピードで計測すると遅いみたいので、速くしたいです。

無料でお金かけずにやりたいです（有料プラグイン買わずに）。

アドセンス貼ったり、Twitter埋め込みも遅くなる原因っぽいけど、どうにかできる？

あいうえおLIFE

こんにちは！あいうえおLIFE（＠pledge17uchs）

今日は、上記のお悩みを解決します。

まずは『サイトスピード』の計測については、下記を確認ください。

1、当サイトのページスピードインサイト公開

サイトスピードはSEOや読者満足度に直結しますよね。

完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる
引用：海外SEO情報ブログ

上記のSEO情報のとおり、表示速度はポイント。

当サーバー環境はエックスサーバー

「エックスサーバーアカウント」＞「サーバー管理」＞「高速化」をクリック。

下記の3点を実施

Xアクセラレータ
サーバーキャッシュ設定
ブラウザキャッシュ設定

公式エックスサーバー

XSERVERでWordPressを始めたら、高速化設定は忘れずにしておこう！とっても簡単 | デジヨク

スコアはモバイルで85点（後半施策で90点超えます）

モバイルとPCのスコア（縦長表示されます）

あいうえおLIFE

上記のスコアの「高速化施策」は「SWELL最新アップデート前の手動での第三者コード遅延読み込み」（記事見出し5つ目）になります。

何も考えずにやっていたときは、SWELLといえどモバイル70点くらいでした（すみません、当時の画像ないです、、）。

くろーむ

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

あいうえおLIFE

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

コアウェブバイタルズのデータ

「ウェブに関する主な指標の評価」と表記されるようになりました。

上記は一定のアクセスがないと、診断できません。

苦戦しがちな4ヶ所はどこ？

上記画像のように、合格するのに苦労した項目を挙げます。

適切なサイズの画像（サイズや軽量化）
次世代フォーマットでの画像の配信（JPEGにするだけでは不十分）
第三者の使用の最小化（アドセンスやアナリティクス）
使用していないJavaScriptの削除（reCAPTCHAやjQueryなど）

あいうえおLIFE

上記4点クリアしていく方法を解説しますね。

2、画像の扱い方

SEO画像 — Infographic vector created by gstudioimagen - www.freepik.com

適切なサイズの画像（サイズや軽量化）について解説します。

ポイント

画像サイズは横幅850
JPEG使用【スクショしたpng等は変換】
TinyJPGで圧縮

手順（シーン別で紹介）

STEP

フリー素材サイトなどからjpeg（jpg）でダウンロード

【FINAL CUT Pro X】商用利用可能フリー素材サイト【動画編集】

STEP

ZIPファイルなど圧縮ファイルは解凍して、jpg画像データを下記サイトへ

iLoveIMG | 画像編集用オンラインツール

STEP

iLoveIMGで画像のサイズ変更を行う

jpgデータを選択→「ピクセルで」タブを選択→「幅（px）850」と入力してサイズ変更

縦横比を維持にチェックしたまま

STEP

サイズ変更されたjpgデータを解凍しておく（複数の場合はZIPファイル）

画像データが100KB前後になっていればGOOD

STEP

jpegデータをTinyJPGへ（パンダのビジュアルがチャーミング）

TinyJPG – Compress WebP, PNG and JPEG images intelligently

STEP

圧縮されたjpgデータを解凍する（圧縮ファイルをダウンロード）

サイズ変更したjpgデータが圧縮後、容量が小さくなっていることを確認

STEP

パソコン画面などのスクリーンショットを撮る

MacBookなら（⌘+Shift+3：全画面）（⌘+Shift+4：選択範囲）→デフォルトでpngデータ

STEP

iLoveIMGでpngデータをjpgデータに変換（画像をJPGに変換）

iLoveIMG | 画像編集用オンラインツール

STEP

画像を選択後、jpgデータに変換

jpgデータに変換後は、サイズ変更→圧縮は同じ作業手順

あいうえおLIFE

スクショの場合は、PNGデータだから作業手順が1つ増えるんだよね。

あいうえおLIFE

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

適切なサイズの画像（サイズや軽量化）の扱い方を解説しました。

くろーむ

WordPress管理画面のメディアのとこにアップロードするまで、手間ひまかけていく必要があるんだね。

3、プラグイン【SWELLと相性OK】

pluginスピードアップ — Business vector created by upklyak - www.freepik.com

Imagify（画像圧縮プラグイン）
WebP Converter for Media（次世代フォーマット変換）

上記プラグインは、圧縮と次世代フォーマット変換を可能にします。

①Imagify（画像圧縮プラグイン）

Imagify – Optimize Images & Convert WebP

DeepLにて英語→日本語訳

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

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へ変換可能なプラグインってことね（すごいな！！）。

あいうえおLIFE

WebPにはWebブラウザのサービスで変換するのも手です。

とはいえ、作業行程が増えるので、プラグインで解決しましょう。

英語で扱い辛いですが、下記の記事で分かりやすく解説されています。

WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」

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

4、SWELL高速化設定

管理画面の「SWELL設定」＞「SWELL設定」画像 — 「SWELL設定」＞「SWELL設定」

当サイトの公開

「外観」＞「カスタマイズ」＞「高度な設定」＞「headタグ終了直前に出力するコード」に下記コード入力して表示させています。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

効果ある施策【フォント設定】

「カスタマイズ」＞「サイト全体設定」＞「基本デザイン」の中の「フォント設定」でWebフォントを辞めましょう。

「Noto Sans JP」と「明朝体（Noto Serif JP）」ではなく、「游ゴシック」または「ヒラギノゴシック＞メイリオ」がおすすめ。

プラグインに関しての注意

記事冒頭でも挙げた『よく使用されるサイトスピード改善プラグインAutoptimizeとWP fastest chashは使わない』こと。

SWELLで非推奨・不必要なプラグインと、推奨プラグインについて | WordPressテーマ SWELL

あいうえおLIFE

上記はSWELLだと相性が悪いです。

テーマ開発者の了（@ddryo_loos）さんが、解説しました『SWELL設定』で高速化できるように施されてます。

5、第三者コード遅延読み込み

あいうえおLIFE

画像の扱い方とSWELL設定のあとに、第三者コードの影響を減らし、使用していないJavaScriptの遅延読み込みは効果抜群。

下記の2つの方法を紹介します。

そらいろログさんのメソッド（高度な設定にコードを入れる）
テーマ側の設定（SWELL設定の高速化）

①そらいろログさんのメソッド（高度な設定にコードを入れる）

【SWELLで遅延読み込み】Analytics/Adsense/Twitterを高速化！必須の設定です。

STEP

「外観」＞「カスタマイズ」＞「高度な設定」

STEP

headタグ終了直前に出力するコード

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag("js", new Date());
    gtag("config", "00000000");
</script>

あいうえおLIFE

上記の”00000000”の部分は、Googleアナリティクスの「自身のトラッキングID」を入力。

Googleアナリティクス＞「管理」＞「トラッキング情報」＞「トラッキングコード」

STEP

bodyタグ終了直前に出力するコード

<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設定の高速化）

あいうえおLIFE

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

アップデート後の公式記事

「スクリプトの遅延読み込み」機能の使い方について | WordPressテーマ SWELL

STEP

「SWELL設定」＞「SWELL設定」＞「高速化」＞「外部スクリプトを遅延読み込みする」にチェック＞「遅延読み込み対象にするスクリプトのキーワード」を入力

遅延読み込み対象にするスクリプトのキーワードを入力画像 — スクリプトのキーワードを入力

【SWELL高速化】SEOに強い最速設定方法！これ以上は無理【99/100】

関連記事内容＋αで、reCAPTCHAとjQueryの遅延を追加しています（reCAPTCHA対策内容も含む）。

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,

STEP

「遅延させる秒数」をデフォルトの3秒から「5秒」に変更（要調整）

関連記事では、7秒が「第三者コード遅延読み込み」にはおすすめと書いてあります。

当サイトでは、「5秒」が適度でした（遅すぎるとアドセンス表示が間に合ってないオチ）。

くろーむ

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

あいうえおLIFE

モバイルの点数は驚愕の「95点」！

スクリプトの遅延読み込みすごすぎ！！

くろーむ

Googleの3大サービス『アドセンス・アナリティクス・リキャプチャ』を攻略したのは大きいな。

あとは、Twitterやポチップ、jQueryとかも遅延読み込みできたのすごいわ。

6、reCaptcha（キャプチャ）の対策

reCAPTCHAとは何？

reCAPTCHAは、摩擦を生じさせることなく、あなたのウェブサイトを不正や悪用から守ります。
reCAPTCHAは、高度なリスク分析エンジンと適応性のあるチャレンジを用いて、悪意のあるソフトウェアがあなたのウェブサイトで不正な活動を行わないようにします。
一方、正規のユーザーはログイン、購入、ページの閲覧、アカウントの作成が可能となり、偽のユーザーはブロックされます。
Google reCAPTCHAサイトより

サイト運営に必須な、スパム対策で使用する「reCAPTCHA（リキャプチャ）」。

SWELLにreCPATCHA設定する

reCAPTCHA v3をプラグイン「Invisible reCAPTCHA」を使って導入する | Korena Sorena

問い合わせページだけにリキャプチャを読み込む設定

作業環境

お問い合わせページ：Contact Form 7（プラグイン）で作成
Contact Form 7は追加CSSで、横幅いっぱいや、ボタンのカスタマイズ
reCAPTCHA設定：Google reCHAPTCHAにて設定後、Invisible reCAPTCHAでContact Form 7に適用

くろーむ

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

あいうえおLIFE

サイトスピード測定すると、すべてのページにリキャプチャが読み込まれていたという現象でさ。

下記の記事読むと、リキャプチャが全ページに読み込まれ、遅くなることが判明。

Adsenseの遅延読み込みと、使用していないJavaScriptの除去（Cocoonにおける最適化事例）

対策【プログラミング少しやります】

「外観」＞「テーマファイルエディター」＞「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' );

あいうえおLIFE

is_page()){ の数字部分は、固定ページで作成した「お問い合わせ」ページのIDを入れてください。

追加する箇所を間違えないこと

上記実行すると、問い合わせページだけにリキャプチャが読み込まれ、サイトスピード改善に。

まとめ | コンテンツSEOが本質です

以上、SWELLユーザー向けに「GoogleのPageSpeed Insights」のサイトスピード改善について、解説しました。

ブログで稼ぐには、コンテンツSEOといった「ライティング力や記事作成」が本質ではありますが、ついついこだわってしまう「サイトスピード」は内部SEO対策は沼です。

本記事で、サクッとSEO対策につながるアクションをして、ユーザーファーストのブログ記事をガンガンを作りましょう。

くろーむ

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

【完全版】SWELLサイトスピードUP【WebP・第三者コード対策が必須】

1、当サイトのページスピードインサイト公開

当サーバー環境はエックスサーバー

スコアはモバイルで85点（後半施策で90点超えます）

コアウェブバイタルズのデータ

苦戦しがちな4ヶ所はどこ？

2、画像の扱い方

手順（シーン別で紹介）

3、プラグイン【SWELLと相性OK】

①Imagify（画像圧縮プラグイン）

導入後は「メディア」＞「ライブラリ」内をImagify圧縮

②WebP Converter for Media

4、SWELL高速化設定

効果ある施策【フォント設定】

プラグインに関しての注意

5、第三者コード遅延読み込み

①そらいろログさんのメソッド（高度な設定にコードを入れる）

②テーマ側の設定（SWELL設定の高速化）

6、reCaptcha（キャプチャ）の対策

問い合わせページだけにリキャプチャを読み込む設定

対策【プログラミング少しやります】

まとめ | コンテンツSEOが本質です

サイト内キーワード