【JIN】のテーマで高速化!!~ パソコン93 モバイル55に大幅UP~
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_500,h_333/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/phone_2.jpg)
サイトの表示スピードが速いということの大切さはたくさんの方々が声を大にして言われています。
重い腰を上げて取り組んで効果的だった事をお知らせします。
離脱率がどうのこうのは、よく知っていらっしゃるでしょうから、ここは割愛(笑)しま~す。
Google Pagespeed Insights も知らない間に様変わりしていて、ビックリです。
プラグインになったんですね。
これはもう、表示スピードをこまめにチェックしろよ!というメッセージがビシビシ伝わってきますね・・・
更新される事に厳しくなってる気がするのは、私だけなんだろうか。
Contents
改善前の状態
何もしていなかった最初の状況です。
・Xサーバー使用中
・Xサーバー内での高速化はすべて行っている
・プラグイン33個
・JINのフォントは丸ゴシック
・画像はすべて圧縮したものを使用
・記事内に画像は少ない(ほぼアイキャッチのみ)
・背景画像は無し
・キャッシュ系プラグイン使用
色々と高速化はしているつもりだったんですよね・・・
【JIN】はキャッシュ系が嫌いなの
私が使っているのは、ヒツジさんの【JIN】です。
【JIN】はキャッシュ系のプラグインと相性が悪い事が知られています。
そうは言っても、キャッシュは貯めていたら良いこと無いです。
以前から2つのプラグインを入れていましたが、特に問題はありませんでした。
あ、Jet Packは表示が乱れてしまった経験があるので、削除しました。
現在採用しているのは
[box02 title=”キャッシュ系プラグイン”]・Autoptimize
・WP Fastest Cache[/box02]
このふたつです。
導入する時にいろんな記事を読んで、設定しましたがやはり素人のする事でした。
ふたつのプラグイン導入について、同じ方が解説してくださっているので、非常に分かりやすかったし、安心でした。
見直しし、再設定しました。
詳しい設置方法はソルティーさんのブログがとってもよく分かるので、参考にさせていただきました。
[blogcard url=”https://pasolack.com/wordpress/wp-fastest-cache/”]
[blogcard url=”https://pasolack.com/wordpress/autoptimize/”]
最初の状態
記事はパソコンで書きます。
書いた後、プレビューを表示させるためには更新ボタンを押さないと、表示されない状態でした。
スマホからはなかなかサイトが表示されず、イライラしてくる始末。
パソコンで見ると 76 とまずまずですが、モバイルは衝撃の 28 です。
すでにAutoptimizeとWP Fastest Cacheは導入した状態でこれ。
そこで、BJ Lazy Loadを停止させてみました。
すると
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_400,h_416/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/cut_19-30x30.jpg)
な、なんとスコアが下がってしまいました。
BJ Lazy Loadはやはり必要なんですね。
【JIN】のカスタマイズを最低限にしてみる
JINはカスタマイズが楽しいテーマです。
自分好みにカスタマイズしていると、ドンドン欲が出てきて色々やっちゃいますよね。
しかし、これって自己満足の世界。
読んでくれる人が読みやすければ良いのでは無いのか?
シンプルにすれば、表示速度は上がるはず。
でも、それじゃテーマを【JIN】にした意味がないじゃん。
そんなジレンマと闘いながら、妥協できる部分はデフォルトにしました。
・SNSはしていないので、非表示にする
・フッターにはコピーライトのみ
・アニメーション機能はoff(元々offでした)
・文字フォントはデフォルトでも丸ゴシックでも変化無し
さらに
・人気記事は削除した
・カテゴリーを整理して減らす
・タグも最小限にする(70%くらい消しました)
・次の記事の表示をoffにする
これらを行ってみて
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_400,h_253/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/cut_20-30x19.jpg)
モバイル表示はいくぶんか改善されましたが、パソコンは変わっていませんね。
では、次です。
プラグインを整理する
本当はこれを一番にするべきだったと思います。
プラグインはなんと33個もありました・・・
どう考えても入れすぎ状態です。
いきなり停止とか、削除とかは怖いので、1個づつ何のプラグインなのか調べて書き出しました。
同じようなプラグインはひとつにするためです。
キャッシュ系のプラグインが複数入っていたので、上記のふたつ以外は停止して動作を確認しつつ削除しました。
人気記事は他の統計(アナリティクスとかサーチコンソールとか)で分かるので、それらも削除。
文字装飾はほとんどしないので、それらも削除。
必要時のみしか使わないプラグイン(記事のコピー、複数サイトからの引っ越し)などは、必要時のみインストールする事にして、削除しました。
停止だけだとやはり、重たくなるという情報がありましたので。
どうしても消せないもののみ(それでも20個もありますが)にしました。
すると
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_400,h_248/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/cut_21-30x19.jpg)
モバイルは35→37 パソコンは64→81へと改善されました!!
プレビュー表示もサクッとできますし、スマホからも待つこと無く表示されています。
やっぱり、重たい原因はプラグインだったんですね・・・
画像は大問題
大きな画像をUPするのは、表示スピードに大きく影響するのはよく分かっています。
それプラス読者は画像が必要なのだろうか??
小難しい文章が延々と続く記事は、そもそも最後まで読まないですよね。
私は読みづらい文章だと、いくら内容が良かろうとも離脱します。
ちょっとブレイクのために画像が必要だとおっしゃる方もいますが、が、画像は重いんです!
どんなに圧縮したとしても、写真は非常に重い。
ヒツジさんやサルワカさんのサイトを見れば理解しやすいと思います。
写真の画像が無いんです。
イラストはいっぱいありますが、写真画像がまったく無い。
そして、表示は爆速です。
写真画像にこだわるか、センスの問われるイラストを多用するか。
私の課題です。
追記です。
画像の圧縮についてあらためて調べてみました。
今までは画像をダウンロードするときにサイズは640pxにしていたので、そのまま使用していました。
サイズ的にはこれでも良いのかもしれません。
しかし、パソコンでサイトを見る場合、記事のエリアで600もあれば、ほぼいっぱいに表示されますね。
ここまでいっぱいに表示しなくてもいいかな?と思いまして、500pxに小さくしました。
さらに画素数は触っていなかったことに気づいたので、画素数も落としました。
幅が500pxくらいなら高画質である必要は無いのでは?と思ったからです。
使ったものは
『JPEG Optimaizer』でした。
です。
使いなれたものがあれば、それをお使いください。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_500,h_239/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/cut_53-30x14.jpg)
上から、参照をクリックすると、パソコン上に保存されている画像の一覧が表示されます。
使いたい画像をクリックして選択します。
次に、Compress Image を70~75の間で設定します。
65がデフォルトです。99が最高画質というわけですねー。
その下の、Resize Photo を表示させたい大きさに指定します。
私はアイキャッチは500で、挿入画像は横幅に合わせました。
Enterキーを押すとリサイズされた画像が表示されます。
60%~70%近くリサイズされていることが新しく表示された画像の下に表示されます。
その画像に名前を付けて保存します。
その画像をアップロードしていきます。
ちなみに過去にアップロードした画像のすべてをリサイズしました。
もちろん記事のすべてのメディアもすべて入れ替えました。
ものすごい手間でした・・・
1週間近くを費やしてしまいました。
リサイズした結果
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_550,h_298/https://xn--u9jz83ld0v.com/wp-content/uploads/2019/08/cut_54-30x16.jpg)
見てください!
パソコンは93です。グリーンのゾーンに入っています。
モバイルで55です。やっとオレンジゾーンに入ることに成功しました。
まとめ : 断捨離は必要
常時使わないプラグインは捨てるに限りますね~。
サイトが自分の自己満足になっていないか?ユーザーに優しいか?
初心に返って見直して見て下さい。
つかっていないCSSの~はWord Pressを使っているので、諦めるか無視ですね。
ちょっと手が出せない領域です。
専門的なことは何一つ分かっていない、ほぼ素人でもここまで改善することが出来ました。
一番速度表示に影響を及ぼしていたのは、やはり画像の重さだったようですね。
プラグインの整理と画像の圧縮だけでずいぶん改善しました。
あとの課題はモバイル表示速度でしょうか。
Googleさんからはモバイルフレンドリーですと解析されているので、しばらくは様子見ですね。
事前にバックアップ取っておくとか、実行は自己責任で、なんていうことは理解されている前提ですよ^^
時間はかかりますけど、表示速度が速まるって思っていた以上にうれしいものでした。