ノーコード/ローコードWeb制作⁡が学べる豪華6大特典配布中 CLICK!

サイトスピードを改善!SWELLを高速化した方法【モバイル・PC100になった】

サイトスピードを改善!SWELLを高速化した方法【モバイル・PC100になった】

こんにちは!ゆいです!

今回はサイトスピードを上げる方法をご紹介します。

サイトを上位表示させるためのSEO対策では、サイトスピードがかなり重視されてるとのこと。

ページ表示速度は1秒から3秒になると直帰率が32%増加、6秒になると106%増加、10秒まで遅くなると123%増加。

Googleより
ゆい

サイトスピードがSEO対策にますます重要とされてるみたい。

くま

どうやったらサイトスピードを上げれるの?

ゆい

私もサイトスピードを上げるのにかなり奮闘したよ。
プログラミングの知識があっても大変だった。
でも、プログラミングの難しい知識を知らなくても上げられるよ。

くま

そんな魔法があるなら知りたい!

実は表示速度を改善する前は、当ブログも真っ赤な点数でした・・・(恥)

そんな当ブログも、本記事でご紹介する方法を試してみた結果、サイトスピード100を記録。

大体100を維持できるようになりました(振れ幅はあります)。

当ブログのサイトスピード(PageSpeed Insightsより)

くま

す、すごい・・・

SWELLは速度が速くて有名ですが、テーマをSWELLに変えただけでは当然スピードアップは叶いません。

ゆい

テーマを変えて、なんの対策もしなかったときは、スマホのサイト表示に6秒もかかってた・・・
それでも前のテーマよりは早いんだけど。

ゆい

前のテーマのときはどれだけ重かったんだ・・・
スピードのことは考えないようにしてた。

くま

今は早くなったからいいじゃーん!

ゆい

そうね!
前向きにいこう!

テーマを変える以外に様々な対策が必要になるので、その対策を惜しみなくお伝えします。

この記事はこんな人にオススメ

  • サイトスピードを上げたい人
  • SWELLを使っている人
  • できるだけ簡単にサイトスピードを上げたい人

それでは行ってみましょう!

目次

① テーマをいじる

1. 文字フォントを変える

SWELLのデフォルトの文字フォントは、「Noto Sans JP」。
このフォントはデータ量が多いので、サイトスピードが遅くなります。

「Noto Sans JP」以外のフォントに変えましょう!(好みでOK!)

管理画面から、

「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」(フォント設定)

で変更できます。

ゆい

当ブログは「游ゴシック」にしてるよ

2. 記事スライダーをOFFにする

記事スライダー
記事スライダー(□で囲っている部分)

記事スライダーを使うと、動きがある分処理データ量が増えて、読み込みに時間がかかってしまいます。

代替案

ピックアップバナーを使いましょう!

ゆい

当ブログもピックアップバナーを使っているよ!
動かないけどオシャレで使い勝手よし。

くま

ピックアップバナーなら重くならない!

② サーバーをいじる

プログラミングの知識が不足した状態でサーバーをいじるとサイトに不具合が生じる可能性があるので、ここでは最低限のことをお伝えします。

ゆい

「.htaccess編集」を下手にいじると管理画面に入れなくなったり、ページが表示されなくなることもあるよ。

1. 速度が速いサーバーに変更する

エックスサーバーやコノハウィングなど様々なサーバーがありますが、中でもmixhostがオススメです。

ゆい

後ほど紹介するキャッシュ系プラグイン「LiteSpeed Cache」が
超優秀なんです!

くま

mixhostは速度も速くて、価格が安め!
エックスサーバーと比べても遜色なし!

ゆい

固定費は極力下げるべし!

くま

サブスクは月500円でも侮ってはいけないね。
年間で6,000円だもんね。

\mixhostを見てみる/
月額968円からの高性能クラウド型レンタルサーバー

2. ブラウザキャッシュをする

ブラウザキャッシュとは

アクセスしたサイトのデータをブラウザに一時的に保存し、再度アクセスした時、そのデータを読み込むこと

くま

1から読み込まなくてもいいから、速くなるんだね!

ゆい

そのとーり!

これをするには、サーバーから「.htaccess編集」をいじる必要があります。

当ブログではやってもやらなくても結果は変わらなかったのでやり方は割愛。

くま

変わらんのかーい!

ゆい

スピード改善しなかったときの最後の手段よ!
するなら必ず、必ずバックアップを取っておいてね!!

くま

サイトが表示されなくなるとか、壊れるとか、泣く・・・

ゆい

泣かないためにも、バックアップは超重要!!

③ プラグインを見直す

プラグインは、入れれば入れるほどサイトが重くなってしまいます。
プラグインの最適化を図りましょう!

くま

プラグインミニマリストになろう!

ゆい

プラグインの中にはサイトを軽くしてくれるものもあるから、それは入れていこうね!

ゆい

SWELLは優秀で、プラグインで追加される機能はSWELLの標準機能として大体備わってるよ。
だから、下記のようなプラグインは入れなくてOK!

不要なプラグイン
  • 「Table of Contents Plus」などの目次生成プラグイン
  • 「Lazy Load」などの画像遅延読み込みプラグイン。(Jetpack内のlazyload機能も不要)
  • 「Speech bubble」などのふきだしプラグイン
  • 「WordPress Popular Posts」など人気記事リスト作成プラグイン
  • 「Classic Editor」を含むエディターカスタマイズ系プラグイン
  • 「All in One SEO」などのSEO対策系プラグイン(代わりに「SEO SIMPLE PACK」を使用。シンプルで軽い)

(「SWELLで非推奨・不必要なプラグインと、推奨プラグインについて」(公式HP)より)

くま

これらは削除でOK!

ゆい

なくても問題ないよ。
思い切って断捨離しよう!

1. LiteSpeed Cache

「LiteSpeed Cache」は、キャッシュプラグインです。

こちらを入れて、設定するだけでかなりサイトが速くなります。

こちらのプラグインはmixhostなど限られたサーバーでしか使えません。(エックスサーバーは不可)

\mixhostを見てみる/
月額968円からの高性能クラウド型レンタルサーバー

ゆい

SWELL自体の高速化機能を使うよりも圧倒的に速かった!

くま

このプラグインを使うなら、SWELLの高速化機能はOFFにしないとね。

ゆい

そう!機能が被ってしまうと不具合が起こる可能性があるから、どっちかをOFFにしないといけないんだよね。

管理画面の「SWELL設定」→「高速化」ページは機能を全てOFFにする

このプラグインには、キャッシュを最適化するだけではなく、下記の機能も備わっています。

  • CSSファイル圧縮
  • Javascript圧縮
  • 画像圧縮
ゆい

画像圧縮は次の「EWWW Image Optimizer」のほうが優秀だから使わなくてOKだよ!
設定はオフにしてね。

2. EWWW Image Optimizer

EWWW Image Optimizerとは、画像圧縮プラグインです。

SWELL公式サイトでは非推奨とされていますが、当ブログでは不具合やエラーは発生していません。

ゆい

画像圧縮プラグインは「EWWW Image Optimizer」で決まり!

管理画面の「メディア」→「一括最適化」で画像を全て最適化してしまいましょう!

画像をメディアにアップする前に、「Tiny PNG」というサイトで画像を圧縮するとよりサイトが軽くなりますよ!

くま

パンダはライバル・・・

ゆい

くまも可愛いよ!

3. WP-Optimize

WP-Optimizeとは、データベースをメンテナンスするプラグインです。

が、このプラグインには

  • CSSファイル圧縮
  • Javascript圧縮
  • 画像圧縮

などの機能もあります。

私は「WP-Optimize」の「データベース」項目のみ使用しています。

  • 「画像」項目
  • 「キャッシュ」項目
  • 「Minify」項目

は「LiteSpeed Cache」「EWWW Image Optimizer」と機能が被ってしまうので使わない。

ゆい

・キャッシュ系やファイル圧縮系は「LiteSpeed Cache」
・画像圧縮系は「EWWW Image Optimizer」

が最も優秀だからこっちを使ってる!

おまけ(いらないプラグイン)

1. Lazy Load

「Lazy Load」は画像遅延読み込みプラグインです。

当ブログでは、「Lazy Load」を入れることで、一部のCSSとJavaScriptを読み込まなくなってしまいました。。

ゆい

恐れていた、サイトの表示崩れが起こってしまった・・・!
ショック。

くま

サヨナラすると、すぐに復活!

2. Autoptimize

「Autoptimize」はソースコードを圧縮するプラグインです。

SWELLではもともとコードを圧縮したりできるだけファイルをまとめたりと、高度で複雑な機能に合わせて適切な軽量化を行っていますので、このプラグインがしっかり動いたとしてもあまり恩恵はないと思います。

SWELLで非推奨・不必要なプラグインと、推奨プラグインについて(公式HP)

当ブログで入れてみたところ、全くスピードが変わりませんでした。

ゆい

なくても困らないなら入れなくてOK!

3. Async JavaScript

「Async JavaScript」はJavaScriptの読み込みを非同期化するプラグインです。

JavaScriptを読み込むには時間がかかるため、こちらを使うことで読み込みを遅らせることができます。

くま

でも、「LiteSpeed Cache」と機能が被るからいらなさそうだね。

ゆい

うん!使わなくてOK!

4. その他キャッシュ系プラグイン

ゆい

なんでいらないのか、
もう理由は分かるよね?

くま

「LiteSpeed Cache」と機能が被るから!

ゆい

正解!
機能が被るプラグインは入れないようにしようね!

スピードチェックしてみよう!

ゆい

じゃあ、スピードチェックをしてみよう!

くま

ドキドキ、ソワソワ

\PageSpeed Insightsで表示速度を確認してみる/
PageSpeed Insightsでチェック

ゆい

あなたのサイトが速くなってたら嬉しいです!

まとめ

いかがだったでしょうか?
今回はサイトスピードを早くする方法をお伝えしました。

  1. 文字フォントを変える
  2. 記事スライダーをOFFにする

今回ご紹介した方法を試してみることで、

  • PC表示速度:100
  • モバイル表示速度:100

も夢ではありません!

くま

サイトスピードが上がることで、読者満足度も上げられるよ!

ゆい

ひと手間かかるけど、その価値は充分あり!
ぜひやってみてね!!

ビジネスや副業・起業に関するご相談を承ります

1. 60分単発コンサル

事業相談、サイト制作方法、集客など、どんなご相談でもOKです。
60分間の個人セッションの中で、あなたの目的やお悩みごとに今やるべきことや解決につながる行動を一緒に導き出します。
困ったときや行き詰まったときなどにお気軽にご利用ください。

60分単発コンサルの詳細はこちら

2. ノーコード / ローコードWeb制作 完全マスターコーチング

WebデザイナーとしてWeb制作で副業・起業したい方に向けての個別コーチングです。
ご案内は公式LINEで行なっています。
【公式LINE登録者限定】今なら有料級6大プレゼントを配布中。

  • 「案件が獲得できるようになるためのスキルを身につける、超具体的な学習ロードマップ」
  • 「6つのサイト制作ツールのメリット・デメリットをわかりやすく比較したスライド」
  • 59枚の「Web制作に必須の画像素材サイトの紹介スライド」
  • 42枚の「知らないとヤバい!ビジネスマナー35選のスライド」
  • 学習に挫折しないための助けになる!「自分振り返りワークシート」
  • 無料個別相談

LINEお友達追加はこちら

3. ホームページ制作・リニューアル

訴求力が高いホームページを制作し、売上アップや採用効果アップ、ブランド力の向上など事業の活性化に繋げます。

アクセス解析などの数値やデータなどの分析に加え、女性ならではの感性と直感力を活かしたご提案や、女性向けデザインが得意です。

サイトスピードを改善!SWELLを高速化した方法【モバイル・PC100になった】

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WEBクリエイターand心と教育の専門家。
がんばるママさんを応援したい!
夫と2人暮らし。
トトロ、犬猫、自然が好き。

コメント

コメントする

CAPTCHA


目次