SEOトピックス

PageSpeed Insightsのスコアは、SEOへ関連する内容となりますが、中々スコアがアップしないと試行錯誤されている方も多いと思います。以下に改善へ繋がる対応方法を一部掲載しますので、スコアアップの参考になさってください。

画像の最適化

サイズの大きな画像や、特別に画質の良い写真はデータ量が多くなりがちです。

データ量が多い画像をそのままウェブサイトに掲載してしまうと、ページ速度を下げる原因になってしまいます。

そのためウェブサイトの読み込み速度を上げるために、様々な方法でデータ量を下げる「画像の最適化」という作業が必要になります。

画像を圧縮する

画像サイズを小さくしたり画質下げるなど、画像を圧縮してファイルサイズを下げる方法があります。

ただ、単純に画像サイズを下げてしまうと荒い画像になってしまいますので注意が必要です。

モバイル/パソコンで表示させる画像を使い分ける

閲覧端末によって画面サイズが変わるため、同じ画像でも必要となる画像のサイズは異なります。
特にアイキャッチなどの大きな画像はファイルサイズが多くなりがちなうえ、きれいに表示させたい場合が多いため、複数のサイズを用意して画面サイズに応じて出し分ける処理が必要になります。

遅延読み込みを行う

ページの表示スピードについては、まずファーストビューを素早く表示させることが重要とされています。

そのためファーストビューのコンテンツを先に表示し、それ以外の画像を後から読み込ませる「遅延読み込み」という処理が有効です。

WebPを使う

Googleが開発した次世代の画像フォーマット「WebP（ウェッピー）」はファイルサイズが小さく、尚且つ画質がきれいという特徴があります。

各ブラウザが対応を進めており、これからさらに普及してくと思われますが表示できないブラウザ環境もあります。

当社ではブラウザの対応状況に応じで通常の画像とWebPを出し分ける事で、どんな環境でも素早く表示できるウェブサイトを制作しています。

CSS、JavaScriptのスリム化

ウェブサイトはHTML、CSS、JavaScriptなどのプログラミング言語で成り立っており、それらのコード量を少なくすることでデータ量が減り読み込み速度が速くなります。

そのためコードを最適化する事でウェブサイトの読み込み速度を上げる事が出来ます。

コードを圧縮する

簡単にコード量を減らす方法として、コード内の改行やスペースなどプログラムとしては不要な記述を削除し圧縮する方法がありますが、コードが読み辛くなってしまうため使いどころには注意が必要です。

コードの最適化

画像の場合同様まずはファーストビューを素早く表示させる必要があるため、表示（レンダリング）に影響のあるJavaScriptの処理を遅延させたり、現在は使われていないCSSの設定を削除したりと、コードを最適化します。

表示を遅らせる代表として、Youtube動画の埋め込みなどの、所謂外部サービスが挙げられます。

TwitterのウィジェットやFacebookのいいねボタンなど、外部サービスが多く使われているページはコードの最適化で速度が上がりやすいです。

テキスト圧縮、ブラウザキャッシュの利用

上記の対策以外にもサーバー側でウェブサイトのデータを圧縮し、予めデータ量を下げてから読み込むことが出来る「テキスト圧縮（Gzip）」という方法があります。

この方法はサーバーの仕様によりますが、必須の対策となります。

また、ブラウザキャッシュを上手く使う方法があります。

一度訪れたウェブサイトの情報をブラウザが一時的に保存しておく仕組みをブラウザキャッシュと呼びますが、そのキャッシュ期間を効率的にコントロールする事で不要なデータの読み込みを短縮する事が出来ます。

以上、一部をご紹介しました。

専門的な内容もありますので、うまく対応できない事もあるかもしれません。

その際は、お気軽に弊社へご相談ください。