こんにちは、skyrinrinです
ブロガーの皆さん、
サイトの表示速度やパフォーマンスを気にしたことはありますか?
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
めっちゃ悪いんだよね…
サイトの表示速度が遅かったり、
パフォーマンスが悪いままにしていると読者によるページの離脱に繋がったり
GoogleからのSEO評価を大幅に下げる結果になってしまいます。
ということで、今回は
Google Page Speed Insightsの評価をもとに
サイトの表示速度やパフォーマンスを上げる方法を紹介します!
ぜひ、最後までご覧ください!
・サイトの表示速度が遅い方
・サイトのパフォーマンスが悪い方
・Google Page Speed Insightsでの数値が低い方
パフォーマンスが悪い…
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-54.png)
先日、ブロガー仲間からGoogle Page Speed Insightsというサービスを教えてもらい
自分のサイトドメインの状況を見てみたところ上の画像のように
携帯電話でのパフォーマンスが41点という結果になってしまいました…
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
めっちゃ低いじゃん…
このパフォーマンスはユーザーからそのサイトがどのくらい快適に閲覧することができるのか、
を0~100までで数値化したものです。
○になるためには最低でも90点以上必要なため
41点の現状では、
全然ユーザーが快適にページを閲覧することができていないということになります
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
なんとかしないと!
Google Page Speed Insightsは原因を教えてくれる!
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-150.png)
このサービスは、
![](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-141-150x150.png)
お前のサイトパフォーマンス悪いよ(笑)
どんまいww
とただ突き放すのではなく
なぜ、パフォーマンスが悪いのか
ロードするスピードが遅い原因などを教えてくれます
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-142.png)
原因も具体的で
例えば、JavaScript の実行にかかる時間の低減
というものがあり、
これを改善すると3.3秒も表示速度を短縮できる
のように具体的に改善したらどのくらい表示速度を上げられるのかも教えてくれます。
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
原因が分かると改善しやすいよね!
パフォーマンスを改善する方法
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-151.png)
では、パフォーマンスが悪い原因もわかったところで
原因を解決するためにサイトを改善していきましょう!
一番の原因であるJavascriptの実行に時間がかかっている
ということは、つまり
サイトの処理が多くて時間がかかっている
ということです。
これを改善するためには無駄な処理を省き処理する容量を減らす必要があります。
カルーセルを削除した
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-144-1024x643.png)
まず、処理が重くなる原因になりそうなカルーセルを削除してみました。
![](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/1_image-50.png)
カルーセル?
カルーセルというのは、
回転するブログカードのことでサイトの上部などに配置しておくと
いい感じのデザインになり流れてきた記事が読者の見たい記事なら
そこからの集客も見込むことができます。
しかし、このカルーセルめちゃくちゃ重い
サイトを開いたときにフェードインして
一定の時間が経ったらカードが違う列になるように回転する。
アニメーションのように滑らかに動くのでめちゃくちゃサイトが重くなります。
なので、カルーセルを思い切って外してみました!
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-145-1024x679.png)
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
なんかちょっと物足りない…
カルーセルをなくしたことによってサイトデザインが物足りない感じになってしまいましたが
ぼくのしているサーバーの契約でカルーセルを表示させるのは厳しかったですね。
削除後の数値
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/2_image-55.png)
カルーセルを削除することにより、
パフォーマンスの数値が59点まで上昇しました
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
やったー!
改善前の状態から18点も上昇したことになりますね。
カルーセルを配置している人の場合、
大幅にサイト表示速度が遅くなっている可能性があるので
サイトの表示速度が遅くて困っている場合は削除してみましょう
プラグインの削除
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-152.png)
次にしたのは使っていないプラグインの削除です
WordPressを長く使っていると、
あれもこれもと便利なプラグインをついたくさん入れてしまいますよね。
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
20個以上も入れちゃってた…
プラグインを入れているとそれだけ処理が重くなってしまいます。
絶対に必要なプラグインなら残していてもいいと思いますが、
もう、使っていなかったり
使わなくてもいいプラグインは削除することをおすすめします。
削除後の数値
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-140.png)
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
上がってる!
いらないプラグインや使用していないプラグインを削除したことにより
数値が59から63まで上昇しました
さっきに比べて上昇した数値は小さいですが、
表示速度がどんどん早くなっています。
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-147.png)
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-148.png)
PCの改善後の数値
ここまで紹介してきた数値はすべてモバイル表示での数値です。
パソコンでの改善前の数値の画像を撮るのを忘れてしまったのですが、
大体50後半だった気がします。
![](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/1_image-50.png)
なに忘れてんの!
そして、改善後の数値がこちらです
![](https://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/image-149.png)
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
95!?
モバイル表示ばかりに気を取られてパソコン表示を見ていなかったのですが、
ここまで上がっていたとは…
パフォーマンスや表示速度が思っていたよりもずっと上がっていました!
改善した効果があってよかったです!
いろいろ工夫して改善すれば
ここまで上がるかもしれないので、
皆さんも、いろいろ試して改善してみてください!
まとめ
・サイトのパフォーマンスや表示速度はGoogle Page Speed Insightsを使って確認することができる
・パフォーマンスが低いのは処理に時間がかかってページの表示に時間がかかるから
・カルーセルを削除したりプラグインを削除したりすることで改善できる
今回は、サイトのパフォーマンスやページの表示速度を上げる方法を紹介しました!
特にカルーセルの存在が大きかったですね
皆さんも、サイトに大きく関わってくるので
パフォーマンスや表示速度が悪くても放置せず、
迅速に対処しましょう!
![筆者](http://sub-blog.skyrinrin.com/wp-content/uploads/2024/03/cropped-651690c5a8e868e767d38d23ac392a8e.png)
この記事が少しでも参考になれたらうれしいです!
コメント