【実証】SWELLでPageSpeed Insights100点!初心者向けの高速化設定ガイド

当ページのリンクには広告が含まれています。
【実証】SWELLでPageSpeed Insights100点!初心者向けの高速化設定ガイド

SWELLでPageSpeed Insights100点を達成する秘訣とは、ずばり「SWELLの標準機能をフル活用すること」です。

  • 外部の高速化プラグインは削除し、SWELL標準機能を使う
  • キャッシュとスクリプトの遅延読み込みを正しくONにする
  • 100点に固執せず、スマホ90点以上(緑色)を目指す

「SWELLは速いと聞いたのに、PageSpeed Insightsで計測したらスマホの点数が低かった……」
そんなふうに悩んでいませんか?

実は、SWELLの高速化機能はデフォルトではオフになっています。この記事では、SWELLデフォルト設定が遅い理由から、カッパログで実際にスマホ95点・PC100点を達成した具体的な設定手順までをわかりやすく解説します。

表示崩れを防ぐ注意点も紹介するので、設定を真似するだけで今日からあなたのブログも爆速になりますよ!

目次

なぜSWELLのデフォルト設定ではダメなのか?

なぜSWELLのデフォルト設定ではダメなのか?

SWELLは初期状態では高速化機能がオフになっています。その理由は、環境によっては表示崩れが起きる可能性があるためです。外部の高速化プラグインを重ね着すると、逆にスコアが下がるので注意しましょう。

SWELLは「自分で設定して初めて速くなる」テーマです。デフォルトのままでは、不要なファイルまで読み込んでしまうため、どうしてもスコアが伸び悩みます。環境に合わせて適切な設定をオンにすることで、初めて真価を発揮するのです。

SWELLは標準機能だけで十分速い

SWELLを使うなら、「W3 Total Cache」などの定番プラグインは不要です。なぜなら、SWELLにはすでに優秀なキャッシュ機能が備わっているからです。テーマの機能だけで十分な速度が出せるように設計されています。無理に外部プラグインを入れると、かえって処理が重くなってしまうので気をつけてくださいね。

プラグインの「重ね着」は逆効果

テーマとプラグインの機能が重複すると、サイトは一気に重くなります。これは例えるなら、ダウンジャケットの上にさらにダウンジャケットを着るようなものです。動きにくくなるだけで、良いことはありません。SWELLの高速化機能をオンにしたら、他の最適化プラグインは思い切って停止してみるのがおすすめです。

比較軸SWELL標準機能外部高速化プラグイン
導入の手間設定にチェックを入れるだけ(簡単)インストール・複雑な設定が必要
相性リスクなし(テーマに最適化済み)テーマと機能が競合し不具合の原因に
推奨度強く推奨非推奨
カッパパ

カッパパも最初は「プラグインをたくさん入れれば速くなる!」と勘違いして痛い目を見ました……。足し算ではなく引き算の思考が、高速化の第一歩ですね!

【実証】スマホ95点・PC100点を達成したSWELL高速化設定

【実証】スマホ95点・PC100点を達成したSWELL高速化設定

カッパログで実際に設定している高速化の具体手順を公開します。キャッシュ機能、遅延読み込み、スクリプトの遅延の3つが鍵です。そのまま真似するだけでスコア改善が期待できます。

キャッシュ機能の設定(すべてON)

キャッシュ機能の設定(すべてON)

キャッシュ機能は、基本的にすべてONに設定しましょう。「動的なCSS」から「ブログカード」まで、チェックを入れられる項目はすべて有効化します。これだけで、毎回ページを生成する手間が省けて表示がグッと速くなります。ブログカードのキャッシュ期間は「30日」で設定しておけば問題ありません。

  • 動的なCSSをキャッシュする:ON
  • ヘッダーをキャッシュする:ON
  • サイドバーをキャッシュする:ON
  • 下部固定メニューをキャッシュする:ON
  • スマホ開閉メニューをキャッシュする:ON
  • トップページのコンテンツをキャッシュする:ON
  • ブログカードのキャッシュ期間:30日

ファイルの読み込み

ファイルの読み込み設定では、「SWELLのCSSをインラインで読み込む」をONにします。

ファイルの読み込み

画像とコンテンツの遅延読み込み(Lazyload)

画像とコンテンツの遅延読み込み(Lazyload)

画像やフッターの遅延読み込みも、スコアアップに直結します。「記事下コンテンツ」と「フッター」は遅延読み込みさせましょう。画像等のLazyloadは、「スクリプト(lazysizes.js)を使って遅延読み込みさせる」を選択するのが一番安定します。見えない部分の読み込みを後回しにすることで、最初の画面表示が劇的に速くなりますよ。

  • 記事下コンテンツを遅延読み込みさせる:ON
  • フッターを遅延読み込みさせる:ON
  • 画像等のLazyload:「スクリプト(lazysizes.js)を使って遅延読み込みさせる」を選択

SWELL設定で画像のLazyloadをオンにする場合は、他のプラグインの遅延読み込み機能はオフにしましょう。私は、EWWW Image Optimizerを使っていますが、こちらの遅延読み込みはオフにしています。

スクリプトの遅延読み込み

スクリプトの遅延読み込み

重い外部スクリプトは遅延させましょう。また、TwitterやInstagramの埋め込み、Googleアナリティクス(gtag)などはページを重くする原因です。「スクリプトを遅延読み込みさせる」をオンにし、遅延させる秒数は「5秒」に設定してみてください。

  • SWELLのCSSをインラインで読み込む:ON
  • スクリプトを遅延読み込みさせる:ON
  • 遅延させる秒数:5秒
  • 遅延対象となるスクリプトの例:Twitter、Instagram、Googleアナリティクス(gtag)など

当サイトで遅延読み込みさせているスクリプトは以下の通りです。

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
show_ads_impl_fy2021.js,
adsbygoogle.js,

個人的には、adsbygoogle.jsの遅延がスコアアップにかなり効いたなと感じています。ただし、Googleアドセンスを利用している場合は、広告表示に問題がないかチェックしましょう。

カッパパ

スクリプトの遅延は効果絶大ですが、やりすぎると必要な機能まで動かなくなってしまいます。設定を変えた後は、必ず自分のスマホでも動作をチェックしてくださいね!

ページ遷移高速化は、「使用しない」がいいと思います。

全ての設定が完了したら、設定画面の最下部にある「変更を保存」ボタンを押すのを忘れずに!

設定時の注意点とよくある失敗

高速化設定を行うと、PV計測や広告が表示されなくなることがあります。設定後は必ずシークレットモードで表示崩れがないか確認しましょう。100点満点にこだわりすぎる必要はありません。

PV計測や広告が表示されない場合の対処法

アドセンス広告やPV計測が表示されない場合は、遅延読み込みが原因かもしれません。そんなときは、遅延させる秒数を短くするか、遅延対象からそのスクリプトのキーワードを除外してみましょう。早めに読み込ませることで、正常に表示されるようになります。

スマホ90点以上(緑色)なら合格ライン

PageSpeed Insightsは100点満点を目指さなくても大丈夫です。スマホで90点以上(緑色の判定)が出ていれば、SEO的には十分な評価を得られます。100点に固執するあまり、デザインを崩したり必要な機能を削ったりするのは本末転倒です。読者にとって使いやすいサイトであることが一番大切ですね。

カッパパ

満点を目指すのはゲームみたいで楽しいですが、本来の目的は「読者に快適に記事を読んでもらうこと」です。緑色になれば大成功、と肩の力を抜いていきましょう!

よくある質問(FAQ)

SWELLの高速化について、よく検索される疑問にお答えします。

スクロールできます
QA
SWELLに高速化プラグインは必要ですか?SWELLの標準機能が非常に優秀なため、原則として不要です。
PageSpeed Insightsの目安は何点ですか?モバイルで90点以上(緑色)を目指せば、実用上は十分です。
画像が表示されなくなってしまいました。Lazyloadの設定を見直すか、他のプラグインとの干渉を疑ってみましょう。

まとめ

最後に、SWELLの高速化設定が正しくできたかのチェックリストを用意しました。

  • 外部のキャッシュ・高速化プラグインは無効化できているか
  • キャッシュ機能の各項目をすべてONにできているか
  • 画像等のLazyloadを「lazysizes.js」に設定できているか
  • 外部スクリプトの遅延読み込み(5秒)を設定できているか
  • 設定後にスマホでサイトを開き、表示崩れがないか確認できているか

もし、これらの設定をすべて行ってもスコアが上がらない場合は、お使いのレンタルサーバーの性能が不足しているかもしれません。より高速な環境を求めるなら、Xserverのような最新の高速サーバーへの乗り換えも検討してみてはいかがでしょうか。快適なブログ運営を楽しんでくださいね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次