ランディングページの表示速度 サイトの表示が遅い原因を確認して改善を試みた話

ワードプレスのランディングページの表示速度が遅くなる事があります。
ブログ運営側としてはサイトの表示速度は改善させたいもの。

しかし、筆者はこういったシステムの事が全くわかりません。

ランディングページって何?
サイトの表示が遅いって何が原因?
どう手を付けたらいいのやら。

パソコン初心者ではありませんが、システムやらデータやら仕組みがほとんどわからない筆者が改善を試みた記録をここに綴ります。

スポンサーリンク

ランディングページの表示速度が遅いとは

ある日の事です。

googleアナリティクスの右側に「トップ5のランディングページの1つで、読み込み速度が低下」と表示されました。

筆者はランディングページの意味が分からなかった事もあり、放置。
しかし、数日たってもこの警告のようなメッセージが消えません。

さすがに気になったので、ネットで調べてみました。

そして意味がわかりました。

ランディンクページとは、ブログのページの事。

要するに、『ランディングページの1つで、読み込み速度が低下』とは

「アナタのブログの記事、表示されるまで時間がかかりすぎるわよ。どうにかしなさいよ。」

と言う意味だそうです。

更にその流れで分かったのは、サイトの表示速度が遅いとgoogleさんからの評価が悪くなる。

表示時間が長いと、せっかく記事を見ようとしてくれた人がサイトが表示されるまでに離脱してしまうという事。

それは…避けたい。

改善せねば!と全くシステムに関しての知識がない筆者は意味がわからないながらもネットで検索して対策をしてみる事にしました。

サイトの表示が遅い原因を確認する

何はともあれ改善するには原因がわからないとなりません。

画像が重いのが原因である事が多いようなのですが、筆者のワードプレスには画像を圧縮するプラグイン『EWWW Image Optimizer』が入っています。
なので画像が原因ではなさそう。

そこで、こういった小難しいを解説してくれている親切なサイトをいくつか見て調べてみました。

正直言ってどこを見ても「?」「?」「?」という感じでよくわからなかったのですが、
いずれのサイトも、まずはどれくらい遅いか測定してみな!という事でした。

そこで、閲覧した全てのサイトで紹介されていたPageSpeed Insightsで確認してみる事にしました。

クリックすると画面が開きます  PageSpeed Insights

これに自分のブログのURLを入力すると、パソコンとモバイルサイトの表示速度の点数が出ます。

この時、筆者は訳わからないまま操作していましたので点数は控えてないのですが、点数は

・モバイル 15くらい?
・パソコン 30くらい?

こんな感じでした。

とにかくスコアがめちゃくちゃ悪い。

点数の下には赤字で原因が表示されます。

この時筆者のサイトの表示を遅くしている主な原因は

・レンダリングを妨げるリソースの除外

・サーバー応答時間の短縮(TTFB)

この二つでした。

しかし、こう書かれても全く意味がわかりません。

れんだりんぐ?

何の事言ってるのさ。

日本語使ってくれよ。

意味が分からないながらも、これらをどうにかしないといけないようなので、再びネットの海に飛び込み、詳しい方々が説明してくれているサイトを見て対処する事にしました。

まずは一番の原因になっている『レンダリングを妨げるリソースの除外』。

これををどうにかする事にしました。

スポンサーリンク

サイトの表示速度の改善を試みる

筆者のワードプレスのサイト速度が遅い原因は

・レンダリングを妨げるリソースの除外

・サーバー応答時間の短縮(TTFB)

だそうです。

まずは『レンダリングを妨げるリソースの除外』のから手をつけていきます。

レンダリングを妨げるリソースの除外を試みる

PageSpeed Insightsにアドバイス的な物として

「ページの初回ペイントをリソースが阻害しています。クリティカルなJSやCSSはインラインで配信し、それ以外のJSやスタイルはすべて遅らせることをご検討ください。」

と書いてあります。

だから何言ってるかわからないんだって。

そういう状態なので、とにかくこれについて説明している色々なサイトを見てみます。

が、どちら様も何言ってるのか、私には理解できません。

私みたいな人間にはカタカナばかり使われてもわからないのよ。

噛み砕いて言ってくれないとわからないのだよ。

もっとわかりやすい言葉と言い回しにしてくれないかね…

そうモヤモヤしていると、とても分かりやすく書いてくれているサイトに出会いました。

こちらです。

⇒『現役WEBデザイナー・おかぴーのブログデザインお悩み相談室』

おかぴーさんによると、これは「サイトを最初に表示させる時に余計な物を読み込んでいるので、それは後回しにするようにしなさいよ」という意味だそうです。

そしてその対処法も非常にわかりやすく紹介されていましたので、その手順に従って「Autoptimize」というプラグインを入れ、対処してみました。

これです。

その結果、赤文字だった『レンダリングを妨げるリソースの除外』が黄色に変わり、スコアがこんな感じに。

■対処後のスコア

・モバイル 35
・パソコン 72

ちなみに、これをする前は

・モバイル 15くらい?
・パソコン 30くらい?

改善している事がわかります。

効果はあった!

そして今度は『サーバー応答時間の短縮(TTFB)』です。

サーバー応答時間の短縮(TTFB)について対処してみる

サーバー応答時間の短縮(TTFB)は、読んで字のごとくページが開くまでの時間を短縮できるようにしなよ!という意味ですが、短縮するにはどうしたらいいのやら。

例のPageSpeed Insightsには

「テーマ、プラグイン、サーバー仕様はすべてサーバーの応答時間に影響します。
より最適化されたテーマを探す、最適化プラグインを慎重に選ぶ、サーバーをアップグレードすることをおすすめします。」

そんな言葉が。

なになに~?

だからどうしたらいいのさ?

ネットで調べるとサーバーのキャッシュを削除するやらPHPのバージョンアップをするやらプラグインを入れてどうこう書いてあります。

何をすべきか、そしてこれらをする事でサイトがおかしな事にならないか心配です。

無知な筆者では判断できないので、いつもお世話になっている先輩にどうしたらいいか尋ねてみました。

するとご回答が…

「ワードプレスのリビジョンって消してる?」

「データベース上に残っているリビジョンが増えるとサイトが重くなったりする。」

「一度も掃除していないとそれが原因かも。」

りびじょん?

何それ?

もちろん掃除なんてした事はありません。

お忙しい方なので「りびじょん」が何かまでは聞くに聞けず、自分で調べたところ、ワードプレスが自動で行う下書きの保存とかによって、いらないデータが溜まってしまうんだそうです。

それを削除する事で速度が改善する事もあるという。

リビジョンの削除の仕方を調べるとプラグインを入れて消すとの事。

そこで『WP-Optimize–Clean』というプラグインを入れて、下の画像のように設定してリビジョンを消してみました。

※クリックすると大きくなります。

併せてネットでは「キャッシュを削除せよ」と書いてある事が多いので、こちらも実行。

キャッシュの削除の為に入れたプラグインは『WP super cache』というものです。

これはこちらのサイトにある手順に従って削除してみました。

⇒『WP Super Cache のおすすめの設定方法』

そしてリビジョン、キャッシュ削除後にサイト速度の測定をしたところ…

■リビジョン、キャッシュの削除後のスコア

・モバイル 30
・パソコン 80

あれ~?

モバイルの点数が悪くなってるぞ?

パソコンの方は

30点くらい⇒72点⇒80点

こんな感じで大幅に改善されました。

最後に

結果として筆者の場合は『レンダリングを妨げるリソースの除外』の対処をする事で、パソコンとモバイル側の表示速度は大幅に改善した状態です。

リビジョンとキャッシュのクリアをしても、特に変化は見られませんでした。
もしかしたらこの二つは長年貯め込んだ場合には効果があるのかもしれません。

モバイル表示を早くするための対処法を探すのは時間が惜しい事もありますので、しばらくこのまま様子を見ようと思います。

以上です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
%d人のブロガーが「いいね」をつけました。