2018年7月より、Googleが「スピードアップデート」を導入しました。
モバイルで表示速度の遅いウェブサイトはGoogleランキング順位に影響を及ぼすというものです。
いつも勉強させて頂いている海外SEO情報ブログより。
→Googleかスピードアップデートを導入
今までも、もちろん表示速度はGoogleランキングの順位に影響はあったのですが、Googleが直接参照していたのはなんと「PC表示時」のみの速度だったそうです。
要するに今までは、モバイルで検索したときも、PCページの表示速度を参照してランキングが決まる状況でした。
これってちょっとおかしな状況だったのです。
今やほとんどのサイトがモバイル端末からのアクセスが多数になっている時代。
↑かなり多くのサイトがこのような割合になっていると思います。
また、当方がお客様からサイト制作のご依頼を受ける時、たまーに
スマホ表示は軽快になるように作り、
逆にPC表示はしっかり作り込んで高級感を出して欲しい
という要望があるときも。
その場合にPC表示速度だけ測定されてしまうと、完全に遅いサイトということになってしまうので、やだなーと思ってました。
また、一度は体験されたことがあるかとは思いますが、
サイトの表示速度が遅いとブラウザ閉じますよね。
直帰率が上がる一方、アンチSEO状態です。
というわけで、ウェブサイトは軽く！
ページ速度を上げる対策は、サイト立ち上げ初期から意識すると楽になります。
早速サイト表示スピードの確認方法と、
すぐに取り入れられる、表示スピードを上げちゃう方法を紹介したいと思います。
まずはサイトの表示速度を確認！「Google PageSpeed Insights」
まずは自分のウェブサイトのスピード測定をしてみましょう。
Googleが提供している『PageSpeed Insights』というツールがあります。
使い方は簡単。
サイトのURLを入れて【分析】ボタンをクリックするだけ。
そうすると、ページの速度が
『モバイル』表示時と、『パソコン』表示時で出てきます。
例えばこのサイト「人生ノマド」の場合でお話ししますね。
最高が100点満点で、点数で診断されます。
ページ速度 対策を行う前
◆モバイルの場合
モバイル表示の得点は74点でした。
◆パソコンの場合
パソコン表示の時の得点は29点。
そしてこのツールを眺めていると、「最適化についての提案」という項目があります。
そこに「サーバーの応答時間を短縮する」「レンダリングについて」「画像の最適化」「ブラウザのキャッシュを活用」という項目があるのですが、
まずは手始めに
『画像の最適化』をしてみましょう！
画像を圧縮してサイトを軽快に！おすすめプラグイン『Imagify』
これから追加する画像ファイルを圧縮しながら入れてくれるのはもちろん、
すでに記事などに使っている画像ファイルも後から簡単に圧縮できるプラグイン、『Imagify』。
すでにワードプレスのメディア内に画像をたくさん追加しちゃっていると、
またリサイズなどを行ってアップロードして画像に貼り直すとなると…気が遠くなりますよね。
というわけでワードプレスの「メディア」から一括でサイズ圧縮が出来るプラグインは助かります。
「Google PageSpeed Insights」で改善指摘された画像のみ圧縮してみる
PageSpeed Insightsで出てきた「最適化についての提案」の「画像の最適化」を開きます。
すると「この画像を圧縮すると、これだけ削減出来ますよー」という画像一覧が出てきますので、ここに表示されている画像を圧縮します。
画像を圧縮する方法は『Imaglfy』をインストールして入れば簡単。
ワードプレスの「メディア」を開き、上記の一覧に出てきた画像の【Optimize】ボタンを押します。
たくさんの画像を一度に圧縮したい時は、左端のチェックボックスにチェックを入れて、一括操作で【Optimize】を押します。
ちなみに圧縮率の変更と、その圧縮によって画像がどれくらい変わるかの比較が『Imagify』の設定画面でできます。
（プラグイン→インストール済プラグイン→ImaglfyのSettingから）
圧縮率はNORMAL、AGGRESSIVE、ULTRAの段階になっていて、
下の「Try the Visual Comparison」を押すと視覚的に圧縮後の画像の劣化状態がわかるので、
ご自身の好みやサイトの意向（写真のキレイさ重視のサイトかなど）設定されるといいかなと思います。
「画像の最適化」後のページスピード数値は上がった？
『Google PageSpeed Insights』で「この画像を最適化するといいですよー」と出てきた画像を、上記の方法で圧縮したあと、スピードがどれくらい早くなったか？
見てみたいと思います。
◆モバイルの場合
画像圧縮前 74点
→画像圧縮後 87点
おお！！かなり改善しましたね。
◆パソコンの場合
画像圧縮前 29点
→画像圧縮後 76点
おおお！！これはめちゃくちゃ改善しました！
点数で教えてくれるのもやる気が出る
ワードプレス内の写真を全部圧縮してみたらページスピードはどうなる？
全部画像圧縮しちゃったら一体どうなっちゃうのーーー！
ということでやってみました。
『Imagify』のプラグインを使えば、メディアのライブラリから簡単にできるので、やっちゃいました。
が、私の場合だと、画像が260枚くらいあったのですが
「無料版だと今月の使用可能容量が足りません」
と出ちゃったので、1GBで9.99USDの追加をいたしました。
しかしこの『Imagify』は圧縮スピードが速くて快適です！
実は他のファイル圧縮プラグインを使ったことがあるのですが、同じくらいの枚数（260枚くらい）を圧縮しようとしたら数時間かかりましたね。。
260枚ほどの画像を全部圧縮した後のページスピード結果
◆モバイルの場合
画像圧縮前 74点
→全ての画像（260枚）圧縮後 91点
かなり改善されました！！
◆パソコンの場合
画像圧縮前 29点
→全ての画像圧縮後 77点
最適化を推奨された画像数枚だけを圧縮した時と、全部圧縮した時では1点しか変化がありませんでしたが、まあ改善してますよね。
まとめ。http://の時の注意
『PageSpeed Insights』の結果に書いてある通り、ページスピードを上げるにあたっての施策は画像の圧縮だけでなくて、ブラウザのキャッシュを利用した表示方法にしたり、サイトの応答時間を短くしたり、CSS/JavaScriptを縮小したり…とたくさんの方法があります。
が、全部やってたら大変。
そしてキャッシュ系のプラグインを入れると、なぜかインデックスしなくなったりする悪さをすることがたまにあるので注意です。
というわけでとりあえず取り組みやすいところとして
- 画像を圧縮する、サイズを減らす
- 画像はjpegにする
のがオススメです。
画像がjpegの方が読み込みが早いそうです。
個人的にはpngの方が、ヘッダー画像などは文字が滑らかに表示されやすいので好きなのですが、今後はjpegに出力しまふ。。
また、今回サンプルとして使った当サイト「人生ノマド」のURLは
http://
の方なんです。
当サイトはSSL対応してますので、これをhttps://〜 で分析してみると
ちょっとだけ低めの数値が出ます。
でもこれはしょうがないというか、
それでもGoogleはSSL対応のサイトを優遇するそうなので、むしろ表示スピードを優先させるよりも、SSLに対応させておいた方がいいのかと思います。
ぜひあなたのサイトも確認してみてくださいね！
あさみのLINE公式を友だち追加して10大特典をGET♪
↓↓↓
