カテゴリメニュー
SWELLテーマを本気レビューしました記事を読む

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

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

読者の悩み

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

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

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

あいうえおLIFE

こんにちは!あいうえおLIFE(@pledge17uchs

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

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

関連情報
STEP
計測したいサイトのURLを入力
画像①
計測したいサイトのURLを入力
STEP
モバイルとパソコンの計測データを確認
モバイルとパソコンの計測データを確認
モバイルとパソコンの計測データを確認

先日、下記のツイートをしました。

本記事のタイトルを見て、「サイトスピードの改善ってことは『AutoptimizeとかWP fastest chash』なんじゃないの〜?」と思われたかも。

とはいえ、SWELLユーザーはご存知のとおり、下記プラグインは推奨されていません。

SWELL非推奨プラグイン
  • Autoptimize
  • WP fastest chash

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

あいうえおLIFE

ツイート内容のとおりで、プラグインでは『ImagifyとWEBpコンバータ』を使用して、「画像の扱い方を工夫」

プラスアルファで、SWELLテーマ側の『高速化設定』するのもオススメ。

上記のツイートのとおり、第三者コードの遅延読み込みも効果抜群ですので、本記事で解説します。

気になる項目へクリックしてジャンプできます

くろーむ

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

あいうえおLIFE

モバイル評価95点スコアのぼくが網羅したから、ぜひ実施してみてくださいね。

難しいところは、手を止めて作業してみてください。

目次(もくじ)

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

当サイトのページスピードインサイト公開
Business vector created by rawpixel.com - www.freepik.com

サイトスピードは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アクセラレータ
  • サーバーキャッシュ設定
  • ブラウザキャッシュ設定

公式エックスサーバー

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

あいうえおLIFE

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

くろーむ

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

あいうえおLIFE

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

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

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

コアウェブバイタル項目画像
コアウェブバイタル項目

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

上記の関連記事に、コアウェブバイタルズについて書いた箇所があります。

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

苦戦しがちな3ヶ所
苦戦しがちな4ヶ所

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

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

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

2、画像の扱い方

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

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

ポイント

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

手順(シーン別で紹介)

STEP
フリー素材サイトなどからjpeg(jpg)でダウンロード
STEP
ZIPファイルなど圧縮ファイルは解凍して、jpg画像データを下記サイトへ
STEP
iLoveIMGで画像のサイズ変更を行う

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

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

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

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

STEP
jpegデータをTinyJPGへ(パンダのビジュアルがチャーミング)
STEP
圧縮されたjpgデータを解凍する(圧縮ファイルをダウンロード)

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

あいうえおLIFE

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

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

くろーむ

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

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

pluginスピードアップ
Business vector created by upklyak - www.freepik.com
  1. Imagify(画像圧縮プラグイン)
  2. WebP Converter for Media(次世代フォーマット変換)

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

①Imagify(画像圧縮プラグイン)

Imagifyのトップ画像
Imagify(画像圧縮プラグイン)

DeepLにて英語→日本語訳

ワンクリックで画像を最適化:画質を落とさずに画像を圧縮し、WebPを変換してウェブサイトを高速化します。

Imagify は、画像を最適化するための最先端のツールです。この力を WordPress で直接使うことができるようになりました。

Imagify を有効にすると、WordPress にアップロードされたサムネイルを含むすべての画像が自動的に最適化されます。Imagify は画像を圧縮するだけでなく、WebP 画像の変換にも使用でき、ウェブサイトのサイズを縮小して高速化することができます。

Imagify公式ページ

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

imagify画像1
imagifyワンタッチ圧縮

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

残量の画像
Imagify圧縮の残量

WEBブラウザ上でTinyjpg圧縮した画像でもさらに、圧縮できます。

無料版の圧縮の容量は?すぐなくなる?

無料の圧縮上限25MBなので、日頃からWordPressメディア管理画面にアップロードする前に本記事で紹介した「jpgで扱う」「サイズ変更」「圧縮」を実施していれば、数10枚はImagify圧縮可能。

②WebP Converter for Media

WebP Converter for Media
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ブラウザのサービスで変換するのも手です。

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

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

WebP管理画面画像

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

4、SWELL高速化設定

管理画面の「SWELL設定」>「SWELL設定」画像
「SWELL設定」>「SWELL設定」

当サイトの公開

高速化
高速化タブ

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

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

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

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

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

あいうえおLIFE

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

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

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

そらいろログさんのブログ画像
そらいろログさんのブログ
あいうえおLIFE

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

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

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

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

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

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

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

関連記事内容+αで、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(キャプチャ)の対策

リキャプチャ
https://www.google.com/recaptcha/about/

reCAPTCHAとは何?

reCAPTCHAは、摩擦を生じさせることなく、あなたのウェブサイトを不正や悪用から守ります。

reCAPTCHAは、高度なリスク分析エンジンと適応性のあるチャレンジを用いて、悪意のあるソフトウェアがあなたのウェブサイトで不正な活動を行わないようにします。

一方、正規のユーザーはログイン、購入、ページの閲覧、アカウントの作成が可能となり、偽のユーザーはブロックされます。

Google reCAPTCHAサイトより

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

SWELLにreCPATCHA設定する

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

作業環境

  • お問い合わせページ:Contact Form 7(プラグイン)で作成
  • Contact Form 7は追加CSSで、横幅いっぱいや、ボタンのカスタマイズ
  • reCAPTCHA設定:Google reCHAPTCHAにて設定後、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' );
あいうえおLIFE

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

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

functions.phpに追加している画像
functions.phpに追加している画像

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

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

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

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

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

くろーむ

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

あいうえおLIFE

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

  • URLをコピーしました!
もくじ
トップへ
目次(もくじ)
閉じる