【JIN】のテーマで高速化!!~ パソコン93　モバイル55に大幅UP~

サイトの表示スピードが速いということの大切さはたくさんの方々が声を大にして言われています。

重い腰を上げて取り組んで効果的だった事をお知らせします。

離脱率がどうのこうのは、よく知っていらっしゃるでしょうから、ここは割愛（笑）しま～す。

Google Pagespeed Insights も知らない間に様変わりしていて、ビックリです。

プラグインになったんですね。

これはもう、表示スピードをこまめにチェックしろよ！というメッセージがビシビシ伝わってきますね・・・

更新される事に厳しくなってる気がするのは、私だけなんだろうか。

改善前の状態

何もしていなかった最初の状況です。

色々と高速化はしているつもりだったんですよね・・・

【ＪＩＮ】はキャッシュ系が嫌いなの

私が使っているのは、ヒツジさんの【ＪＩＮ】です。

【ＪＩＮ】はキャッシュ系のプラグインと相性が悪い事が知られています。

そうは言っても、キャッシュは貯めていたら良いこと無いです。

以前から２つのプラグインを入れていましたが、特に問題はありませんでした。

あ、Ｊet Packは表示が乱れてしまった経験があるので、削除しました。

現在採用しているのは

[box02 title=”キャッシュ系プラグイン”]・Autoptimize

・WP Fastest Cache[/box02]

このふたつです。

導入する時にいろんな記事を読んで、設定しましたがやはり素人のする事でした。

ふたつのプラグイン導入について、同じ方が解説してくださっているので、非常に分かりやすかったし、安心でした。

見直しし、再設定しました。

詳しい設置方法はソルティーさんのブログがとってもよく分かるので、参考にさせていただきました。

[blogcard url=”https://pasolack.com/wordpress/wp-fastest-cache/”]

[blogcard url=”https://pasolack.com/wordpress/autoptimize/”]

最初の状態

記事はパソコンで書きます。

書いた後、プレビューを表示させるためには更新ボタンを押さないと、表示されない状態でした。

スマホからはなかなかサイトが表示されず、イライラしてくる始末。

　　　　　　　　　　　　　　　　　パソコンで見ると　７６　とまずまずですが、モバイルは衝撃の　２８　です。

すでにAutoptimizeとWP Fastest Cacheは導入した状態でこれ。

そこで、BJ Lazy Loadを停止させてみました。

すると

な、なんとスコアが下がってしまいました。

BJ Lazy Loadはやはり必要なんですね。

【ＪＩＮ】のカスタマイズを最低限にしてみる

ＪＩＮはカスタマイズが楽しいテーマです。

自分好みにカスタマイズしていると、ドンドン欲が出てきて色々やっちゃいますよね。

しかし、これって自己満足の世界。

読んでくれる人が読みやすければ良いのでは無いのか？

シンプルにすれば、表示速度は上がるはず。

でも、それじゃテーマを【ＪＩＮ】にした意味がないじゃん。

そんなジレンマと闘いながら、妥協できる部分はデフォルトにしました。

さらに

これらを行ってみて

モバイル表示はいくぶんか改善されましたが、パソコンは変わっていませんね。

では、次です。

プラグインを整理する

本当はこれを一番にするべきだったと思います。

プラグインはなんと３３個もありました・・・

どう考えても入れすぎ状態です。

いきなり停止とか、削除とかは怖いので、１個づつ何のプラグインなのか調べて書き出しました。

同じようなプラグインはひとつにするためです。

キャッシュ系のプラグインが複数入っていたので、上記のふたつ以外は停止して動作を確認しつつ削除しました。

人気記事は他の統計（アナリティクスとかサーチコンソールとか）で分かるので、それらも削除。

文字装飾はほとんどしないので、それらも削除。

必要時のみしか使わないプラグイン（記事のコピー、複数サイトからの引っ越し）などは、必要時のみインストールする事にして、削除しました。

停止だけだとやはり、重たくなるという情報がありましたので。

どうしても消せないもののみ（それでも２０個もありますが）にしました。

すると

モバイルは３５→３７　パソコンは６４→８１へと改善されました！！

プレビュー表示もサクッとできますし、スマホからも待つこと無く表示されています。

やっぱり、重たい原因はプラグインだったんですね・・・

画像は大問題

大きな画像をＵＰするのは、表示スピードに大きく影響するのはよく分かっています。

それプラス読者は画像が必要なのだろうか？？

小難しい文章が延々と続く記事は、そもそも最後まで読まないですよね。

私は読みづらい文章だと、いくら内容が良かろうとも離脱します。

ちょっとブレイクのために画像が必要だとおっしゃる方もいますが、が、画像は重いんです！

どんなに圧縮したとしても、写真は非常に重い。

ヒツジさんやサルワカさんのサイトを見れば理解しやすいと思います。

写真の画像が無いんです。

イラストはいっぱいありますが、写真画像がまったく無い。

そして、表示は爆速です。

写真画像にこだわるか、センスの問われるイラストを多用するか。

私の課題です。

追記です。

画像の圧縮についてあらためて調べてみました。

今までは画像をダウンロードするときにサイズは640ｐｘにしていたので、そのまま使用していました。

サイズ的にはこれでも良いのかもしれません。

しかし、パソコンでサイトを見る場合、記事のエリアで600もあれば、ほぼいっぱいに表示されますね。

ここまでいっぱいに表示しなくてもいいかな？と思いまして、500ｐｘに小さくしました。

さらに画素数は触っていなかったことに気づいたので、画素数も落としました。

幅が500ｐｘくらいなら高画質である必要は無いのでは？と思ったからです。

使ったものは

『JPEG Optimaizer』でした。

http://jpeg-optimizer.com/

です。

使いなれたものがあれば、それをお使いください。

上から、参照をクリックすると、パソコン上に保存されている画像の一覧が表示されます。

使いたい画像をクリックして選択します。

次に、Compress Image　を70～75の間で設定します。

65がデフォルトです。99が最高画質というわけですねー。

その下の、Resize Photo　を表示させたい大きさに指定します。

私はアイキャッチは500で、挿入画像は横幅に合わせました。

Enterキーを押すとリサイズされた画像が表示されます。

60％～70％近くリサイズされていることが新しく表示された画像の下に表示されます。

その画像に名前を付けて保存します。

その画像をアップロードしていきます。

ちなみに過去にアップロードした画像のすべてをリサイズしました。

もちろん記事のすべてのメディアもすべて入れ替えました。

ものすごい手間でした・・・

１週間近くを費やしてしまいました。

リサイズした結果

見てください！

パソコンは93です。グリーンのゾーンに入っています。

モバイルで55です。やっとオレンジゾーンに入ることに成功しました。

まとめ　：　断捨離は必要

常時使わないプラグインは捨てるに限りますね～。

サイトが自分の自己満足になっていないか？ユーザーに優しいか？

初心に返って見直して見て下さい。

つかっていないCSSの～はWord　Pｒｅｓｓを使っているので、諦めるか無視ですね。

ちょっと手が出せない領域です。

専門的なことは何一つ分かっていない、ほぼ素人でもここまで改善することが出来ました。

一番速度表示に影響を及ぼしていたのは、やはり画像の重さだったようですね。

プラグインの整理と画像の圧縮だけでずいぶん改善しました。

あとの課題はモバイル表示速度でしょうか。

Googleさんからはモバイルフレンドリーですと解析されているので、しばらくは様子見ですね。

事前にバックアップ取っておくとか、実行は自己責任で、なんていうことは理解されている前提ですよ^^

時間はかかりますけど、表示速度が速まるって思っていた以上にうれしいものでした。

momoko

シンママ／ナース/ブロガー

TwitterFacebookInstagramLINE

ふたりの男の子がいる現役ナース＆シンママです。
仕事も子育てもMAX頑張ってます。

でもでも、息抜きもしたいし愚痴だってこぼしたい。 自分らしく生きて行きたいなぁ。