SEOの為にもサイトの表示速度を極限まで上げたいですよね。
画像を使わなければ90点台も容易ですが、一切画像を使わないなんてサイトのデザインイメージや、記事のイメージが視覚的に全く入ってこなくなるので、そんなことは絶対に出来ませんよね。
今回はきっちり「大きめの画像を4つ使用」してもしっかり「PageSpeed Insights」で99点を取れたので、その試した方法を厳選してご紹介します。
目次
まずはスピードチェックの結果を
まずは下記サイトで表示速度をチェックします。
私がチェックしたページはこちらで、そこそこの画像は使用しているので良きサンプルになるかと思います。
チェックしたページ
Googleのスピードチェック結果 PC表示
PC版ではご覧の通り99です。
2019/09/08チェックの結果
Googleのスピードチェック結果 スマホ表示
スマホ版はやや点数を落としています。
5点ぐらいの点数は測定したときに誤差がありますが、恐らくちょっとした広告の差でしょうか。
GTmetrixの判定
皆さんのサイトの結果はどうでしょうか。
基本的には80点以上あれば十分と言われています。
90以上を目指すのは自己満足の世界です。
結局は記事の中身、コンテンツが重要になってきますので。
ちなみに、表示速度の対策を全くしていなかった時は50点台と酷い状況でした。
それでは以下大きくポイントが変わった4つの方法のご紹介です。
苦渋の決断「WordPress Popular Posts」の非表示
人気の記事表示を表示させる「WordPress Popular Posts」は、今伸びている記事をわざわざ「Analytics(アナリティクス)」でチェックしなくとも、トップページから一目で把握できるので個人的にはかなり必要だったプラグインでしたが、苦渋の決断でしたが外しました。
人気の記事を表示させたいだけであれば「functions.php」を編集し、表示させる方法があります。
しかし、その情報を取得し表示させること自体が遅くなるので辞めておきました。
特に人気記事のサムネ画像を表示させるとかなり遅くさせる原因に繋がるので、どうしても表示させたいならタイトル名のみにした方が良いかと思います。
ポピュラーポストのプラグインを完全には切っておらず、有効化にはしています。
ウィジェットから外しているだけです。
無効化しなければ、一応ダッシュボードからその日伸びている記事の情報は得られるのでそうしています。
完全に無効化にしないで意味あるの?と思いますが、意外とブログの表面自体に表示しなければプラグインを有効化のままでも速度に影響はありませんでした。
ちなみにポピュラーポストを非表示にする前は80点ぐらいが限界でした。
約10点ぐらい変わるかと思います。
それほど「WordPress Popular Posts」は重荷になります。
プラグイン「BJ Lazy Load」の起用
「BJ Lazy Load」は画面外の画像は非表示にしておくプラグインです。
スマホの画面に、イメージ画像がスクロールして到達した時点でフェードインされます。
サイトの高速化において有名なプラグインの一つですが、やはりこれもかなり重要です。
このプラグインでも10点ぐらい変わるかと思います。
「Autoptimize」でコードの圧縮
右クリックで「ソースを見る」を押したとき、改行もスペースも全く無く文字が詰められているサイトがたまにあると思います。
そういったサイトはきっちりサイトの高速化を実施しています。
コードの圧縮は「Autoptimize」というプラグインがおすすめです。
こちらも有名どころです。
設定方法は以下の画像の通りです。
- <head> 内へ JavaScript を強制
- try-catch の折り返しを追加
- すべての CSS をインライン化
私のブログの場合、上記3点以外は全部チェックを入れてしまっています。
サイトによってCSS/jsの関係で表示にバグが発生することもあるので、何か表示がおかしければ怪しいチェックボックスだけ外していけばOKです。
ちなみにこちらも10点ぐらい変わります。
「EWWW Image Optimizer」で画像の圧縮
やはり一番表示速度を遅くしてしまうのが画像です。
常日頃から画像の圧縮を意識している、Webクリエイターの方は問題ないと思いますが、特に何も気にせず画像をアップロードする一般の方は「EWWW Image Optimizer」で画像の圧縮をしておくのを強くおすすめします。
こちらも有名どころです。
使い方は下記画像の一括最適化から「最適化されていない画像をスキャンする」を押すだけです。
矢印のバーは動かさなくても大丈夫です。動かすだけ多く圧縮してくれますが、物凄い時間が掛かります。
基本的にはデフォルト値で十分です。
この画像圧縮作業も、全く気にせず今までそのまま画像を使用していた場合15点以上は変わってきます。
また、今後アップする画像は以下のサイトで圧縮してからアップロードすることを強くおすすめします。
このブログのトップページメインビジュアルの「オーロラの画像」は、cssでサーバ内の「img/main_bk.jpg」のようなパスでbackground:url()で指定しているので、「EWWW Image Optimizer」の圧縮対象にはなりません。
なので、上記2つのサイトから画像を圧縮して再度アップしています。
つまりテーマ内の細かなデザインの画像は「EWWW Image Optimizer」の対象にならないので注意が必要です。
ただ、ネットに配布されているようなWordPressのテーマであればサイズのでかい画像は使用されていないと思いますが、オリジナルテーマで作成されたサイトの画像は要チェックです。
プラグイン無しでキャッシュ対策
上記のサイトの方法でWordPressサーバ内の「.htaccess」にコピペで一文を加えるだけで、サーバにキャッシュを残すことが出来るのでこの方法がおすすめです。
「.htaccess」は不可視ファイルなのでMacであれば「⌘+Shift+.(ドット)」で表示されます。
プラグインを入れてキャッシュ対策するよりは良いかと思います。
最後に使用テーマと細かな点はスルーで
細かい設定について
あとは使用しているサーバや、PHPバージョン、など細かいことがいくつかありますが、すぐにでも取り掛かれて点数を上げれるチェックポイントは上記5点です。
細かい点とは言え実は「サーバ」がスピードチェックにおける点で一番大きかったりするのですが、サーバの変更はサーバ内の全サイトお引越しになるので、なかなかそう簡単にも行かないので省いています。
ちなみに、このブログのサーバは「XSERVER」です。
今一番速いと言われているのは「ConoHa Wing」がおすすめです。
WordPress使用テーマについて
このブログのテーマは「AFFINGER4(アフィンガー)」です。
「AFFINGER5」ではありません。
このブログを再開する以前に購入した物なので4のままですが、速度に関しては旧テーマでも十分かと思います。
追記
AdSense広告などを複数付けると、本来93点以上あったページも50点台まで落ちていました。
PINコードが届き、このブログにGoogleAdSenseを数個付けたところ一気に得点を落としました。(チェックした時はネンド広告のみ)
それで調べたのですが、90点以上あると謳っている記事のブログやサイトを複数件チェックしたところ、みんなスマホは40点台以下でした。
それどころか中には、PC版も30点台だったり「GTmetrix」のチェック判定が「F」のサイトがSEO上位に表示されていました。
時が経ち放置されていて対策が疎かになっているのもあると思いますが、結局のところ速いと謳っているブログやサイトのスマホの点数は、速くても広告有りで「40点台〜50点台」なので、今現状スマホの表示速度が広告有りで40点以上あればそれは十分なのかと思います。
つまり、広告を外せば一番手っ取り早くグーグルのスピードテストは点数を上げれるということです。
広告を外すのが厳しいという場合は、スマホ表示40~50点あれば十分かと思います。
アドセンス有りで60点以上あればそれはもうめちゃくちゃ速いかと思われます。
90点台のサイトはちらほらありましたが、画像、広告無しだからできるパターンのみでした。
特にGoogleAdSenseの「adsbygoogle.js」を読み込むとかなり点数は落ちます。
a8などの広告はそこまで落ちませんが、まぁ点数を落とすのには変わりないです。
一応別サイトにてテーマ「テーマ/Luxeritas」「サーバ/エックスサーバー」「a8広告3枚」でスマホ90点以上を達成しました。