サイトスピードアップ施策

 

オタマジャクシ

・サイトスピードを速くしたい
・どうやったらサイトスピードは上がるの?

 

こんな疑問や悩みを解決していきます。

 

サイトスピードとは、ユーザーがサイトを訪問した時に、サイトが表示されるまでの時間を言います。

サイトスピードが遅いとユーザビリティ低下とSEOへの悪影響をおこす危険があるため、無視できない要素です。

 

『サイトスピードの重要性はわかってるけど何をしたらいいんだろう?』という方も多いのではないでしょうか。

そこで、今回は『実際にサイトスピードを上げるために行った対策を、一つ一つ効果検証をつけて紹介』していきます。

 

この記事にあることは誰でも行える簡単な対策なのでマネができます。

参考にしてもらえたら、あなたのサイトのサイトスピードは確実に上がるでしょう。

 

スポンサーリンク

サイトスピードが低いと起きる事

サイトスピードが低いと起きる事

サイトスピードが遅いと、以下2つのマイナス影響が起こりえます。

損をしないためにも、サイトスピードの対策の必要性に十分気が付けると思います。

  • ユーザーの直帰率が上がる
  • SEOに悪影響を与える

簡単に説明をしていきます。

 

ユーザーの直帰率が上がる

 

ユーザビリティの低下につながってしまいます。

サイトは腐るほどあるので、表示速度がければ他のサイトを見る人が多いのは当たり前かもしれませんね。

表示速度に関してが、このような検証データもあります。

・表示速度が1秒から3秒に落ちると、直帰率は32%上昇
・表示速度が1秒から5秒に落ちると、直帰率は90%上昇
・表示速度が1秒から6秒に落ちると、直帰率は106%上昇
・表示速度が1秒から7秒に落ちると、直帰率は113%上昇
・表示速度が1秒から10秒に落ちると、直帰率は123%上昇

SEOに悪影響を与える

2018年に『Speed Update」』が実装されたことで、サイトの表示スピードはSEOでの必須項目になりました。
表示スピードが下がると、Googlのクローラー(あなたのサイトを検索エンジンに登録するロボット)にがすべてのコンテンツを読み込みません。
こちらの記事を読むと好きな時にクローラーを呼ぶ方法がわかります。

サイトスピードの測り方

 

Googleが提供しているサイトスピードの分析ツールがあります。

以下のサイトを参考にしてみましょう。

PageSpeed Insightsで測定ができます。

 

このサイトでサイトスピードを測ることで以下を知れます。

できる事
  • 起動速度の世界順位が知れる
  • サイトスピードを上げる改善策のヒントが知れる

ここの結果のスコアが80点であれば、世界の上位20%に食い込んでいるという事になります。

つまり50点以上であれば世界の半分のサイトにはサイトスピードで優っていると言えるんです。

 

サイトスピードの目安

サイトスピードの目安

PageSpeed Insightsは起動速度の世界順位を知ることが出来ますが、どのくらいいのスコアならOKなのでしょうか?

結論、80以上あれば十分でしょう。

 

もちろん、早ければ早いほどユーザビリティの向上につながります。

改善前と改善後のサイトスピード

 

サイトスピードがものすごく低かったのですが、7つの改善施策を行いサイトスピードを高めることが出来ました。

 

現在使っているWordpressテーマ『DIVER』は表示速度が格段に早いというわけではありません。

しかし、しっかりと対策をとることで高得点をたたき出すことが出来ました。

 

実際のスコアはこのようになります。

 

サイトスピードの改善前と改善後

パソコンは関しては99点にまですることができたのは納得いくスコアでした。

 

サイトスピードは特別目立たないですがDiverは一度使ったら二度と離れられないテーマです。

>>『Diver (ダイバー)』誰もを魅了する有料テーマ!《レビュー》

 

サイトスピードの改善施策

サイトスピード改善対策項目

それでは具体的な施策と、それぞれの結果を順を追って説明していきますね。

上画像のように、PageSpeed Insightsでは改善すべき項目がわかるので1つ1つ対応のアクションに移りやすいです。

 

それぞれ必要な個所をご覧ください。改善していった順番に記載しています。

  1. 適切なサイズの画像
  2. 効率的な画像フォーマット
  3. 使用していない CSS を削除してください
  4. レンダリングを妨げるリソースの除外
  5. 次世代フォーマットでの画像の配信
  6. その他行ったこと

 

1.適切なサイズの画像

適切なサイズの画像

『適切なサイズの画像』という項目を改善してい行きます。

問題点

サイトスピードを低下させている原因には画像周りに問題があることが多いです。

必要以上に大きいファイルサイズの画像が登録されていると、CSSを使用して適切な画像サイズに変更が行われます。その変更過程でサイトスピードの低下につながってしまという訳です。

実際の対策

EWWW Image Optimizerを使っての表示速度の改善

画像を圧縮させてサイズを小さくすることで、表示の負荷を減らすことを狙いました。

 

画像を圧縮させるためにWordpressプラグイン『EWWW Image Optimizer』を使用しました。

このプラグインでは、WordPressにアップロードした画像を質を下げることなく自動で圧縮・最適化することが可能です。さらに、今までに保存していた画像も一括で圧縮・最適化も行ってくれる優れもの。

 

画像を使っているすべてのサイトに一括で効果がでるので、サイト全体のサイトスピードUPのこうかが見込めます。

 

補足

WordPressに画像をアップロードする前に、画像を圧縮する方法もあります。

TinyPNG』を使えば無料で画像の圧縮を行うことができるので、チェックしてみるのもオススメ。

 

結果

 

結果は次の『効率的な画像フォーマット』の対策と並行して行ったので、次に記載します。

カエル
記録がうまく取れなかった・・

 

2.効率的な画像フォーマット

効率的な画像フォーマット

『効率的な画像フォーマット』という項目を改善してい行きます。

効率的な画像フォーマットの修正とは、画像を適切なサイズに変換したり画像のフォーマットを適切なものにすることです。

 

問題点

『画像のフォーマットが適していない事』や『画像の容量が大きいこと』があげられます。

背景を透過していなくてい画像はJPGになっていますか?

サイトスピードを上げるには使用用途によって画像のファイル形式を正しくする必要があるんです。

☆推奨されるがファイル形式
  • 写真や画像⇒jpg形式
  • 透過部分がある画像⇒PNG形式
  • アニメーション画像⇒gif形式

 

実際の対策

 

PNGからJPG

 

PNGtoJPG』ではPNGからJPGにファイル形式を変更する時には、以下のサイトを使うのがいいでしょう。

画像のフォーマット(JPG、GIF、PNGとう)はファイルの拡張子を見れば判断ができます。

 

無駄にPNGになっていて、重くなっていることがあるのでこれを期にキレイにしてしまいましょう。

結果

 

スコア

・モバイル:7⇒8
・パソコン:59⇒59
結果は『効率的な画像フォーマット』『適切なサイズの画像』が改善できる項目から消すことができました。

しかし、サイトスピードは全く上がりませんでした。

改善できる項目

効率的な画像フォーマット

サイトスピード(画像修正後の結果)

効率的な画像フォーマット

 

 

 

3.使用していない CSS を削除してください

使用していない CSS を削除してください

『使用していない CSS を削除してください』という項目を改善してい行きます。

問題点

ユーザーの画面にコンテンツが表示されるまでには、CSSをいったん読み込むという作業が入っています。

つまり不要なCSSがあると、その分無意味に時間を使っているということになるのです。

 

使用していないCSSをチェックして、いらないCSSは消しておけば解決します。

実際の対策

 

使っていないコードがいくつかあり、それを一気に削除しました。

僕の場合は、Googl FontをCSSコードで呼び出して使っていましたが、フォントにこだわりがなかったので消してしまいました。

GoogleFont

 

結果

 

スコア

・モバイル:8⇒32
・パソコン:59⇒72
スコアがかなり伸びました。
不要なCSSコードがそれほどあったという事ですね。
WordPressをはじめたての頃は、CSSを適当にいじっていたのが問題だったようでした。
使用していない CSS を削除してくださいの結果

 

 

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

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

『レンダリングを妨げるリソースの除外』という項目を改善してい行きます。

 

問題点

WEBサイトを表示させるには、プログラムコードをいったんすべて読み込むことが必要です。

その読み込みを一時停止してしまうコードがレンダリングを妨げるリソースになります。

 

多くの場合『CSS』または『JavaScript』がレンダリングを妨げ遅くしている原因と考えられます。

 

レンダリングを妨げるリソースの除外』コード修正ができる人はコードを書き換えた方がいいでしょう。

しかし、改善のハードルが高すぎるので、誰でもできるプラグイの導入で改善できる方法を紹介していきます。

プラグインが増えるとサイトが重くなるので、使用するプラグインは少ない方がBESTですね。

カエル
対策を3つ紹介するよ!

 

実際の対策-その1

Autoptimize

WEBでサイトを表示させるときにはサイトを作っているプログラミングコードのダウンロードが必要です。

そのプログラミングコードが重たいと、サイトスピードが遅くなるのは当たり前。

 

この問題を解決するためにプラグイン『Autoptimize』を使いました。

『Autoptimizeプログラミングコード(HTMLやCSS、JavaScript)のファイルを圧縮・最適化することができます。

 

 

その1の結果

 

スコア

・モバイル:32⇒37
・パソコン:72⇒87

プラグイン『Autoptimize』の導入したことで、またもスコアが伸びました。

ただ、これではまだ

 

 

実際の対策-その2

WP Fastest Cache

ページを表示するためのデータを保存する仕組み(キャッシュ)を改善することで、サイトスピードをあげることが可能。

この問題を解決するためにプラグイン『WP Fastest Cache』を使いました。

『WP Fastest Cache』とは、WordPressのキャッシュの設定と削除をすることができるプラグインです。

また、画像遅延の読み込み効果でさらにサイトスピードの向上に期待ができる。

 

 

その2の結果

 

スコア

・モバイル:37⇒70
・パソコン:87⇒98

『WP Fastest Cache』を使うことでパソコンのスコアがほぼ満足のいくスコアになりました。

また、モバイルも70と十分な結果に。

 

 

実際の対策-その3

施策その1・施策その2を両方使っても、『レンダリングを妨げるリソースの除外』は完璧に修正をすることができませんでした。

さらには表示速度を速める方法があるので試すことにしました。

 

先ほども説明したように、WEBサイトを表示させるにはプログラムコードをいったんすべて読み込むという工程があります。

ということは、プログラムコード(Javascript)の読み込みを後回しにできれば、表示速度は早くなる可能性がでます。

 

この問題を解決するためにプラグイン『『Script to Footere』を使いました。

プラグイン『Script to Footere』とは、Javascript(プログラミング言語)の読み込みを後回しにしてくれるプラグインです。

 

 

その3の結果

 

スコア

・モバイル:70⇒82
・パソコン:98⇒99

モバイルのスコアが80を超えました。

パソコンに関しては最高のパフォーマンスを発揮してくれています。

 

 

 

5.次世代フォーマットでの画像の配信

 

この項目は特にアクションをとる必要はないと思っています。

『画像のフォーマットが適していない事』や『画像の容量が大きいこと』の対策を行ったことで自動的に項目から消えていました。

 

『次世代フォーマットでの画像の配信』は手を付けなくても効果は十分に出ました。

今後は手を付けていく必要があるかもしれないので準備はしておこうと思います。

 

その他の改善施策

他にも不要なプラグインの削除をおこなっています。

魅力的なプラグインは多いです。しかし、入れすぎてしまっては動作がおそくなる原因になります。

必要ない物はどんどん消してしまいましょう。

カエル

サイトスピードを上げるって
大掃除みたいだね

まとめ

WordPressでの実際行った施策を一挙公開しました。

この施策でサイトスピードは格段にはやくすることができました。

 

今回はコードをいじることなく、初心者の方でも簡単に行える施策のみ載せています。

難しい改善策をやりだしたらきりがなく、本当の目的の記事を書くという事ができなくなってしいますからね。

なので今回は必要最低限の対策ということです。

 

施策自体はがっつり1日かければ終わらせることが可能なので、1日時間をとって作業してしまうのも手ですね。

参考になればうれしいです。

スポンサーリンク

Twitterでフォローしよう

おすすめの記事