「もっと楽に、もっと速く」そう思って SWELLテーマに乗り換えたのに、いまいち速度が出ない…。
そんな悩みを抱えているみなさん、ぼくも同じ経験をしました。
ろにぃ
SNSすらロクに触ったことない状態からサイト作成を始めてみたけど、
WordPress1日で挫折
⇒1ヶ月かけてWixサイト1つ完成
⇒3ヶ月間PV数0~2件/1日
エラー多発でクレーム連発の超初心者から↓
- サイト制作歴10年以上
- 情報発信を機に大企業へ転職
- 月収100万越えサイトを作成、運営
- 運営サイトRonilogにて、初心者向けに世界一やさしくわかりやすくWeb制作、SEO、ライティングについて発信
- 3日で100記事ブログを生産した経験を元に、noteでは【初心者がAIを使って15分で1記事完成させる】をテーマにAIブログ作成術を発信
今日は、SWELLテーマを使って本当の意味でサイトを「爆速」にする方法をお伝えします。実際にぼくもこのサイトで行っている設定を全てお見せしたいと思います。
実は、ちょっとしたコツを押さえるだけで、驚くほどサイトが軽くなるんです。
さあ、一緒にSWELLテーマの真の力を引き出しましょう！
SWELLとは？
SWELLって聞いたことありますか？ WordPressのテーマの中でも、特に「快適さ」にこだわって作られたテーマなんです。
でも、ただインストールしただけじゃ、その真価は発揮できません。ちょっと面倒くさがり屋のぼくが、試行錯誤の末に見つけた「本当に速くする方法」をこれからお教えします。
なぜ高速化が重要なのか
別にうちのサイト、そんなに遅くないし…
そう思っている人もいるかもしれません。でも、実はサイトの表示速度は、想像以上に重要なんです。
例えば、ページの読み込み時間が3秒から5秒に増えただけで、直帰率は90%も増加するんです。
つまり、0.1秒でも速くすることが、ビジネスの成功につながるんですね。
ぼくも最初は「まあ、いいか」と思っていたんですが、本気で高速化に取り組んだら、PVがグンと増えたんです。
これには正直、びっくりしました（笑）
SWELLの高速化のためにやるべきこと
SWELLを高速化するためには以下のことをやっておきましょう！
- プラグインを見直す
- 画像形式を変更する
- デザインの見直し
- フォント設定
- サーバーの見直し
- SWELLの高速化設定
- Google PageSpeed Insightsによるスコア確認
１〜５はサイトとしての基本設定、６がSWELL特有の高速化設定です。
「基本はバッチリ！」という方は６SWELLの高速化設定まで飛ばしてください！
1.プラグインを見直す
ネット上で紹介されているプラグインを片っ端から導入していませんか？果たしてそのプラグイン、本当に必要でしょうか。
プラグインは多くなればなるほど、サイト読み込み時に不可をかけ、表示速度を遅くさせます。一度本当に必要なプラグインかどうか見直し、不要なものがあればすぐに削除してしまいましょう！
またパフォーマンス系プラグインと呼ばれる以下のものはSWELLとの相性がよくありません。
- Flying Scripts
- Autoptimize
- Jetpack
- WP Super Cache
- W3 Total Cache
- Lazy Load
- EWWW Image Optimizer
もし入れてしまっているようであれば削除してしまいましょう。
▶ 【SWELL使い必見】ワードプレスプラグインおすすめ10選
2.画像形式を変更する
サイトに掲載している画像はWebP形式に変更しましょう。以前はJPEGでサイズを適正化することが推奨されていましたが、最近はWebPに変えてしまうことがおすすめです！
今までの画像を全部変換してアップロードしなきゃいけないの？
と心配になりますよね？そんな必要はありません。
変換にはプラグインの Converter for Mediaを使用します。
アップロード済みの画像は全て変換してくれるし、ユーザーのサイト閲覧環境によってWebPが表示されない場合、対応している形式で表示してくれます。
これだけでもサイトの表示速度がグンと上がりますよ！
3.デザインの見直し
ファーストビューはシンプルにしましょう。つい色んな情報を最初に詰め込みたくなるんですよね。
SWELLにはスライダー、SNSシェアボタンなどファーストビューに設定できる機能が多数あり使いたくなる。
しかし、読み込む要素が多いほど表示速度は遅くなります。
できるだけ要素を少なくし、快適にアクセスできるようにしておきましょう！
4.フォント設定
SWELLで「Noto Sans JP」や「明朝体（Noto Serif JP）」を使用した場合、ページの読み込み速度に影響を与える可能性があります。
これらのフォントはGoogleフォントとして提供されるWebフォントであり、ページ表示時にフォントをサーバーからダウンロードする必要があるため、読み込み速度が遅くなることがあるんです。
ページの表示速度を重視する場合は、Webフォントの使用を控え、システムにインストールされているフォント（例えば「游ゴシック」や「ヒラギノゴシック」）を使用することが推奨されています！
5.サーバーの見直し
いくらサイトを高速化してもサーバーがしょぼければ話しになりません。サイトの問題ではなく、あなたではどうにもできない問題ですからね。
ちなみにぼくはこれまで７つのサーバーを試してみましたが、おすすめは今実際に使っているエックスサーバー。
これからWordPressを始めるという方にも必ずエックスサーバーをおすすめしています。もし、今お使いのサーバーをなんとなくで決めてしまったのであれば、一度見直してみてもいいかもしれませんね！
▶ 【10分でできる】WordPressの始め方を初心者向けに徹底解説
6.SWELLの高速化設定
ここまではサイトとしてのベースお話。ここからSWELLの高速化設定について説明します。
やるべきことは以下の４つ、
- キャッシュ機能の設定
- ファイル読み込みの設定
- 遅延読み込みの設定
- ページ遷移高速化の設定
各自設定はWordPress編集メニューの「SWELL設定」⇒「高速化」から行います。
キャッシュ機能の設定
| 設定項目 | Ronilogの設定 |
|---|---|
| 動的なCSSをキャッシュする | |
| ヘッダーをキャッシュする | |
| サイドバーをキャッシュする | |
| 下部固定メニューをキャッシュする | |
| スマホ開閉メニューをキャッシュする | |
| トップページコンテンツをキャッシュする | |
| 内部リンクのブログカードをキャッシュする | |
| 外部リンクのブログカードをキャッシュする | |
| ブログカードのキャッシュ期間 | 30日 |
キャッシュ機能は全部チェック入れてあります。
ファイル読み込みの設定
| 設定項目 | Ronilogの設定 |
|---|---|
| SWELLのCSSをインラインで読み込む | |
| コンテンツに合わせて必要なCSSだけを読み込む | |
| フッター付近のCSSを遅延読み込みさせる | ー |
「フッター付近のCSSを遅延読み込みさせる」は「SWELLのCSSをインラインで読み込む」がオンの時は効果がないためチェックなし。
遅延読み込みの設定
| 設定項目 | Ronilog設定 |
|---|---|
| 記事下コンテンツを遅延読み込みさせる | |
| フッターを遅延読み込みさせる | |
| 画像等のLazyload | loading=”lazy”を使用する |
| スクリプトを遅延読み込みさせる | |
| 遅延読み込み対象にするスクリプトのキーワード | twitter.com/widgets.js, googletagmanager.com/gtm.js, |
| スクリプトの遅延読み込み機能をオフにするページ | ー |
| 遅延させる秒数 | 5秒 |
「遅延読み込み対象にするスクリプトのキーワード」はTwitter、Googleタグマネージャーを設定しています。
ページ遷移高速化の設定
| 設定項目 | Roniog設定 |
|---|---|
| 高速化の種類 | Prefetch |
| Prefetchさせないページのキーワード | ー |
| Pjaxで遷移させないページのURL | ー |
これら設定により、サイトの速度は大幅に向上します。特に注目すべき点は、
- 画像と動画の遅延読み込みにより、初期表示が驚くほど速くなる
- キャッシュ機能により、2回目以降のページ表示が格段に速くなる
ちなみに、これらの設定は個々のサイトの特性に応じて微調整が必要です。設定後、実際のパフォーマンスを確認し、必要に応じて調整することをおすすめします！
7.Google PageSpeed Insightsによるスコア確認
Google PageSpeed Insightsを使えば、サイトの表示速度やパフォーマンスを簡単にチェックできます。
サイトの速度は、ユーザー体験とSEOの両方に大きな影響を与えるので、定期的なチェックをしましょう！
具体的な手順は以下の通り。
サイトURLを入力する
分析ボタンをクリックする
モバイル、PCそれぞれのスコア、改善点を確認する
この方法で、あなたのサイトのパフォーマンスを客観的に評価し、具体的な改善点を見つけられます。定期的なチェックと改善を心がけましょう！
SWELL高速化の検証結果
SWELLの高速化設定を行うことで、どんな効果があったのかを紹介します。
高速化前後のパフォーマンス比較
高速化の効果を実感するには、Before/Afterの比較が一番わかりやすいですよね。
ぼくの場合、高速化前後で以下のような変化がありました。
どうですか？バッチリ効果ありですよね！
わずか数秒ポチポチするだけです。まだやっていない人は今すぐやってしまいましょう！
ユーザーエクスペリエンスの向上
数字の改善も嬉しいですが、それ以上に嬉しかったのは、サポートをさせて頂いたユーザーさんからの声です。
サイトが軽くなった！
サイトを開くのが楽しくなった！
こんな感想をいただくようになりました。特に印象的だったのは、
以前はスマホで見るのを諦めていたけど、今は快適に閲覧できる
というお声。ぼくも昔はそんな思いをした経験が何度もあります。
モバイルユーザーの増加は、アクセス数の増加にも直結。高速化前と比べて、モバイルからのPVが激増。これには正直、びっくりしましたね。
まとめ
さて、ここまでSWELLテーマを使ったサイト高速化について、いろいろとお話ししてきました。振り返ってみると、主なポイントは以下の通りですね。
- SWELLテーマの高速化機能を最大限に活用する
- PageSpeed Insightsを使って、具体的な改善点を見つける
- 高速化プラグインとSWELLを上手に併用する
- モバイルサイトの最適化を忘れずに
- SEOとの関連性を意識する
これらのポイントを押さえるだけで、サイトの表示速度は劇的に向上します。ぼくの場合、これらの対策を行った結果、PageSpeed Insightsのスコアが100点を叩き出しました！
ただし、高速化には終わりがありません。技術は日々進化していますし、ユーザーの期待も高まっていきます。
そのため、定期的にサイトの速度をチェックし、新しい技術や手法を取り入れていくことが大切です。
また、高速化を追求するあまり、コンテンツの質を犠牲にしてはいけません。例えば、画像を過度に圧縮して品質を落としてしまうのは本末転倒です。
ぼくも最初は速度ばかりに気を取られて、画像をガビガビに圧縒してしまったことがあります。結果、ユーザーさんから「写真が荒くて見づらい」というクレームをいただいてしまいました…。反省です（汗）
大切なのは、「速さ」と「質」のバランスを取ること。そして何より、読者のためになる良質なコンテンツを提供し続けることです。
SWELLは、そんなバランスの取れたサイト運営をサポートしてくれる強力な味方です。ぜひ、みなさんもSWELLの力を最大限に活用して、読者に愛されるサイトを作っていってください！
それでは今回はここまで。最後までご覧いただきありがとうございました！
その他SWELLの使い方はこちらから
▶ SWELLの使い方完全ガイド：あなたの理想のサイトを実現する万能WordPressテーマ
コメント