swellを高速化させる方法を紹介します!【モバイル99】

swellを高速化させる7つの設定方法を紹介!【モバイル99です】

takato(@n8takato)です!

swellを高速化させたい。

この記事は上記の課題に向けて作成しています。

swellは比較的高速なテーマですが、より高速化することが出来ます。

ちなみにこのサイトはモバイル99まで読み込み速度を高められました。
(※画像あり)

この記事ではswellを高速化して読み込み速度を早める方法を紹介します。

この記事を読むメリット

  • swellを高速化する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人

このサイトの読み込み速度はこちら

このブログのPCの読み込み速度 100
当ブログの読み込み速度 PC
このブログのスマホの読み込み速度 99
当ブログの読み込み速度 スマホ
目次

swellを高速化する7つの設定

swellを高速化する7つの設定内容を説明します。
swellを高速化する7つの設定

swellを高速化させるための7つの設定を紹介します。

swellを高速化させる7つの設定

  1. テーマで高速設定
  2. サーバーの見直し
  3. 画像のサイズを修正
  4. 広告の表示量の見直し
  5. 不要なプラグインの削除
  6. 画像圧縮プラグインの導入
  7. 画像の拡張子をwebpに設定

テーマで高速設定

swellはテーマ自体に高速化する機能が備わっています。

テーマの高速化設定はWordPress管理画面の「swell設定」→「高速化」から行うことが出来ます。

WordPress管理画面の「swell設定」→「高速化」で高速化設定を行えます。
swell 高速化設定

swellで出来る高速化設定は下記の通りです。

swellで出来る高速化設定

  1. キャッシュ機能
  2. 遅延読み込み機能
  3. ファイルの読み込み
  4. ページ遷移高速化

①キャッシュ機能

キャッシュとは閲覧履歴のようなものです。

キャッシュを残すように設定すると次回以降の読み込み速度が向上します。

キャッシュを残すために、全ての項目にチェックを入れましょう。

また「ブログカードのキャッシュ期間」は30日のままで大丈夫です。

swellを高速化させるためにキャッシュを残すように設定します。
swell高速化 キャッシュ機能

②遅延読み込み機能

遅延読み込み機能は、指定した部分の読み込みを後回しにする機能です。

読み込みを後回しにすることでページの表示完了までの時間が短縮されます。

遅延読み込みの設定は「キャッシュ機能」の下で行うことが出来ます。

swellの遅延読み込み機能は「キャッシュ」の下にあります。
遅延読み込み機能

・まず下記2つにチェックを入れます。

  • 記事下コンテンツを遅延読み込みさせる
  • フッターを遅延読み込みさせる

記事下コンテンツやフッターは読者に見られるまでに時間があるので、このあたりは遅延して良いと思います。

「記事下コンテンツを遅延読み込みさせる」と「フッターを遅延読み込みさせる」の2つにチェックを入れる。
swell 遅延読み込み

・「画像等のLazyload」は下記部分にチェックを入れます。

  • 「loading=”lazy”を使用する」

・「スクリプトの遅延読み込み」は下記部分にチェックを入れます。

  • スクリプトを遅延読み込みさせる

下記画像と同じ部分にチェックが入っていれば大丈夫です。

swellの読み込み遅延機能の設定内容。
swell高速化 読み込み遅延

・「遅延読み込み対象にするスクリプトのキーワード」には、アドセンスやTwitterの遅延読み込みさせたいスクリプトのキーワードを入力します。

僕が記入しているスクリプトは下記の通りです。

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,

Twitter・Instagram・アドセンスの表示を遅延させることで読み込み速度を早めることが出来ます。

・「スクリプトの遅延読み込み機能をオフにするページ」は、読み込みを遅延させたくないページがある場合のみそのページを入力してください。

特に無い場合は空白で大丈夫です。

・「遅延させる秒数」は遅延させる秒数の設定が出来ます。遅延させたい秒数を設定してください。(僕は7秒にしています)

下記の画像のようになっていれば大丈夫です。

swellの読み込み遅延を設定して高速化させます。
swell高速化 読み込み遅延

③ファイルの読み込み

ファイルをどのように読み込むかを設定することが出来ます。

下記の項目にチェックを入れましょう。

  • SWELLのCSSをインラインで読み込む
  • コンテンツに合わせて必要なCSSだけを読み込む【β機能】
swellの高速化設定でファイルの読み込みの設定を行います。
swell高速化 ファイルの読み込み

④ページ遷移高速化

他のページに移動する際の速さを設定することが出来ます。

・「高速化の種類」で下記の項目にチェックを入れます。

  • Prefetch

・「Prefetchさせないページのキーワード」は、特になければ空白のままで大丈夫です。

swellでページ遷移を高速化するための設定を行います。
swell高速化 ページ遷移高速化

テーマの高速化設定は以上になります。

サーバーの見直し

サイトの読み込み速度はサーバーの契約先や契約内容によって変更します。

読み込み速度が速いサーバー

エックスサーバーは読み込み速度の速いサーバーになります。

サーバー速度が高いためサイトの読み込み速度も向上します。

画像のサイズを修正

画像はサイズが大きいほど容量も多くなります。

容量の多い画像は重くなり、読み込み速度低下につながります。

画像サイズは必要最小限に修正しましょう。

画像のサイズを修正する方法

画像のサイズ変更は下記のwebツールで無料で行うことが出来ます。

始めに「画像のサイズ変更」を選択します。

iloveimgで画像のサイズを変更する方法を説明。
iloveimg 画像のサイズ変更

続いて「画像を選択」をクリックし画像を選択します。

画像サイズを変更する方法を説明。
画像の選択

右側の「サイズ変更オプション」で画像サイズを変更します。

こちらで画像のサイズを変更します。
画像のサイズを変更する

最後にサイズを変更した画像をダウンロードします。

サイズを変更した画像をダウンロードします。
サイズを変更した画像をダウンロード

以上が画像のサイズを変更する手順です。

広告の表示量の見直し

サイト内に多くの広告を貼ると読み込み速度が低下してしまいます。

そのため効率的な広告の設置が重要になります。

広告を配置する上で重要な内容は下記の2つです。

  1. 見られやすい場所に広告を配置する
  2. 読者に不快感を与えない量を意識すること

①見られやすい場所に広告を配置する

広告は見られる可能性の高い場所に配置することが大切です。

おすすめの配置場所は下記の2つです。

  • 目次の下
  • 記事の中

広告の配置場所は上記2ヶ所にしましょう。

②読者に不快感を与えない量を意識すること

読者に不快感を与えないように意識することも大切です。

下記のような広告は読者に非快感を与えやすくなります。

  • ページ遷移するたびに広告が表示される
  • ページのtopに広告が大きく表示されている
  • 記事内広告が多い

広告の量は気持ち少なめくらいが丁度良いです。

swellにアドセンスを表示させる方法について別の記事で説明しています。

気になる方はこちらの記事も読んでみてください。

あわせて読みたい
swellでGoogleアドセンスを表示させる設定方法を紹介! swellでアドセンス広告を表示させる方法を知りたい この記事では上記の課題を解決します。 Googleアドセンスの審査に通過したら広告を設置しますよね。しかしテーマをsw...

不要なプラグインの削除

プラグインは便利ですがサイトを重くするデメリットがあります。

そのため使用するプラグインを厳選し不要なものは削除しましょう。

swellに必要なプラグイン

僕が個人的に思うswellに必要なプラグインは下記の6つです。

  1. WPS Hide Login
  2. PS Auto Sitemap
  3. SEO SIMPLE PACK
  4. Wordfence Security
  5. Google XML Sitemaps
  6. EWWW Image Optimizer

逆に上記以外のプラグインは基本的には不要と考えて大丈夫です。

各プラグインの詳細については別の記事で説明しています。

あわせて読みたい
swellにおすすめなプラグインを6つ紹介!【必要最小限です】 swellのおすすめなプラグインを知りたい この記事では上記の課題を解決します。 swellのテーマを導入した方は、テーマに合うプラグインを知りたいですよね。 swellには...

画像圧縮プラグインの導入

画像を圧縮するプラグインを導入することでサイトの高速化に繋がります。

圧縮におすすめなプラグインは下記のものです。

  • EWWW Image Optimizer

EWWW Image Optimizer」のメリット

このプラグインの良いところはWordPressにアップロードされている全ての画像を自動で圧縮してくれるところです。

作業内容はプラグインのインストール&有効化するだけです。

EWWW Image Optimizer」のインストール方法

WordPress管理画面から「プラグイン」→「新規追加」を選択します。

検索ボックスに「EWWW Image Optimizer」と入力しインストールします。

インストールが完了したら有効化してください。

WordPress管理画面の「プラグイン」→「新規追加」を選択し、検索ボックスに「EWWW Image Optimizer」を入力します。
プラグインをインストールし有効化したら完了です。
「EWWW Image Optimizer」のインストール

画像の拡張子をwebpに設定

画像の拡張子をwebpに変更することでさらに容量を減らすことが出来ます。

拡張子webpとは

画像には「JPG」や「PNG」などの拡張子があります。「webp」も拡張子の1つです。

拡張子webpは他の拡張子と比べて画像の容量が少ないのが特徴です。

画像の拡張子をwebpに変換することでさらにサイトが高速化されます。

拡張子をwebpに変換する方法

画像の拡張子をwebpに変換する方法は他の記事でまとめています。

TAKATO BLOG
WordPressで画像の拡張子をwebpに変換する方法を紹介! WordPressにアップロードされている画像の拡張子をwebpに変換する方法を紹介します!webpに変換するには「EWWW Image Optimizer」というプラグインを使用します。

swellを高速化させる設定は以上です。

サイトを高速化するメリット

サイトを高速化するメリットを説明します。
サイトを高速化するメリット

続いてサイトを高速化するメリットを説明します。

サイトを高速化させるメリットは主に2つあります。

  1. SEO対策になる
  2. 読者の離反を回避出来る

SEO対策になる

Googleのアルゴリズムはサイトの読み込み速度を重視しています。

読み込み速度が速いサイトほど良いサイトと認識されます。

サイトの高速化設定を行うことで上位表示されやすくなります。

読者の離反を回避出来る

サイトの読み込み速度が速いと読者の離反を阻止出来る可能性が高まります。

結果的にサイト内の巡回率が高まります。

サイトの巡回率はSEOにも影響する?

サイトの巡回率が高いとSEOにも良い影響があると考えられます。

サイト内の巡回率が高いほど読者のためになる記事が多くと判断され、結果的にSEOが向上するという理屈です。

この点はGoogleは明らかにしていないので憶測ですが、僕は関係あると考えています。

swellは簡単に高速化出来る

swellは簡単に高速化することが出来ます。
swellは簡単に高速化出来る

最後にまとめです。

下記はこの記事で紹介したswell高速化の内容です。

  1. テーマで高速設定
  2. サーバーの見直し
  3. 画像のサイズを修正
  4. 広告の表示量の見直し
  5. 不要なプラグインの削除
  6. 画像圧縮プラグインの導入
  7. 画像の拡張子をwebpに設定

上記の設定をすることでサイトの読み込み速度が格段と高まります。

冒頭でも見せましたがこのサイトの読み込み速度はこちらです。

このブログのPCの読み込み速度 100
当ブログの読み込み速度 PC
このブログのスマホの読み込み速度 99
当ブログの読み込み速度 スマホ

高速化の設定を行うことでここまで読み込み速度が向上します。

読み込み速度を向上させたい方は是非行ってみてください。

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