転妻はりーブログ運営はページ表示速度が大事？
転妻はりー確かになかなか開かないサイトは嫌だけどどうやればいいの？
転妻はりー表示速度が速いからSWELLにしたんだし、勝手に速くなるでしょ！
まさる初期設定のままではページ表示速度は速くなりません！
転妻はりーまた出たわね！
転妻はりーどういうこと？何かしないといけないの？
まさるSWELLでページ表示速度を高速化させるためには次の設定が必要です
転妻はりーなんだか難しそう・・・私にできる？
まさる大丈夫！
まさるたくさんの画像を使って分かりやすく解説していきます！
まさる一緒にやっていけば10分程度でできるので安心してくださいね。
SWELLに変えたらページ表示速度が速くなると思っていませんか？
確かにSWELLに変えるだけでも速くなりますが、適切に設定すれば簡単に「PageSpeed Insights」のスコアは100になります。
ページ表示速度の低下はGoogleが提唱する「快適なユーザー体験」に反してしまうため、SEO評価はマイナスになります。
Google公式「ユーザー エクスペリエンスの管理」
この記事ではSWELLの機能以外の方法も詳しく解説しています。
まさるこれからブログを高速化していきたい人の参考になるので最後まで見てくださいね
まさる
- 専業主夫×Webライター×ブロガー
- 専業主夫として2歳と3歳の息子を育てながら月10万円稼ぐ
- 年間100記事以上執筆する
- 3つのブログを運営中
- 全日本SEO協会SEO検定1級保有
＼ 詳しいプロフィールはこちら ／
【SWELL設定】でやる高速化
【SWELL設定】で行う高速化設定から解説していきます。
まさる高速化設定は下記の順番で開きます
まさる上から順番に設定していきます。
- キャッシュ機能
- 遅延読み込み
- ファイル読み込み
- ページ遷移高速化
キャッシュ機能
1つ目はキャッシュ機能です。
キャッシュ機能とは…
一時的にデータを保存しておくことで、次回はより速くアクセスできるようにする機能のこと。
まさる毎回すべてのデータを取得していると、読み込みに時間がかかってしまいます。
キャッシュ機能を活用して、ページ表示速度を上げましょう。
項目全てにチェックを入れます。
また、ブログカードのキャッシュ期間は30日にしておきましょう。
まさるSWELLなら設定だけで簡単に速度が出るので、高速化プラグインは非推奨です。
ファイル読み込み
2つ目はファイルの読み込みです。
まさるこちらではCSSファイルの読み込みについて設定できます。
CSSとは…
Cascading Style Sheets の略で、ウェブサイトのデザインやレイアウトを指定するための言語。
テキストの色やサイズ、背景のデザイン、ボタンの形状など、サイトの見た目をカスタマイズすることができる。
通常は外部のファイルに書かれているので、サイトで読み込む時間がかかる。
まさるSWELLではCSSをサイトに直接書き込む設定ができるので、読み込みの高速化が狙えます。
SWELLの場合は開発者の了さんのおかげで小さくカスタマイズされているので心配ありません。
設定は次の2つにチェックを入れます。
- SWELLのCSSをインラインで読み込む
- コンテンツに合わせて必要なCSSだけを読み込む
遅延読み込み機能
3つ目は遅延読み込み機能です。
遅延読み込み機能とは…
ページの全てを一度に読み込まずに、ページ下部などのすぐに見られない部分は遅れて読み込ませる機能。
多くの画像や動画をすべて同時に読み込むと、読み込み時間が長くなってしまいます。
まさる遅延読み込み機能を利用すれば、必要な部分だけを読み込むのでページ表示速度が上がりやすいです。
遅延読み込みについては、次の3つの項目ごとに詳しく解説していきます。
- コンテンツの遅延読み込み
- 画像等のLazyload
- スクリプトの遅延読み込み
コンテンツの遅延読み込み
記事下やフッターはいきなり読まれる場所ではないので、次の2つにチェックを入れておきましょう。
- 記事下コンテンツを遅延読み込みさせる
- フッターを遅延読み込みさせる
画像等のLazyload
まさる画像などを遅延読み込みさせることもできます。
「スクリプト(lazysizes.js)を使って遅延読み込みさせる」にチェックを入れておきます。
スクリプトの遅延読み込み
「スクリプトを遅延読み込みさせる」をオンにします。
まさる「遅延読み込み対象にするスクリプトのキーワード」に下記の文字列をコピーして貼り付けましょう。
twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
adsbygoogle.js,
googletagmanager.com/gtag/js,
gtag(, 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,
より複雑なサイト設計をしているなどで、あまり高速化されないなどの不具合があれば、個人で最適化してください。
【SWELL公式】「スクリプトの遅延読み込み」機能の使い方について
最後に遅延秒数は5秒程度にします。
ページ遷移高速化
最後の4つ目がページ遷移高速化です。
まさるページの切り替えが高速になるので、ユーザーの離脱を防ぎやすくなります。
必要なければ「使用しない」でも大丈夫なので、ご自身で判断するようにしてください。
高速化の種類
「Prefetch」にチェックを入れてください。
【SWELL公式】ページ遷移高速化機能（pjax）の使い方と注意点
まさる初心者には必要ないので、選択しないことをおすすめします。
忘れずに「変更を保存する」
最後に「変更を保存する」ボタンを必ず押してください。
まさる僕もよく押し忘れて設定をやり直しています・・・
ここまでの努力を水の泡にしないために確実に押してくださいね！
しつこいですけど「設定を変えたら忘れずに押す！」
「SWELL設定」以外でやる高速化
SWELLについている高速化設定以外にもできることはたくさんあります
まさる次の6つの設定を行いましょう！
- フォントの変更
- 不要なプラグイン削除
- 高速なレンタルサーバーへ変更
- PHPを最新にする
- 画像容量を最適
- 外部サイトへのリンクにブログカードを使用しない
フォントの変更
1つ目は「フォント変更」です。
まさるデフォルトでは「Noto sato jp」になっています。
表示速度が遅くなる原因になるので「游ゴシック」か「メイリオ」に変更しましょう。
まさる個人的には「メイリオ」の質感が好きで「メイリオ」に設定しています。
変更は下記の手順で行います。
不要なプラグインの削除
2つ目は「不要なプラグインの削除」です。
まさるプラグインの入れ過ぎはページ表示速度の低下に繋がります。
SWELLはブログ運営に最適な機能が標準で搭載されているので、最低限のプラグインで大丈夫です。
目安は10個〜15個です。
まさるとはいえ、何も入れないと不便だったりセキュリティ面で不安になったりしますよね？
この記事でSWELLにオススメのプラグインを紹介しているので、気になる人はご覧になってください。
高速なレンタルサーバーへ変更
3つ目はできる限り高速なレンタルサーバーにすることです。
そもそも、サーバーの性能が低く速度が出ないレンタルサーバーだと、どんなに頑張っても速くなりません。
まさるできる限り速度の速いレンタルサーバーに乗り換えましょう。
オススメのレンタルサーバーは次の2つです。
どちらもたくさんのブロガーが使っている大手レンタルサーバーで、速度も安定感も十分です。
まさるちなみにこのブログはConoHa WINGを使っていますよ！
まさる実は別のブログをエックスサーバーで運営していますが、エックスサーバーも安定して速くてオススメです。
PHPを最新にする
4つ目は「PHPを最新にする」です。
PHPとは、ブログやWebサイトが動作するためのプログラム言語で、WordPressもPHPで動いています。
まさるPHPが最新じゃないと最適な動作をしてくれないので、ページ表示速度は落ちてしまいます。
レンタルサーバーのサイトにアクセスして最新のものにバージョンアップしておきましょう。
画像を軽量化する
5つ目は「画像を軽量化する」です。
最近のスマートフォンのカメラ性能は飛躍的に向上しているので、誰でも簡単に高画質で綺麗な写真を撮ることができます。
しかし、写真の画質が上がると、画像の処理にかかる時間も増えてしまうので、撮った写真をそのまま使ってしまうと、ページ表示速度は低下してしまいます。
まさる避けるためには、画像はできる限り軽量化してから使うようにしましょう。
具体的な方法は次のとおりです。
- 画像圧縮サイトで軽量化してから使う
- 画像圧縮プラグインを導入する
画像圧縮サイトは『Tiny PNG』がオススメです。
まさるSWELL開発者の了氏含めたくさんの人が利用しています。
ちなみにこのブログでは画像圧縮プラグインの「EWWW Image Optimizer」を利用しています。
これらのプラグインによって画像がアップロードできなくなる不具合が起きている場面に何度か遭遇しています。
常時有効化していることで問題になるので、必要な時だけONにして画像圧縮に使う、という使い方は問題なくできるかと思います。
他にも画像圧縮系プラグインはありますので、問題がなさそうなものをご利用ください。
【SWELL公式】推奨プラグインと非推奨・不要・注意すべきプラグインについて
まさる個人的にはオススメですが、公式は非推奨です。
個人の判断で利用してくださいね。
外部サイトへのリンクにブログカードを使用しない
最後の6つ目は「外部サイトのリンクにブログカードを使用しない」です。
まさるブログカードとはこういったものです。
見た目が良くて目立つので、重要なリンクなどに使うのがオススメです。
まさるしかし、外部サイトへのリンクにはオススメできません。
外部サイトへのリンクは、サイト情報やアイキャッチ画像などのデータを外部サイトまで取りに行く必要があるため、どうしてもページ表示速度が落ちてしまいます。
まさる外部サイトへのリンクは次のようなテキストリンクにしましょう。
高速化設定ができたらページ表示速度を確認する
全ての設定が完了したら、成果が出ているか確認してみましょう！
ページ表示速度は「PageSpeed Insights」で分かります。
PageSpeed Insightsではこんなことも分かりますよ！
- スコア
…ブログページの表示速度が0から100までのスコアで表示される。スコアは高ければ高いほど良い。 - ロード時間
…どれくらいの時間でページが完全に読み込まれるか。ロード時間が短いとユーザー体験は良くなりやすい。 - 改善提案
…速度を向上させるための具体的なアドバイスが提供される。 - 使用されている技術の評
…ブログの技術的な問題を見つける。 - SEOチェック
…検索エンジンでのランキングを向上させるために改善するべきポイントが提供される。
毎日見る必要はありませんが、定期的に確認して問題点を改善すれば、ブログの質は飛躍的に向上します。
まさる僕は1ヶ月に1回程度を目安に確認しています。
おすすめしない高速化方法
ここからはSWELLでオススメできない高速化方法を紹介していきます。
- wpロケット
- サイト高速化コンサル
- 必要以上に性能の高いレンタルサーバーを契約する
wpロケット
まずは高速化プラグインで有名なWPロケットです。
WPロケットはフランスの会社が開発したWordPress用高速化プラグインです。
有料で49ドルかかりますが、多くの有名ブロガーが使っていることから導入している人がたくさんいます。
優秀なプラグインであることからオススメする人が多いです。
- ヒトデさん
- マクリンさん
ですが、SWELLに関しては内部設定だけでも十分すぎるほどの速度が出せます。
実際に僕は使わずとも満点のスコアが出ています。
49ドルは便利なツールや勉強のための書籍代にする方がいいでしょう。
※サイトが複雑なために、どうしても速度が出ない人以外は必要ありません。
まずは、SWELLでできる高速化設定を全て行ってから導入を検討しましょう。
ページ表示速度高速化コンサル
ココナラなどのスキルマーケットを探すと、サイトを高速化してくれる人を見つけられます。
ある程度の金額でサイトを高速化してくれるので、悩んでいる人には一考の余地があります。
ただし、中には悪質なコンサルや、低品質のサービスを提供する人もいるので注意が必要です。
僕がブログ仲間に聞いたひどい話は次のとおりです。
- ブログがバグってしまった（表示がおかしい）
- 全然速くならない
- 連絡が返ってこない
SWELLはコンサルに頼らなくても、カンタンな設定を行うだけで高速化できます。
まさるどうしてもコンサルに頼みたい人は、この記事で紹介している設定を全て試してからにしましょう。
必要以上に性能の高いレンタルサーバーを契約する
ページ表示速度を上げるためには、性能の高いレンタルサーバーが必須です。
まさるですが、必要以上に高い性能は必要はありません。
例えば僕はConoHa WINGの1番下の「ベーシックプラン」を契約していますが、PageSpeed Insightsを見てみても十分な速度が出ています。
| プラン | ベーシック | スタンダード | プレミアム |
|---|---|---|---|
| 期間 | 3ヶ月 | 6ヶ月 | 12ヶ月 |
| 通常料金 | 990円/月 | 2,360円/月 | 4,719円/月 |
| 初期費用 | 無料 | 無料 | 無料 |
| SSD | 300GB | 400GB | 500GB |
| 転送量 | 無制限 | 無制限 | 無制限 |
| ドメイン | 無制限 | 無制限 | 無制限 |
| データベース | 無制限 | 無制限 | 無制限 |
| メモリ | 8GB | 12GB | 16GB |
| VCPU | 6コア | 8コア | 10コア |
ConoHa WINGやエックスサーバーなどの信頼できるレンタルサーバーなら、1番下のプランでも十分速度が出るので、高額なプランは必要ありません。
余ったお金は勉強のための書籍代や、ブログ運営を効率化してくれるツール代にしましょう。
まさるその方が圧倒的にいいブログを作れますよ！
オススメのレンタルサーバーは次の2つです。
SWELLを高速化する時にありがちなQ&A
SWELLテーマを使えば、ページの読み込み速度が向上しますか？
絶対ではありませんが、多くの場合で早くなります。
まさるSWELLはブログに最適化された設計で、最小限のプラグインで最大の機能とページ表示速度が手に入りますよ！
SWELLの高速化に推奨されているプラグインは？
SWELLを高速化するために必要なプラグインはありません。
まさるSWELLに搭載されている標準の高速化機能を適切に設定して、最小限のプラグインに絞るだけでページ表示速度は早くなりますよ。
適切な設定方法については、この記事をマネして設定することをオススメします。
SWELLテーマで最適なキャッシュの設定をする方法は？
SWELLにはキャッシュを設定できる機能が標準でついています。
SWELLにキャッシュ系プラグインは基本不要です。
- 「WP Super Cache」
- 「W3 Total Cache」
などのキャッシュ系プラグインは、知識がない状態で扱うべきプラグインではないかなと思っています。
有名ブロガーさんがオススメしてるからといって「とりあえず導入」はNG。
自分でキャッシュさせてるのに「CSSが反映されない！」と慌てている人をよく見かけます。SWELLでは独自のキャッシュ機能がありますので、そちらをオンにしていただくだけでも十分な表示速度は出せると思います。
【SWELL公式】推奨プラグインと非推奨・不要・注意すべきプラグインについて〜キャッシュ系プラグイン
不用意にプラグインを導入すると、不具合や遅延の原因になります。
まさる適切な設定で高速化するようにしましょう。
この記事でキャッシュ機能の設定方法を紹介しています。
下記のボタンから飛んで、解説を見ながら設定してください。
SWELLで高速化するためには、どのように画像の最適化を行えば良いですか？
画像の最適化方法は次の2パターンです。
- 画像圧縮サイトで先に最適化してから使用する
- プラグインを利用して最適化する
この記事ではプラグイン「EWWW Image Optimizer」を使った方法を紹介していますが、SWELL公式では非推奨プラグインとして扱われています。
これらのプラグインによって画像がアップロードできなくなる不具合が起きている場面に何度か遭遇しています。
【SWELL公式】推奨プラグインと非推奨・不要・注意すべきプラグインについて〜EWWW Image Optimizer
まさる不具合が心配な人は、圧縮サイトを利用する方法をオススメします。
＼ 記事内の解説箇所に飛びます ／
SWELLテーマでのCSSとJavaScriptの最適化方法は？
「SWELL設定」の「高速化タブ」から、下記のように最適化する設定ができます。
まさる最適な設定項目については記事内で解説しているので、下記のボタンから飛んで確認して設定してくださいね。
モバイルページの表示速度高速化は必要ですか？
必須です。
モバイルページ表示速度はSEO評価に影響します。
サイトが第一の目標に掲げるべきは優れたユーザー エクスペリエンスの提供であり、これはランキングにも影響します。優れたユーザー エクスペリエンスの実現にはさまざまな要素が関連しますが、ここではそのいくつかを紹介します。
通常、高速なページは低速なページよりもユーザー満足度が高くなります。
【Google公式】SEOメンテナンスガイド〜ユーザー エクスペリエンスの管理
SWELLなら適切に設定するだけで十分に高速化できます。
まさるこの記事で紹介している設定方法を試してみてくださいね。
まとめ：適切な設定でSWELLを爆速にしよう
この記事ではSWELLを高速化する方法について解説してきました。
| 「SWELL設定」でできる高速化 | 「SWELL設定」以外でできる高速化 |
|---|---|
| キャッシュ機能 ファイル読み込み 遅延読み込み機能 ページ遷移高速化 | フォントの変更 不要なプラグインの削除 高速なレンタルサーバへ変更 PHPを最新にする 画像を軽量化する 外部サイトへのリンクにブログカードを使用しない |
SWELLは非常に性能の高いオススメのテーマです。
転妻はりーまだSWELLにしていない人は下のリンクから導入しましょう。
＼ 人気No.1最速テーマ ／
SWELLについては下記の記事で詳しく解説しているので、気になる人はご覧になってください。
この記事が参考になって、皆さんのブログが高速化されて悩みが解決できたら幸いです。
コメント
コメント一覧 （4件）
お礼を言わせてください。
いろいろ調べてほぼ全部やっても速度のパフォーマンスが60くらいから上がらなかったのですが、スクリプトの遅延読み込みのところに書いてあったコードを入れたらいきなりパフォーマンスが96になりました。
大変助かりました。
ありがとうございました。
ちなみに、こちらSWELL以外でもこちらのキーワードを入れて遅延させる方法はありますでしょうか？
いくつがサイトがあり、全部SWELLにするのは大変なので、もしプラグインとかで対応できそうでしたら教えていただけると助かります。
よろしくお願いいたします。
ナナ様
コメントありがとうございます。
こちらの記事がお役に立てたようで、とても嬉しいです！
実は僕も「SWELLに変えれば速くなるのかな？」と下心丸出しでSWELLに変えたのですが、ほとんど早くならず……涙
高速化の方法を検索しまくって、ようやく辿り着いた答えがこの記事の内容だったので「この記事を書いて本当によかったなあ」感激しています！
ご質問の件ですが、サイトの高速化に悩んでSWELLにしたものですから
「正直なところ分からない」
が回答になります。
ただし、JINやCocoonを使っているときに「Async JavaScript」というプラグインが良いというのを見かけたことがあります。
全く使ったことがないので、自己責任でご使用になって頂かなければいけませんが、一つの案としてご提案させていただきます。
個人的にはSWELLが圧倒的に使いやすいので、頑張ってご自身で移行するか、ご予算が許すのであれば、外注するなどして移行するのが一番なのかな？と思っております。
他の記事もぜひご覧になってくださいね。
お早いご回答ありがとうございます！
私もSWELLにすれば早くなるのかと思い、一般的に書かれている初期設定をしても早くならず。
その他画像の圧縮やa3 Lazy Loadを入れてみたのですが全然変わりませんでした。
今Async JavaScriptというのを試してみましたが変わらないようですね。
やはりSWELLが最強のようですね！
せっかくSWELLを買ったので、他のも頑張って移行してみます。
クラシックエディタも入れれば使えるようですが、この機会にブロックエディタも勉強しながらやってみようと思います。
ありがとうございました（^^）
また分からないことがあったら参考にさせていただきます。
ありがとうございます！
そうでしたか……
やはりプラグインなどでの高速化は、相性などの問題も出てくるので難しいですね。
その点SWELLは、正しく設定するだけで簡単に問題のないレベルまで高速化できるのでいいですよね。
設定も簡単だし……
無理のない範囲で移行してみてください！
応援しております。
ありがとうございます！
また何かあれば、お気軽にコメントください！