ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2018-02-19

【SEO】レスポンシブサイトとページの読み込み速度の問題と対策

ページの読み込み速度は早いに越したことはないですよね。
そんなことは、わかっている!んです。

最近google公式ブログではこんな記事があがってます。

“ページの読み込み速度をモバイル検索のランキング要素に使用します

読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。”

引用元:ページの読み込み速度をモバイル検索のランキング要素に使用します

「ページの読み込み速度をモバイル検索のランキング要素に使用します」
言い切っちゃった^^;

表示スピードはまぎれもなくSEOの大事な要素といえるでしょう。

PCサイトにおいても当然表示速度が早いに越した事はありませんが、
モバイルに関してはユーザー視点から考えても特にそのスピードが重視されていることでしょう!

ここで問題になってくるのががレスポンシブサイト!

レスポンシブサイトって表示遅いの??

今や主流ともいえるレスポンシブサイトは
PCもスマホにも対応してしまうという優れものである一方
ことスピードに関していえば、設計をしっかりしないと
表示スピードがめちゃくちゃ遅くなる危険性を秘めてます。

PC用のきれいな画像をスマホでも利用している
PC専用コンテンツをモバイルで非表示にしてはいるものの、、裏で読み込んでしまっている


こんな状況が、よくあるレスポンシブが遅くなる大きな理由です。

気にしすぎもよくないですが、
あまりにも速度遅延が予想される要因は潰しておいたほうがいいでしょう!

※無理にレスポンシブサイトにしなくていいじゃん!って言いたいとこですが
最近googleがレスポンシブを推奨してたりします..

ということで、比較的かんたんにできる
レスポンシブサイトの速度対策をあげていきましょう。

速度対策その1:画像をできるだけ圧縮する!

photoshopなどでなんとなく出力したものをそのまま使うと、どうしても重くなりがちな画像。
WEBサービスなどを使ってできるだけ圧縮することをおすすめします。
50%以下のファイルサイズになることも少なくありません。

PNG,JPGを圧縮できるサイト:https://tinypng.com/

速度対策その2:PC用の画像はスマホで読み込まない!

フルHD以上の高解像度が主流になりつつあるPC。
その流れからPCサイトのメインビジュアルは大きな画像が使われるパターンが多く見受けられます。
その画像をそのままモバイルサイトに使用すると、当然スマホのサイズでは、無意味な高画質画像を読み込む事になります。
場合によっては、スマホ用の画像を用意した上でどちらか一方を読むようにしましょう!
※スタイルシートによる非表示ではなく、ユーザーエージェント判別をするなどして、読み込み自体を阻止しないと意味がありません。

速度対策その3:おおきな画像、スクリプトは非同期で読み込む!

googleが推奨しているスピード対策の一つにこれがあげられます。
ランディング時は最低限のコンテンツを読み込み、いちど通信を完了させ、
必要なタイミングで、コンテンツを表示させていく
という方式です。jsによるajaxなど。
ここで気をつけなければいけないのが、非同期コンテンツはgoogleボットに検知されない危険性を秘めている
ということです。
せっかくスピードを早くしたのに、googleボットに内容をスルーされたのではSEO対策として本末転倒です。
非同期コンテンツsearch consoleなどでしっかりインデックス状況を確かめる必要があります。

速度対策その4:AMPページの用意

いっそのことレスポンシブとは関係なく、モバイル用に超簡潔ページを用意する方法がこれです。
上の3つの対策を考える必要がなくなる上に、googleに「このページはめっちゃ早いつくりだ」
と特別扱いしてもらえるようになります。

ただし、
・それ用のページを用意するコストがかかる、
・超簡易ページなので、表現の制限が多い
・コンテンツ内容によってはAMP対応しても、googleが認識してくれない

など、AMPをよく理解した上で導入を検討する必要があります。

AMPはブログなどの動的ページではかなり有効なスピード対策といえます。
※AMPについてはこちらにも記事にしてます

本当に対応必須?話題のAMPとは

あちらを立てればこちらが立たず

以上が比較的とっつきやすい速度対策です。
ただ正直言うと速度にも限界はありますし、デザインや動きと読み込みスピードは反比例する性質もあると思いますので
前述したように、あまりにも遅延すると予想される箇所に絞って対策するのがいいと思います。

バランスって難しい。。

~この記事の著者~

レスポンシブサイトのご相談お待ちしてます!

 03-5961-5681 平日10:00~19:00

メールフォーム