【SWELL高速化】SWELLの機能を活用して効率的に高速化！ページスピードの見方も解説

2022年8月13日2024年3月10日

ブログの表示速度を上げたい…
SWELLを使って高速化したいけど最適な設定方法がわからない

上記でお悩みの方に向けた記事です。

SWELLの機能を活用すればあなたも簡単に高速化できるので、ぜひ実践してみてください。

「SWELLの表示速度が気になる…」という方も本記事の内容に沿って設定をすれば十分高速化できるのでぜひお試しください。

SWELLの高速化設定手順

SWELLの高速化設定の手順は下記です。

現状のページスピードを確認する
テーマの高速化設定をする
画像を最適化する（Webp対応）

テーマの高速化機能が充実しているので簡単に設定できます。

まずは上記を試してみましょう。それ以外にも試せそうなものがあれば下記を参考にしてください。

読み込みたくないファイルを制限する
不要なプラグインを削除する
速いサーバーに乗り換える

それぞれ解説していきます。

①現状のページスピードを確認する（計測結果の見方）

まずは高速化の作業を実施する前に、前後の変化を見るためにページスピードの確認から行いましょう。

PageSpeed Insightsにアクセスし、URLを入力して分析ボタンを押すと、データが溜まっているサイトなら次のような画面になります。たくさん数値があって混乱するかもしれませんが、特に重要なものに絞って解説していきます。

PageSpeed Insightsの結果画面

上の段に出ている6つの項目が、過去28日間に収集された実際のユーザー環境で計測されたスコアです。新しいページの場合は「データがありません」と表示されているはずです。

合格になっていればよいのですが、もし不合格になっている場合は改善が必要となっている項目を最優先で改善しましょう。

コアウェブバイタル不合格の例

最上部に表示されるLCPとFIDとCLSが主な指標（コアウェブバイタル）で、これらがオレンジや赤で表示された場合は改善を検討しましょう。

コアウェブバイタル3つ

Largest Contentful Paint (LCP)：最大コンテンツの表示速度
First Input Delay (FID)：ユーザー操作に対する反応速度
Cumulative Layout Shift (CLS) ：ページを表示する時のレイアウトずれ量

2021年6月に検索アルゴリズムがアップデートされ、「ウェブに関する主な指標（コアウェブバイタル）」がランキング指標に取り入れられました。
（公式情報：https://developers.google.com/search/blog/2021/04/more-details-page-experience Google検索セントラル）

下に表示されているパフォーマンスのスコアはシミュレーション値です。（FIDはシミュレーションできないので代わりにTBTが指標とされています）

「スコアが高い≠表示速度が速い」です。100点を取ることにこだわり過ぎないようにしましょう

表示速度について勘違いされがちなんですが、検索順位に影響するのはシミュレーション値のスコア(100点満点のやつ)ではなく、ウェブに関する主な指標(CWV)28日間の実測値の方です
CWV不合格の時にスコアを見ることでざっくりパフォーマンスを把握しながら改善できる、ぐらいの認識です😇#Web制作 #SEO
— せんり (@sedona_senri) May 23, 2022

高速化するのとしないのとではどのくらい変わるのか

高速化実施前：モバイルのスコア16、FCP約5秒
高速化実施後：モバイルのスコア98、FCP1.3秒

上記はアフィリエイトサイトで実施した結果です。

テーマを切り替えただけでは本領を発揮できないので調整する必要があります。

高速化実施後はスコア90以上を狙える

以降、SWELLを活用した高速化の方法を解説します。

②テーマの高速化設定をする

以下にSWELLで高速化対応する際の設定方法を紹介をします。
※設定はあくまでも一例ですので、ご自身のサイトに合った設定を行ってください。

キャッシュ機能

キャッシュ機能や遅延読み込み機能等フル活用しています。

キャッシュとは一度読み込んだものを一時的に保存しておき次回以降の読み込みを速くする技術です。

メニューのSWELL設定＞高速化タブで以下のように設定します。

SWELLのキャッシュ機能活用

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

各部位ごとに設定できるようになっていますが、すべてチェックすることでフル活用できます。

ファイルの読み込み

CSSファイルの読み込み方を調整できます。CSSはWebサイト等の見た目を整えるための言語です。これの読み込みを調整することで、高速化に繋がります。

ファイルの読み込み調整

ここでは以下のように設定しています。

SWELLのCSSをインラインで読み込む
コンテンツに合わせて必要なCSSだけを読み込む

1つ目の「SWELLのCSSをインラインで読み込む」は、SWELL側で用意されているCSSをHTMLに直書き（インライン）することで高速化する機能です。

2つ目の「コンテンツに合わせて必要なCSSだけを読み込む」は、使用されている機能やブロックを読み取って、そのページに不要なCSSをできるだけ読み込まないようにしてくれる機能です。

遅延読み込み機能

遅延読み込み機能を使用することで、記事下コンテンツやフッター、画像、そしてJavaScriptを遅延読み込みさせることができます。

遅延読み込み機能

記事下コンテンツを遅延読み込みさせる
フッターを遅延読み込みさせるウィジェットのページ分岐は効かなくなります。
スクリプト(lazysizes.js)を使って遅延読み込みさせる

上記の設定で記事下のコンテンツ、フッター、そして画像の遅延読み込みが実現できます。

画像の遅延読み込みと言えば「EWWW Image Optimizer」や「Lazy Loader」、「Autoptimize」など様々なプラグインがありますが、SWELL側でできてしまうので、プラグインでの画像遅延読み込み機能と重複しないように気を付けましょう。画像が表示されないなどの不具合防止のためです。

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

スクリプトの遅延読み込みをONにし、遅延読み込みさせたいJavaScriptの文字列を設定します。ここで設定した文字列を含むJavaScriptが検出されたら、そのファイルが遅延読み込み対象となります。

（例）ツイッター埋め込み、インスタグラム埋め込み、URLコピーボタン用のスクリプトを遅延読み込みさせる場合

twitter.com/widgets.js,
instagram.com/embed.js,
clipboard.min.js,
set_urlcopy.min.js,

遅延させる秒数は3秒から5秒程度で設定することが多いです。（ユーザー操作が行われたら読み込まれるという仕様だと思うのですが、ユーザー操作が行われなけばこの設定秒数が経過した時点で強制読み込みが発動するはずです。）

このJavaScriptの遅延読み込みは、高速化において強力な施策となることが多いです。例えば、ツイッターやインスタグラムの投稿を大量に埋め込んでいるページは、埋め込みに使用されるスクリプトを遅延読み込みさせることで表示速度が大きく改善されます。

サイトによっては遅延読み込みしてはいけないJavaScriptもあるので、何のためのスクリプトか？などを理解したうえでの作業が必要です。分からない場合はデフォルトのままでOKです。

遅延読み込み対象とするキーワードの書き方はSWELL公式サイトに詳しく記載されていますので参考にしてみてください。

ページ遷移高速化

ページ遷移高速化の設定はそのページ自体の読み込みを速くするものではなく、そのページから別ページに遷移する際の速度を上げるためのものです。読者さんの快適なページ回遊をサポートするので設定しておくと良いでしょう。

ページ遷移高速化

Pjaxは非推奨なのでPrefetchで有効化しましょう。これによりユーザーが次に訪れるページを事前読み込みすることができます。

③画像を最適化する（Webp対応）

WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます。
PageSpeed Insights

とのことなので、画像を変換しましょう。

プラグインを使用する場合は「Converter for Media（旧 WebP Converter for Media）」がおすすめです。https://ja.wordpress.org/plugins/webp-converter-for-media/

Webアプリで済ませたい方はGoogleが提供する画像圧縮サービス「Squoosh」を利用されると良いかと思います。

また、SWELL公式では非推奨プラグインとなっている「EWWW Image Optimizer」を使用する場合は、遅延読み込み機能が被るのでプラグインの設定で必ず遅延読み込み機能をOFFにしておきましょう。

その他に試せること

読み込みたくないファイルを制限する

投稿ページで不要なファイルを読み込んでいたりするので不要なファイルは読み込まないように制限をかけて最適化しましょう。

プラグインは少ないに越したことはないのですが、利用者の都合などで増えたりするものです。。。

できるだけ表示速度に影響がないように工夫しましょう。

例：プラグイン「ContactForm7」のファイルを問い合わせページのみ読み込む

functions.phpに下記コードを追記すると、お問い合わせ用プラグインContactForm7用のファイルがスラッグ「contact」のページのみで読み込まれるようになります。

//Contact Form 7を問合せページのみに読み込ませる
add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});