どうも、リュウセイです！
ブログを運営していく上で気を付けていかなければならない事はいくつかあるのですが、今回はその中から「サイトの表示速度」について取り上げてみます。
まだブログ運営歴が浅い方はあまり意識していないかもですが、実はサイトの表示速度というものはとても重要なチェックポイントなんです！
目次
サイトの表示速度が遅いとどうなる？
まず、サイトの表示速度が遅いことによるデメリットを説明していきますね。
それは、「読者の離脱率が高まる」という点です。
具体的には、表示速度が1秒遅くなるごとに5～20％ほどアクセス数が減少すると言われているくらい、シビアな世界となっております。
たった1秒ですよ？恐ろしいですよね…。
『読者、せっかち過ぎだろ！』と思うかもしれませんが、でも考えてみてください。
サイトの表示速度が遅くてブラウザバックした経験、あなたも何度かありませんでしたか？
たかが1秒と思うかもしれませんが、ネットの世界の1秒というのは本当に大きなものなんですね。
ブログは特に読者に支持されるサイトでなければなりませんから、サイトの表示速度を改善させることはブログ運営者の必須業務なのです。
サイトの表示速度を計測するための便利なGoogleのツール(無料)があるので、次はそれを紹介していきます。
Google PageSpeed Insightsを使おう
「Google PageSpeed Insights」というGoogleの便利な無料ツールがあります。
このツールを使うことで簡単に自分のサイトの表示速度を診断できます。
使い方は
- 自分のサイトのURLを打ち込む
- 「分析」ボタンを押す
以上の簡単2ステップです。
表示速度の評価は「0～100」で表され、数字が大きいほど高評価(表示速度が早い)となります。
非常に便利なツールではあるのですが、分析結果にはある程度バラツキが出るのが個人的にちょっと気になる点です。
例えば、さっきは78だったのに、今分析したら68だった…みたいな感じでバラツキが出ることもあります。
この辺の事はあまり詳しくないので上手に説明出来なくて申し訳ないのですが、あくまで目安程度だと捉えておくことが丁度良いと思います。
このツールによって提案される最適化の種類は、
- レンダリングを妨げるリソースの除外
- 次世代フォーマットでの画像の配信
- Reduce initial server response time(サーバーの初期応答時間を短縮する)
- CSS の最小化
- JavaScript の最小化
など、もっと細かい項目があるのですが、代表的なものは以上の通りです。
そして、この中では比較的簡単に改善できる項目が、
- 次世代フォーマットでの画像の配信
- CSS の最適化
- JavaScript の最適化
の三つであり、ここをまずは改善させることを目指すと良いです。
順番に解説していきますね。
表示速度を改善させるために有効な項目
次世代フォーマットでの画像の配信
簡単に言うと、「画像のファイルサイズをできる限り小さくしましょう」ということで、これを「画像の最適化」と言います。
よくやってしまいがちなのは、スマホやカメラで撮った写真を編集せずにそのままブログにアップしてしまう例です。
これだと無駄に画像のファイルサイズが多くなってしまい、画像が重いとサイトの表示も重くなってしまいます。
Google PageSpeed Insightsでは、画像を「JPEG 2000、JPEG XR、WebP」のいずれかのフォーマットにすることを「次世代フォーマットでの画像の配信」と定義しています。
画像フォーマットとか形式とかは色々難しいところなのですが、簡単に画像ファイルサイズを最適化する方法があります。
それが「EWWW Image Optimizer」というプラグインを使うことです。
このプラグインは、難しい設定を特に必要とせず、インストールして有効化しておくだけでブログにアップした画像を自動的に圧縮・フォーマット変換してくれる有能プラグインです。
このプラグインは、ブログ運営をする上での必須プラグインなので、必ず入れておきましょう。
インストールしたら、「設定」から「WebP」タブをクリックして、「WebP Conversion」にチェックを入れて、下にある「設定を保存」をクリックしましょう。
ここにチェックを入れておくことで、アップした画像フォーマットをWebPに自動変換してくれます(変換出来ない画像もあります)。
画像をブログにアップした後のファイルサイズの処理は「EWWW Image Optimizer」が自動的に行ってくれますが、これプラス「オンラインPNG・JPEG圧縮」というWebサービスツールを利用してファイルサイズを圧縮しておくとなお良しです。
ブログに画像をアップする前に上記のWebツールを使って圧縮させ、更にその後プラグインで圧縮させるといった形で、2重圧縮させることによってよりサーバーの負担を軽減させることが可能になります。
CSS の最適化
CSSとは、ホームページの見た目を素敵にしてくれる言語のことです。
よくプログラミング言語だと間違われるのですが、スタイルシート言語です。
アイコンに色を付けたりするときなどに使われる言語ですね。
CSSはどこにあるのか？と言うと、テーマの中の「スタイルシート (style.css)」という項目に入っています。
次に解説するJavaScriptもそうですが、コードには余分な改行やコメントアウト等などが含まれています。
それらは最適化することが可能であり、Google PageSpeed Insightsでもそれを推奨しています。
じゃあどうやって最適化させるのか？と言うと、「Syncer」というツールを使うのが簡単です。
このツールで、CSSやJavaScriptのコードを最適化させることが可能です。
CSSはコチラのページ→CSS Minifier (スタイルシートの圧縮)
使い方は簡単です。
- 使用しているテーマのスタイルシートのコードをツールの「縮小前のコード」に貼り付ける
- 貼り付けたら「Minifyをする」ボタンをクリックする
- 「縮小後のコード」に表記されたコードをテーマのスタイルシートにまるまる貼り付ける
以上です。
注意点を挙げるとすれば、テーマの編集前には必ずバックアップを取っておくことと、編集前のコードをメモ帳にコピペしておくことです。
こうしておけば、万が一間違えたことがあっても対処が出来ます。
コードの編集は取り返しのつかないことになってしまうケースもあるため、今挙げた2点は必ず守りましょう。
JavaScript の最適化
JavaScriptとは、Webサイトを表示するためにブラウザ上で動くプログラミング言語です。
- ポップアップウィンドウを出現させる
- ブラウザ上で画像を拡大表示してWebページを見やすくする
- メッセージ送付フォームやパスワードの入力フォームなどを設置する
主にこういった時に使われる言語です。
Webサイトのあらゆるところで使われており、ユーザー側がWebブラウザを閲覧する過程で体験できることはすべてJavaScriptが処理をして実現させています。
JavaScriptもCSS同様、コードを最適化させることが可能で、Google PageSpeed Insightsの推奨項目の一つです。
<script>から</script>の間にあるのがJavaScriptです。
CSS同様、「Syncer」ツールのJS Minifier (JavaScriptの圧縮)でJavaScriptの最適化が可能です。
その他の改善方法
サーバーキャッシュ設定をONにする
その他の有効な方法として、サーバーキャッシュ設定をONにする方法があります。
キャッシュの意味や設定方法については「【IT用語】「キャッシュ」「キャッシュを削除する」とは？」を参考にしてください。
Xアクセラレータを使用する
Xアクセラレータとは、Webサイトの高速化や大量アクセスへの体制強化を行うエックスサーバーの独自開発の高速機能です。
エックスサーバーでサーバー契約している方は、この機能をONにすることでサイトの表示速度を向上させることが可能となります。
一般的なブログを運営している場合は、XアクセラレータをONにすることに特にデメリットもないので有効化しておきましょう。
- エックスサーバー管理画面にログインしてサーバーパネルを開く
- 「高速化」の項目にある「Xアクセラレータ」をクリック
- 設定対象ドメインをクリック
- 適用させたいXアクセラレータを選択してクリック
これで設定が出来ます。
まとめ
サイトの表示速度を改善させる方法として、代表的はものを3つ挙げて解説しました。
この3つは比較的改善しやすい項目なので、最低でもこの辺くらいは改善しておくと良いですね。
JavaScriptとCSSはちょっと小難しいですが、ここが良く分からない場合は画像の最適化だけでも最低限行いましょう。
ブログに画像をアップする前に「オンラインPNG・JPEG圧縮」でファイルを圧縮させて、「EWWW Image Optimizer」で更に圧縮＆フォーマット変換させると効果的です。
是非、取り入れてみてください。
それでは、今回はこの辺で。
ありがとうございました。
ﾁｬｵ(･∀･)！
コメントを残す