【PageSpeed Insight 】サイトスピードを速くするためにとった3つの対策。

2019年1月23日

サイトの読み込みスピードを速くするには

僕がサイトスピードを改善するためにしたことは、誰でもできる簡単なことだけです。

ですがこれだけで驚くほどパフォーマンスが向上したのです。

具体的にはこう。

 

プラグインでしたこと

  • 画像の圧縮
  • 画像の遅延表示
  • cssなどコードの最適化

 

php編集でしたこと

  • 余計な文字の取り込みを改善

これだけです。

僕の場合は特に「画像表示の遅延」と「cssコードの最適化」をすることで数値を改善することができました!

「phpの編集」ですが、ほんの少しの底上げにしかならないので、多少知識のある人が実験程度にやるぐらいでいいと思います。

それよりも「プラグイン」でほとんど解決できてしまので、そっちを進めていきましょう。

画像を圧縮

まずは画像の圧縮化ですね。

これ、やるかやらないかでかなり変わります。

記事を書く時ほとんどの人が画像を使うと思うんですけど、意外とサイズが大きいままだったりします。

そこで、画像圧縮プラグイン「EWWW image optimizer」を使います。

使い方

  1. 「EWWW image optimizer」をインストール
  2. ワードプレスの左「メディア」→「一括最適化」

画像の遅延

次に画像の遅延です。

どういうことかわかりづらいと思うので説明します。

画像は圧縮されてもまだある程度サイズが大きいんです。

なのでサイトを開いたとき「画像の読み込みだけを遅らせる」ことができればいいですよね?

それを可能にするのが、「A3 Lazy Load」というプラグインです。

使い方

  1. 「A5 Lazy Load」をインストール
  2. 「プラグイン」→「A5 Lazy Loadのsetting」→「Image Load Threshold」の数値を400へ変更

cssなどのコード最適化

最後にコードの最適化についてです。

最適化していないと「不要なコードや重複しているコード」によって読み込みが遅くなってしまうということです。

そこで、不要なコードを自動で書き換えてくれるプラグイン「Autoptimize」を使います。

使い方は簡単で、

こんな感じでセッティングをしています。

真ん中あたりにある「java scriptのオプション」にチェックを入れてないのは、先ほど紹介した「a3 lazy load」と相性が悪かったからです。

ここにチェックを入れたまま遅延読み込みプラグイン使うと、「画像」が表示されなくなってしまったんですよね。

なのでここはoffにしていますが、サイトスピードに影響はありませんでしした。(僕のワードプレスでは)

function.php

 ここでは主に、「無駄な文字の読み込み」と「無駄な動きの読み込み」をさせないように、function phpをいじりました。

この方の記事を参考にしました。

まとめ

© 2021 All right reserved.