“サイトの表示速度”というのは、ユーザーに快適なWeb閲覧環境を提供するために、考慮しなければいけない項目のひとつです。
ページが表示されるのに時間がかかるサイトはストレスしか感じませんよね。
ユーザーにとって優しいサイトかどうかの指標になるので、SEO対策においても、表示速度の最適化は必須の項目でもあります。
、、、が。
わたしのブログ、表示速度の対策は後でしようと思っていたら、
Googleが提供している「PageSpeed Insights」での評価がえらいことになっていました 苦笑。
きゃーー。後回しにしていたツケが。。。
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=””] これはひどい、、、[/speech_bubble]
[su_spacer size=”30″]
というわけで今日はちょっとだけ、表示速度の改善に着手してみました。
[ad#co-1]Webページの読み込み時間を短縮することを目的とした無料ツールです。
サイトのコンテンツを分析して、改善ポイントを教えてくれます。
PageSpeed Insights
読み込みに時間がかかるサイトになってませんか？
気になった方はチェックしてみてね。
現状のサイト評価は？
まずはわたしのブログの今の評価から。
パソコンだと45点、モバイルだと38点。
非常にヤバイことになっていました😅
ちなみに、他にもページ速度を判定してくれるツールは色々あります。
有名どころだと、GTmetrix。
こちらのツールを使ってみたところ、下記のような結果に。
左がgoogle、右がyahooの速度評価を表しています。
こちらのツールではGoogleさんに高く評価されていますね 笑。
PageSpeed InsightsとGTmetrixの評価の違いが何なのかは今のところ謎、、、。
要検証。速度対策についてはまだまだ勉強が必要です。
読み込み速度改善のために入れているプラグイン
PageSpeed Insightsの結果は散々でしたが、何も対策をしていないわけではなく 笑、いくつかプラグインを入れています。
キャッシュ系
・WP Fastest Cashe
・001 Prime Strategy Translate Accelerator
画像圧縮系
・EWWW Image Optimizer
その他
・Better Delete Revision
・Lazy Load
・WP Hyper Response
キャッシュ系のプラグインは設定の煩雑さと不具合の多さで、今のところ設定が簡単で不具合もほとんど起こらなかったWP Fastest Casheに落ち着いています。
画像の圧縮プラグイン「Compress JPEG & PNG images」で一括最適化をしてみた
画像圧縮系プラグインには、EWWW Image Optimizerを使っているのですが、PageSpeed Insightsの評価を見ると、「画像を圧縮して最適化せよ！」と警告がされています。
なので今回は、画像圧縮を試みました。
使用したのは画像圧縮ツール「TinyPNG」のプラグイン「Compress JPEG & PNG images」。
PNG、JPEG画像を圧縮することが出来ます。
「TinyPNG」のプラグイン「Compress JPEG & PNG images」の設定
「外観」→「プラグイン」→「新規追加」から「Compress JPEG & PNG images」で検索をしてプラグインをインストール→有効化します。
※プラグインを追加するときには、念のためバックアップをとってから作業してくださいね。
次に、「設定」→「メディア」で、名前を入力してメール送信。
届いたメールにあるリンクをクリックして、API keyを取得します。
こんな画面に変わればOK。
続いて各種設定。
File compressionで、圧縮したい画像サイズにチェックを入れます。
無料で圧縮できるのが月に500枚までなので、Original image のみ、チェックを入れておきました。
Original imageは、UPした画像が設定する上限サイズを超えたときに圧縮と一緒にリサイズするよ、というものです。
「TinyPNG」プラグインで既にサーバーにある画像を一括最適化する
ここまでの設定で、新規でアップロードする画像は自動的に圧縮してくれるのでOKですが、今までの画像を圧縮する必要があります。
サイドメニューの「メディア」→「Bulk Optimization」で圧縮を行います。
500枚を越える場合は、プラグインではなくネット上のサービスを使いましょう。
TinyPNG：https://tinypng.com/
画像圧縮の効果はいかに！？
作業が完了したところで、再度PageSpeed Insightsで評価を見てみます。
ドキドキドキ。
モバイルで45→64に、パソコンでは38→54に改善されました。
うーん。数値としてはまだまだレッドゾーンですが、いくらかマシにはなりましたね 笑。
続いて、GTmetrix。
こちらは、google微増、yahooの速度評価がDランクからCランクにアップしました。
画像圧縮とサイト表示速度の検証まとめ
今回は画像サイズの改善を行いましたが、読み込み速度の高速化には、キャッシュの活用やCSS、html、JavaScriptファイルの縮小などなど項目が色々あります。
PageSpeed Insights の結果がまだまだ不十分なので、引き続き暇を見て、対策する予定。
次は、キャッシュを利用して高速化を狙いたいと思います。
[sp]
[ad#co-2]
[/sp]
