ページスピードというと記事作成やブログのレイアウト作成に比べると軽視されがちですが、検索結果で上位表示されるために最低限必要になってきます。
サイトの表示スピードはSEO対策でも重要なものです。
既に稼げているサイトに関しては定着ユーザーがいますが、作りたてのサイトはまだまだ検索結果でユーザーを獲得するしかありません。
もし既にページスピードを意識している場合は、PageSpeedInsightsをメインに使用しているかと思いますが、GTmetrixとThink with Googleも使用しましょう。
本記事では、各ページスピード計測サイトの活用方法とページスピードが遅くなる原因となっている部分に関して解説をしていこうと思います。
この記事から得られること
- ページスピード改善の原因を探りやすくなります。
- ページ評価でなく、実際のページスピードを実測できます。
- 盲点となっているページスピードが低速になる原因がわかります。
サイトの表示速度は3サイトで改善しよう！遅い原因は意外なところに
ぼくが普段使用しているページスピード計測サイトを3サイト紹介します。
それぞれのサイトで特徴が変わってくるので、スピードを早期解決出来るように活用してみてください。
PageSpeed Insights
PageSpeed Insightsは定番のページスピード計測サイトです。
Googleが運営しているDeveloperサイトで無料でページスピード計測が可能です。
しかし、指摘される事項は『どこの、なにが、どうなっている』という深いところまで知るのが正直難しいので、PageSpeedInsightsだけ使用してページ速度改善をするのは、サイト運営にある程度なれていないと厳しいです。
GTmetrix
GTmetrixはPageSpeed Insightsと同じくらい有名なページスピード計測のサイトですが、サイト表記が英語表記になっているためPageSpeed Insightsのほうが話題になることが多いです。
しかし、PageSpeed Insightsと比べてGTmetrixのほうが、より詳しくページスピードのネックとなっている原因が確認しやすくなっています。
GTmetrixは通常使用だと、PCのページスピードの計測しかできません。
しかし、無料の会員登録を行なうことによってモバイルスピードの計測も出来るようになります。
無料会員登録を先に済ませておいて、PCのペーシスピードでAクラスを取得出来るくらいまで改善できたら、モバイルスピードを改善していく手順で改善していくのが最も良いと思われます。
Think with Google
Think With GoogleはPageSpeedInsightsと同様、Googleが運営しているページスピード計測サービスです。
あなたのサイトが表示されるまでのモバイルスピードを、3G回線と4G回線で何秒かかるか計測することができます。
ちなみにThink with Googleは、実際にモバイルページが何秒で表示されるかが簡単に確認することが出来るので、一番手軽にページスピードを計測するのに役立ちます。
ページスピードのネックとなっているもの
ぼくの経験上、ページスピードが遅くなる原因となりやすいものを紹介します。
意外と盲点となっているものもあるので、確認してみると改善策が見るかるかも知れません。
プラグインはそんなに関係ない
プラグインがページスピードに影響しているというのは、経験上あまり関係ないように思います。
ぼくが今までスピードが低速になる原因となっていたプラグインは、SimpleSSLというSSLプラグインとJetpackです。
それ以外のプラグインで低速の原因となったものは無かったので、明らかに起動後に低速になるようであれば見合わせたほうが良いかも知れません。
Google AdSense
これは案外盲点なのではないでしょうか。
GoogleAdSenseはブログやサイトの収益で大きなところを締めている人も多いかと思います。
しかし、GoogleAdSenseに関しては外部から導入しているサービス扱いになるため、自分のサーバーの中に導入して使用しているものと比べると表示に時間がかかってしまうものです。
これは少し考えないといけない問題です。
SEOを意識して検索結果からのユーザー流入を念頭に置いているなら、トップページやサイドバーに設置しているAdSense広告はなくしたほうがサイトスピードが上がります。
そのため、AdSense広告を記事中にのみ表示させる方がサイトスピードも上昇し、Googleからの評価も上昇するためアクセス母数が上昇し収益が上がります。
サイトスピードを取るかAdSenseの表示割合をとるかはあなた次第となってしまいますが、ぼくはGoogleの評価を上げてアクセス母数を増やして記事内でAdSenseアプローチをしたほうが賢い選択だと思いました。
Java Scriptのヘッダー配置
Javascriptは出来るだけヘッダーでの配置ではなく、フッターへ持っていくようにしたほうがページスピードが早くなりやすいです。
よくヘッダーに追加するものはFontawesomeの導入ですが、FofntAwesomeもフッターに移動させることでページスピードが上がります。
<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
var l=document.createElement("link");// link要素をlに代入。
l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
l.href="fontawesomeの導入コード入力部";// lにhref属性を付与。
var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>
上記のコードはHODALOGさんからコードをお借りしました。
この『fontawesomeの導入コード入力部』に通常ヘッダーに導入するCSSのコードを入力します。
そして、このコードをヘッダーからフッターの</ body>手前に移動することで、Javascriptの移動作業は完了です。
GoogleのCDN
GoogleのCDNからJqueryを読み込んで、サイトの動作に関わる素材を導入している場合が多いと思います。
このCDNはGTmetrixで『https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js』のように表示されているものです。
恐らく、URLが重複してサイトにアプローチされていますというような警告が出るかと思いますが、これに関してはまだ解決策を発見できていない状態です。
しかし、このCDNからの配信がURL正規化出来るようになるとサイトスピードが向上するのは間違いないので、ぼくもそうですが解決策を今後も探していったほうが良いかと思います。
CSSの縮小
CSSをの縮小もよく警告される部分です。
Autoptimizeやキャッシュ系のプラグインで対処可能となりますが、CSSを縮小することによってサイトのデザインが反映されなかったりと弊害が出てきてしまう可能性があります。
そのため、プラグイン後にサイトのレイアウトが崩れたりしていないかどうか確認しつつ、ページスピードを向上させていくのがベストです。
原因となっている部分をピンポイントで改善しよう
ページスピードを改善させることはサイト運営に慣れていない場合、とても骨の折れる作業になります。
そのため、なるべく簡単なところから改善させていくことが必要です。
CSSの圧縮やJavascriptをフッターに移動する等は簡単にできるので、GTmetrixでネックとなっているところをピンポイントで改善させていきつつ、PageSpeedInsightsで効果測定を合わせてやっていくのが良いかと思います。
手軽にページスピードを改善する方法としては、下記の記事を参考にしてもらえるとページスピードが向上する手助けになってくれるはずです。
-
PageSpeedInsightsでモバイルだけ遅い人必見！速度が2倍上昇する？！
続きを見る
