こんにちは森口です。
今回はSEO対策でチェックしておくべき項目を皆様にご紹介できたらと思います。
今回はサイトの高速化編についてお話しできたらと思います。
それでは参りましょう。
通信量を削減していますか？
HTML/CSS/JavaScriptなどのテキストファイルはminify/gzipに圧縮しましょう。
画像はJPEG/PNG/GIFの中から適切な圧縮形式を選択した上で、メタデータ削除などの圧縮処理をかけましょう。
ブラウザの画面外の画像をダウンロードさせないために、lazy loadを適用しよう！
通信回数を削減していますか？
HTTP/1.1を採用している時は、通信回数の削減が表示速度の高速化につながります。
CSS/JavaScriptは１つのファイルに結合し、アイコン画像はCSSスプライトを利用しましょう。
ページ固有のCSS/JavaScript/画像はインライン化します。
通信距離を短くしていますか？
ユーザーの居住地と地理的に近いサーバーを利用しましょう。
CDNの導入もオススメします。
レンタリング速度を高速化していますか？
CSSはhead要素で読み込ませること。可能ならファーストビューで利用するCSSのみhead要素に記載し、
それ以外はbody要素の末尾で読み込ませること。
CSSの解析を高速化するために、id名やclass名のみで要素を指定できるようにコーディングしましょう。
また、JavaScriptはbody要素末尾に読み込ませ、async/defer属性を付与すること
画像のレイアウトもwidthとheightの指定も忘れずにすること
Resource Hintsを利用してリソースを事前取得してますか？
Resource Hintsには事前にDNSをルックアップさせるdns-prefetch、事前にTCP接続させるpreconnect、事前にリソースをダウンロードさせるprefetch、次ページを事前レンタリングさせるprerenderの４種類がある。
特にdns-prefetchは主要なブラウザはすべて対応し、利用してもページの表示速度に悪影響が少ないため、
外部ドメインへの発リンクがあるページでは積極的にdns-prefetchを記載すること
キャッシュを活用していますか？
ブラウザキャッシュおよびサーバーキャッシュをともに有効にすること
Page Speed Moduleを導入していますか？
高速化処理で未対応のものがあれば、次の策としてPage Speed Moduleを導入すること
Page Speed Moduleはさまざまな機能があるのでサイトで未対応のものは設定しましょう。
最後に
今回はSEOで最低限のサイトの高速化編についてお話しさせていただきました。
サイト運営者の方是非活用していただけたらと思います。
ではまた来週
