【PV数を上げるために必要】Webページ表示の仕組みを理解してWordPressブログを高速化をしよう

サイトの高速化って難しいですよね。でも、サイトの読み込みが1秒から3秒になるだけで、直帰率が32％も増えると言われています。

WordPressを使っている多くの方は、プラグインを導入して高速化をしてるのではないでしょうか。

しかし、何の処理を高速化しているのか分からないまま、やみくもにプラグインをインストールすると、データサイズを大きくしすぎてしまって、逆にページが遅くなってしまう場合があります。

本記事は、サイト表示の仕組みをおさえ、高速化するべき処理についてまとめたものです。これが理解できると、最小限のプラグインの導入でサイトを高速化できます。

たむ

本記事は、少し専門的な内容にはなりますが、高速化はブログの信頼性やGoogleの評価を上げるために避けては通れない道なので、分かるところから実践してみてください。

やみくもにプラグインを入れてもダメ！

WordPressには、サイト高速化のためのプラグインがたくさんあります。しかし、高速化できる処理はプラグインによってバラバラです。

後述しますが、高速化の対象となる処理には「ネットワーク処理」、「レンダリング処理」、「サーバー処理」があります。この３つの処理のうち、どの処理を高速化してくれるのかは理解しないと、同じ処理を高速化しているプラグインを使って、無駄にデータサイズを大きくしてしまう場合があります。

また、プラグインのリリースはハードルが低く脆弱性があるものも数多く出回っていて、やみくもに入れると、サイトの安全性が損なわれる場合もあります。

導入するプラグインを最小限におさえるためにも、まずは高速化するべき処理をおさえましょう。

サイト高速化とは「Webページを表示するための処理」を速く行うということである

「高速化」という言葉が一つの単語になっており、サイトの何を高速化するのかを理解していない方も意外と多いのではないでしょうか。

見出しのとおり、サイト高速化とは「Webページを表示するための処理」を「高速化」することです。よって、Webページの表示の仕組みを理解する必要があります。

Webページを表示するための処理には大きく「ネットワーク処理」、「レンダリング処理」、「サーバー処理」があり、以下の画像の①～⑧の流れでWebページが表示されます。

これら3つの処理を速くすることで、サイトを高速化するわけです（ただし、サーバー処理については、ブラウザ側で高速化することはできないため、本記事では解説しないこととします）。

ネットワーク処理の高速化

ネットワーク処理とは、ブラウザ（ユーザーのパソコン）とサーバーとの間でデータを運ぶ通信処理のことを指します。ネットワーク処理を高速化するためには、以下の3つの方法があります。

⑴ 通信量を削減する

みなさんは、メールで大きなサイズのファイルを添付して送信に時間がかかった経験はありませんか？

サイトの場合もサイズが大きいと、ネットワーク処理に時間がかかります。サイトに必要なファイルとはHTMLやCSSなどのテキストファイルと、pngやjpegなどの画像ファイルがあり、この2つのサイズを小さくすることで、高速化が図れます。

テキストファイルの不要コードを削除してサイズを縮小するMinify圧縮の方法はこちらを参照してください。

【ブログをサクサク動かそう！】Minify圧縮でWordPressを高速化する方法

サイトが遅くて困っていませんか？本記事はサイトの高速化の方法で最も簡単にできるMinihy圧縮のやり方を解説します。ブログをサクサクスピーディに動かしたい方は是非、参考にしてください。

tamsite.net

2021.03.02

6割から9割データを削減してくれるGzip圧縮の方法はこちらを参考にしてください。

【通信量削減率6割以上！】Gzip圧縮でWordPressブログを高速化する方法

ブログが遅いと読者はすぐにページを閉じてしまいます。本記事では、ブログの通信料を大幅に削減できる「Gzip圧縮」のやり方について解説します。高速化して多くの読者に読んでもらえるブログにしたい方は、是非、参考にしてみてください。

tamsite.net

2021.03.02

画像ファイルの圧縮方法→執筆中

⑵ 通信回数を減らす

先ほど示した図をもう一度確認しましょう。

通信回数の削減とは、①～⑧の1連の流れの回数を減らすことを意味します。

①～⑧の流れを経てページが表示されるわけですが、1回の流れで表示されるわけではなく、複数回ブラウザはURLリクエストを行います。つまり、何度も①～⑧を繰り返してサイトは表示されます。

そして、基本的に1回のリクエストが処理されるまでは、ブラウザは次のリクエストを行えません。よって、サイト高速化のためには、通信回数の削減が有効になるのです。

通信回数を減らすための方法は主に４つあります。

③通信距離を短くする

通信速度は基本的にブラウザとサーバーとの距離に比例して遅くなります。

よって高速化のためには、原則、ブラウザを使用する端末とサーバーとの物理的距離を短くする必要があります。もちろん、物理的距離とサーバとの距離が必ず一致しない場合もあります。

CDNについて→執筆中

レンダリング処理の高速化

レンダリング処理とは、HTMLファイル、CSSファイル、JavaScriptファイル、画像ファイルなどを解析し、ブラウザにページを表示させる処理を指します。

レンダリング処理で最初にサーバーから送信され解析するのはHTMLファイルです。そして、HTMLファイルにCSSファイル等の外部ファイルの記述があれば、その都度サーバーにリクエストし、サーバーからCSSファイル等を受け取り解析します。

解析した情報をもとに、「レンダリングツリー」を作ります。レンダリング処理の高速化とは、ざっくり言うと、このレンダリングツリーを可能な限り速く構築させることで、Webページを速く表示させることを言います。

レンダリングツリーを速く構築する施策は、主に以下の4つです。

⑴ CSSファイルを早期に読み込ませる

→やり方執筆中

⑵ CSSの解析スピードを上げる

→やり方執筆中

⑶ JavaScriptファイルを早期に読み込ませない

→やり方執筆中

⑷ JavaScriptファイルを非同期に読み込ませる

→やり方執筆中