【SWELL高速化設定】サイトスピードを100まで上げたSEOに強い最速設定について解説

【SWELL高速化設定】サイトスピードを100まで上げたSEOに強い最速設定について解説
スポンサーリンク

今回は「SWELLのサイト高速化設定」について解説します。この記事は7分で読めます。

>>無料テーマ「COCOON」のサイト高速化設定はコチラ

カケル

有料テーマの「SWELL」に変えたけど、サイトスピードが思ったより上がらなくてお困りの方はいませんか?

サイトスピードが速くなるって噂で聞いていたのに、そんなに変わりませんでした。もう放置でいいかしら?

ページの表示速度」はGoogleが検索結果ランキングの要因の一つであると公表しており、放置しているとSEOに悪影響が出ので放置は厳禁です。

そこで今回は「サイトスピードを39→100まで上げたブログ管理人」が、「SEOに強いサイト高速化設定」について解説します。

SWELL高速化設定前
SWELL高速化設定後

この記事を読めば「SWELLのサイト高速化設定の手順」が分かりますので、ぜひ最後までご覧ください。

この記事はこんな人にオススメ
  1. WELLを初期設定のまま使っている人
  2. SWELLのサイトスピードが上がらなくてお悩みの人
  3. SEO対策でサイトスピードを上げたい
この記事で分かること
  • SWELLのサイト高速化設定の手順について
タップできる目次
スポンサーリンク

【前提】なぜサイトの表示速度を上げる必要があるのか?

【前提】なぜサイトの表示速度を上げる必要があるのか?

なぜサイトの表示速度を上げる必要があるのか?理由は以下の2つです。

ユーザーの利便性に直結するから

ユーザーの利便性に直結するから

Googleは「ユーザーファーストの精神」を掲げており、ユーザーにとって「利便性の高いサイトを上位表示させる方針」をとっています。

サイトの表示速度が遅いほど、ユーザーはページを閲覧できるまでに時間がかかり、ストレスを感じます

クリックしてすぐにページが表示されないと、「戻る」ボタンを押したくなります。

カケル

2018年にGoogleが行った調査によると、ページが表示されるまでの時間1秒から3秒に落ちる直帰率が32%上昇するという結果が出ています

SEOでブログの上位表示を狙うなら必須だから

SEOでブログの上位表示を狙うなら必須だから

Googleは2018年7月に「Speed Update」というアルゴリズムの更新を行い、サイトスピードが検索順位に影響を与える可能性があることを示しました。

仮にまったく同じコンテンツを投稿したサイトがあった場合、ページの表示速度が速いサイトの方が上位表示されます

Googleは公式に以下の発表をしており、ページの表示速度の重要性を説いています。

【関連記事】Google ウェブマスター向け公式ブログ [JA]: ページの読み込み速度をモバイル検索のランキング要素に使用します

カケル

トップブロガー「きぐちさん」の本でも「ページの速度を上げる」ことをオススメしています。

\ ブログを基本から学ぶならこの本がおすすめ /

著:きぐち
¥1,426 (2023/02/01 22:34時点 | Amazon調べ)
スポンサーリンク

【現状把握】自分のサイトスピードは『Page Speed Insights』で調べることが可能

【現状把握】自分のサイトスピードは『Page Speed Insights』で調べることが可能

自分や他人のサイトのスピードを計測するにはGoogleが提供しているPage Speed Insights」というツール(ウェブサイト)を使います。

Page Speed Insights」とはWebサイトPC・スマホでの「表示速度を測定できるツール(ウェブサイト)」のことです。

【「Page Speed Insights」で分かること】

  • 最初のコンテンツ表示にかかるまでの時間
  • メインコンテンツの読み込み時間
  • サイトを遅くしている原因
  • サイトを高速化するために必要な対策
Page Speed Insights」でサイトスピードを計測する手順はコチラ
STEP
「Page Speed Insights」にアクセス→検索窓に調べたいURLを入力し、分析をクリック

計測サイトはこちら>>Page Speed Insightsページスピードインサイト)」

pagespeedinsights
STEP
出てきた結果を確認する
pagespeedinsights

Webサイトを見るときにユーザーが使う端末は30%がPC70%がスマホ(携帯電話)なので、スマホでの表示速度が特に重要です。

カケル

最終的なパフォーマンス「携帯電話」で「90以上(緑色)であればOK。「90未満」であれば早急に改善が必要です。

スポンサーリンク

【解決策①】『SWELL設定』で高速化する方法

『SWELL設定』で高速化する方法

SWELL」には「SWELL設定」という以下4つ高速化設定が最初から備わっていますが、テーマをインストールしただけでは「ONになっていない状態」です。

設定変更後の注意

設定変更後は「キャッシュを削除する」をクリック。(何回押しても問題ありません)

SWELL設定

キャッシュ機能

このブログの設定は以下の通りです。

設定項目このブログの設定項目
動的なCSSをキャッシュする
ヘッダーをキャッシュする
サイドバーをキャッシュする
下部固定メニューをキャッシュする
スマホ開閉メニューをキャッシュする
トップページコンテンツをキャッシュす
内部リンクのブログカードをキャッシュする
外部リンクのブログカードをキャッシュする
ブログカードのキャッシュ期間30日間
SWELL設定

ファイルの読み込み

このブログの設定は以下の通りです。

設定項目このブログの設定項目
SWELLのCSSをインラインで読み込む
コンテンツに合わせて必要なCSSだけを読み込む
フッター付近のCSSを遅延読み込みさせる(空欄)
SWELL設定

遅延読み込み機能

このブログの設定は以下の通りです。

設定項目このブログの設定項目
記事下コンテンツを遅延読み込みさせる
フッターを遅延読み込みさせる
画像等のLazyloadloading="lazy"を使用する
スクリプトを遅延読み込みさせる
遅延読み込み対象にするスクリプトのキーワード
(※1)
twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,

assets.pinterest.com,
show_ads_impl_with_ama_fy2021.js,
gtag/js,
googletagmanager.com/gtag/js,
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,
スクリプトの遅延読み込み機能をオフにするページ(空欄)
遅延させる秒数7秒

(※1)遅延読み込み対象にするスクリプトのキーワード」は公式ページを参考にしてください。
「スクリプトの遅延読み込み」機能の使い方について|SWELL

カケル

自分が入力する「遅延読み込み対象にするスクリプトのキーワード」が分からない方は上記を丸々コピーでもOKです。

ただし、プラグインの動作がおかしくなっていないかなどチェックの上、自己責任でお願いします。

SWELL設定
SWELL設定
SWELL設定

ページ遷移高速化

このブログの設定は以下の通りです。

設定項目このブログの設定項目
高速化の種類Prefetch
Prefetchさせないページのキーワード(空欄)
Pjaxで遷移させないページのURL(空欄)
SWELL設定
設定変更後の注意

設定変更後は「キャッシュを削除する」をクリック。(何回押しても問題ありません)

SWELL設定
スポンサーリンク

【解決策②】『SWELL設定以外』で高速化する設定方法9選

【解決策②】『SWELL設定以外』で高速化する設定方法9選

SWELL設定以外』でサイトを高速化する設定方法以下の9つです。

不要なプラグインを削除する

不要なプラグインを削除する

プラグイン」はとても便利ですが、スマホのアプリのように入れれば入れるだけサイトの動作は重くなり、ページの表示速度は遅くなります

カケル

解決策①の通り「SWELL」には最初から高速化設定が備わっているため、基本的に「高速化系プラグイン」とは相性が悪いと発表されています。

>>【SWELL公式サイト】推奨プラグインと非推奨・不要・注意すべきプラグインについて

「SWELL」で非推奨の高速化系プラグイン
  • Flying Scripts」・・・SWELLに同様の機能あり
  • Autoptimize」・・・過去の報告から、不具合が発生する可能性が高い
  • Async JavasScript・・・過去の報告から、不具合が発生する可能性が高い
その他「SWELL」で非推奨のプラグイン
  • WP super cache」や「W3 Total Cache」や「WP Fastest Cache」などのキャッシュ系プラグイン
  • Table of Contents Plus」や「RTOC」などの目次生成系のプラグイン
  • Lazy Load」などの画像遅延読み込みプラグイン
  • Speech bubble」などのふきだし用プラグイン
  • 「WooCommerce」などのEC系プラグイン
  • Jetpack」などのかなり重いプラグイン
カケル

参考までに「SWELL」を半年以上愛用しているこのサイトのプラグインを紹介します。サイトスピードは常に「95~100」です。

このサイトプラグイン一覧(サイトスピードは95~100
スクロールできます
プラグイン名プラグインの用途
「Advanced Adsアドセンス広告の位置調整
BackWPup」ワードプレスのバックアップ
EWWW Image Optimizer画像圧縮
Pochipp物販紹介
PS Auto SitemapHTMLサイトマップ作成
Redirection301リダイレクト管理
(301リダイレクトとはURL変更時にURL変更をする処理のこと)
SEO SIMPLE PACK「メタディスクリプション」や「メタタグ」の出力
SiteGuard WP PluginワードプレスのログインURL変更
Useful Blocks便利なブロック作成
WebSub投稿・更新したページのURLの自動通知
Wordfence Security」セキュリティ対策
WP Multibyte Patch文字化け対策
WP Revisions Controlリベジョン数制御
(リビジョンとは執筆・編集した記事の復元機能のこと)
XML Sitemap & Google NewsGoogleサイトマップ作成用
カケル

お問い合わせ」はプラグインを使用せずに作成可能です。作成方法はコチラ

>>【関連記事】【初心者におすすめ】Pochipp(ポチップ)の初期設定手順と使い方を解説
>>【関連記事】ワードプレスの管理画面にログイン出来ないときの対処方法10選

『お問い合わせ』はGoogleフォームを使う

『お問い合わせ』はGoogleフォームを使う

ブログの「お問い合わせ」を設置する方法としてプラグインの「ContactForm7」を使っている人は多いと思います。

少しでもサイトスピードを速くしたいのであれば「お問い合わせ」は「Googleフォーム」で作成し、「Contact Form7」は削除しましょう。

「お問い合わせ」を「Contact Form7」を使わずに作成する方法はコチラ

完成形のサンプルはコチラ

STEP
「Googleフォーム」にアクセス→「フォームに移動」をクリック
STEP
右下の「+」マークをクリック
Googleフォーム
STEP
「お問い合わせ」と入力→「記述式」に変更→「質問事項」を入力→「必須」にチェック→必要な質問項目を「+」マークで同じように作成→完成したら右上の「送信」をクリック
STEP
下記のように選択→「コピー」をクリック
Googleフォーム
STEP
ワードプレスの「固定ページ」→「新規追加」→タイトルに「お問い合わせ」を入力→ブロックで「カスタムHTML」を選択
固定ページ
STEP
「Googleフォームでコピーしたコード」を貼付け→「プレビュー」で綺麗に反映されていたらOK→パーマリンクを決めて、右上の「公開」を押せば完成
固定ページ
固定ページ

画像をWebP化する

画像をWebP化する

サイトに「画像」をアップすればするほどサイトは重くなり、表示速度は遅くなります。

旧形式の「JPEG」や「PNG」だと表示が遅くなるので、現在はWebP(ウェッピー)」などの新形式の画像ファイルに変更するのがオススメです。

カケル

ブログにアップしている画像等を「WebP化」する方法はいくつかありますが、このサイトで行っているプラグインを用いた「WebP化」について紹介します。

EWWW Image Optimizer」を用いて画像を「WebP化」する方法はコチラ
STEP
「プラグイン」→「新規追加」→「EWWW Image Optimizer」をインストール→「有効化」
読み飛ばしガイド

プラグインはインストール済みで、「WebP化だけ未設定の人」→ここをタップorクリック

EWWW Image Optimizer
STEP
「設定」→「EWWW Image Optimizer」をクリック
EWWW Image Optimizer
STEP
「サイト高速化」と「今は無料モードのままにする」にチェック→「次」をクリック
EWWW Image Optimizer
STEP
「幅と高さの上限を0」に設定→「設定を保存」をクリック
EWWW Image Optimizer
STEP
「完了」をクリック。
EWWW Image Optimizer
STEP
「設定」 → 「EWWW Image Optimizer」→「Enable Ludicrous Mode」をクリック
EWWW Image Optimizer
STEP
「変換」→「変換リンクを非表示」にチェック→「変更を保存」をクリック
EWWW Image Optimizer
STEP
「基本」→「WebP変換」にチェック→出てきた枠内のコードを全部コピー
EWWW Image Optimizer
EWWW Image Optimizer
カケル

「コード」は誰でも共通なので、以下に同じコードを張り付けておきます。以下コードをコピーして使ってもOKです。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
STEP
「変更を保存」をクリック
EWWW Image Optimizer
STEP
「サーバー」→「サイト管理」→「サイト設定」→「応用設定」→「.htaccess設定」
STEP
「鉛筆マーク」→「.htaccessファイル」の「先頭」にコピーしたコードを貼付け

コードの貼り付け位置は「.htaccessファイル」の「先頭」であることに注意してください。元々書かれているコードなどは絶対に消さないこと。万が一張り付ける位置を間違えると、ブログ全体が壊れる可能性があります。

conohaserver
STEP
「設定」 → 「EWWW Image Optimizer」→「PNG」から「WEBP」になっていればOK
EWWW Image Optimizer
STEP
「メディア」→「一括最適化」→「再最適化を強制」にチェック→「最適化されていない画像をスキャンする」をクリック
EWWW Image Optimizer
STEP
「〇〇点の画像を最適化」をクリック→終了するまで待てばOK
EWWW Image Optimizer
カケル

すでにアップロード済みの画像がすべて「WebP化
されます。

STEP
「自分のブログ記事内の画像」を右クリック→「名前を付けて保存」をクリック

ファイルの種類」が「WebP」になっていればOK。「旧ファイル形式のまま」の場合、同じ画像を再度アップすればOK。

画像保存
カケル

今後アップする画像等はすべて自動で「WebP化」されます。

設定完了後、「サイト内の画像が表示されなくなった」という方は、以下の手順を実行すればOK。

STEP
「EWWW Image Optimizer」→「設定」→「遅延読み込み」のチェックを外す→「変更を保存」
EWWW Image Optimizer

PHPのバージョンを最新のものにする

PHPのバージョンを最新のものにする

PHP」とは「Hypertext Preprocessor」の略語で、サーバー側で動くプログラミング言語です。

PHP」が最新バージョンになっていないと、サイト全体の表示速度が遅くなります。

しかし「デメリット」として、たまに「サイトが正しく表示されない」、「一部のプラグインが動作しない」ことがあります。

カケル

不具合が起きた場合はPHPを「元のバージョン」か「最新のひとつ前のバージョン」にしましょう。

ConoHaサーバー」での「PHPバージョン」確認・設定方法はコチラ

「サイト管理」→「サイト設定」→「応用設定」→「PHP設定」→「鉛筆マーク」→「最新バージョンを選択」→「保存」をクリック。

conohaserver

>>Xserverでの「PHPバージョン」確認・設定方法はコチラ
>>ロリポップ!での「PHPバージョン」確認・設定方法はコチラ

フォント設定を見直す

フォント設定を見直す

Web上で使用される文字」には多くの種類がありますが、種類によってサイトの表示速度に影響を与えることは知っていますか?

游(ゆう)ゴシック」は「macOS」や「Windows 8以降のWindows」に標準搭載されているフォントで、ページの読み込み速度が一番早いと言われています。

カケル

「游(ゆう)ゴシック以外」を使用している人はできる限り「游(ゆうゴシック」に変更しましょう。

「SWELL」で「文字フォント」を変更する方法はコチラ

「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」→「フォント設定」→「游ゴシック」を選択

wordpress
「COCOON」で「文字フォント」を変更する方法はコチラ

COCOON設定」→「全体」→「フォント」→「游ゴシック」を選択→「変更を保存」をクリック

COCOON高速化設定
COCOON高速化設定

>>【関連記事】【COCOON高速化設定】サイトスピードを94まで上げたSEOに強い最速設定6選について解説

ファーストビューに多くの要素を表示しない

ファーストビューに多くの要素を表示しない

表示される情報(読み込む情報)」が多くなればなるほど、サイトの表示速度は遅くなります。

サイトや記事内に「容量の大きい画像」や「動画」を置くのはなるべく避けるべきです。

カケル

外部から情報を取る「Twitter、instagram」、「アドセンス広告」もサイトトップに置くのはなるべく避けるべきです。

サーバーを高速なものにする

サーバーを高速なものにする

サイトの根幹である「サーバー」が貧弱だと、サイト高速化の設定をしても速度は上がりにくいです。

国内最速の「ConoHa WING」か、「エックスサーバー」を使用していれば特に問題ありません。

\ 国内最速のレンタルサーバー (月額687円から)/

公式サイトはコチラ

有料テーマにする

有料テーマにする

このブログのテーマである「SWELL」を含め、「有料テーマ」は無料テーマの「COCOON」よりサイトスピードは速いです。

私自身の経験ですが、「COCOON」のときはサイトスピードは「60ぐらい」でしたが、「SWELL」に変えてからのサイトスピードの平均は「95~100」です。

\ サイトスピードが速くなります /

>>【関連記事】【ブロガー必見】ブログを書くときにおすすめのアイテム・ツール25選を紹介

外部サイトをブログカードで表示しない

外部サイトをブログカードで表示しない

外部サイトを表示するとき、「ブログカード」と「テキストリンク」の2種類の方法があります。

リンク先の「アイキャッチ(サムネイル)画像」や「サイト名」、「メタディスクリプション(記事下の説明文)など」を取得しにいくため、表示速度が遅くなります。

カケル

外部サイトのリンクは基本的にすべて「テキストリンク」を使いましょう。

【ブログカードの例】(例ではこのサイト内のリンクを使用)

【テキストリンクの例】(例ではこのサイト内のリンクを使用)

スポンサーリンク

『SWELLのサイト高速化設定』によくある質問まとめ

よくある質問まとめ

サイト高速化設定」に関する「よくある質問」をまとめました。

サイトの高速化はやるべきですか?

高速化設定はやるべきです。Googleが示すSEO指標にも「モバイルフレンドリーにする」という表示の最適化に関するものが入っています。

「携帯電話」だけ速度が遅いのですが、放置でもいいですか?

放置は厳禁です。現在はスマホの普及により、Webページの70%は「スマホ(携帯電話)」で見られています。「携帯電話」のサイトスピードを優先的に意識すべきです。

無料テーマ「COCOON」でもサイトスピード「90」を超えることはできますか?

サイトスピード「90」を超えることはできます。(別サイトのCOCOONで実証済)ここでは「SWELL」に特化して解説しましたが、基本の考え方は同じです。
>>【関連記事】【COCOON高速化設定】サイトスピードを94まで上げたSEOに強い最速設定6選について解説

スポンサーリンク

『SWELL高速化設定』についてのまとめ

『SWELL高速化設定』についてのまとめ

SEOで上位表示を狙うなら「サイトの高速化設定」は必須です。

今回紹介した高速化設定を実践すれば、誰でもサイトスピードは「90台」になりますのですぐにお試しください。

\ サイトスピードが速くなります /

下記記事にはSEO上位表示に必須の内容が書かれているので、ぜひ合わせてご覧ください。

>>【関連記事】【SEO対策】ドメインパワーを上げる被リンク獲得サイト13選を紹介!メリットも解説!
>>【関連記事】【COCOON高速化設定】サイトスピードを94まで上げたSEOに強い最速設定6選について解説

カケル

ブログ初心者さん向けの記事下記にまとめましたので、参考にどうぞ!

\ ブログを基本から学ぶならこの本がおすすめ /

著:きぐち
¥1,426 (2023/02/01 22:34時点 | Amazon調べ)

コメント

コメントする

CAPTCHA


タップできる目次