1. >
  2. >
  3. >

Page Speed Insightの最適化


ページの表示速度はサイトの集客を考える上でとても大切です。ユーザーはなるべく早く情報に辿りつきたいと思っているので表示速度が遅ければストレスを与えることになり直帰の原因にもなってしまいます。もし自分のサイトの表示が遅いと感じた場合には表示速度の改善を考えましょう。

PageSpeed Insights

Pagespeed Insightsとはgoogleが提供しているサービスの一つで、サイトの表示速度を計測して点数化してくれるものです。では早速弊社のサイトの点数を計測してみます。

img_pagespeedinsights01

結果はPC「52点」モバイル「43点」という結果がでました。点数の結果が85点以上がよいサイトだとされているので、現在の点数はよくありません。という訳でgoogleの指示に従い改善を行っていきます。

具体的な改善処理

処理が必要なものは大きくわけて2つあります。「修正が必要」なもの、「修正を考慮」するものです。点数が減点される要因の大半が「修正が必要」なものにあるので、今回は「修正が必要」なものを修正していきます。

弊社のサイトで「修正が必要」なものは

  • 画像を最適化する
  • ブラウザのキャッシュを活用する
  • 圧縮を有効にする
  • スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除する

でした。4つともそれぞれ別の処理を行う必要があるので、順番に1つずつ説明していきます。

画像を最適化する

img_pagespeedinsights02

一部の画像の容量を削ることで表示速度を改善できるようです。

まず「詳細を表示」で問題のある画像を一覧で確認し全てコピーします。

img_pagespeedinsights04

コピーしたものをテキストエディタに貼り付けて、templateファイル内の画像とwordpressにuploadsしたものを分けます。

img_pagespeedinsights05

次に画像を圧縮するために「kraken.io」を開きます。圧縮方法の選択ができ、複数の画像の圧縮が行えるのでとても便利です。

img_pagespeedinsights06

pagespeed insightsの指摘で「ロスレス圧縮すると」とあったのでkraken.ioで画像のように「LOSSLESS」を選択。テキストエディタで分けたtemplateファイル内の画像をimgフォルダから選択してkraken.ioにドラッグ&ドロップします。すると自動で圧縮が始まります。

img_pagespeedinsights07

圧縮が完了したら「Download All Kraked Files」で全ての画像をダウンロードします。

img_pagespeedinsights08

img_pagespeedinsights09

ダウンロードしたzipファイルを開き中の画像を全て選択し、圧縮前のimgフォルダ内の画像と置き換えます。

これで「画像の最適化」は完了です。

uploadsした画像の最適化

wordpressへuploadsした画像を圧縮する方法を説明します。

プラグインの「新規追加」→「EWWW Image Optimizer」をインストールして有効化します。この「EWWW Image Optimizer」はプラグインを有効化しておくだけで、アップロードの際に画像を自動圧縮してくれます。もちろん既にアップロードしてある画像の圧縮も可能ですが必要な処理があるので以下で説明します。

複数の画像を圧縮する場合

img_pagespeedinsights17

「メディア」→「メディアライブラリ」から圧縮したい画像を選択して「一括操作」→「Bulk Optimize」で「適用」します。

img_pagespeedinsights18

上の画面に移動するので「Start Optimizing」で圧縮を実行します。

img_pagespeedinsights19

圧縮が完了するとどれだけ圧縮できたか確認できます。

全ての画像を圧縮する場合

img_pagespeedinsights20

「メディア」→「Bulk Optimize」から「Scan Optimized Images」を選択して実行することで全ての画像の圧縮が始まります。

以上がuploadsした画像の圧縮方法になります。

ブラウザのキャッシュを活用する

img_pagespeedinsights10

ブラウザのキャッシュを活用することで、読み込むサイトのデータ量を減らすことができるので、表示速度が早くなるようです。html,css,javascript,画像などそれぞれサイトに適切なキャッシュの有効期限を決めていきましょう。キャッシュの有効期限を決めるにはhtaccessというファイルを修正していきます。

まず「public_html」内にhtaccessがあるのでそれをテキストエディタで開きます。htaccessに下のコードを追加します。

期限はできれば長いほうがいいですが、頻繁に変更する可能性のあるものは一日や一週間に設定する必要があります。弊社のサイトはスタイルの変更が頻繁にあるわけではないので上記のようにcssを一週間に設定してみました。これで「ブラウザのキャッシュを活用する」は完了です。

圧縮を有効にする

img_pagespeedinsights12

画像同様、ファイルのサイズを圧縮することでブラウザへの負担を減らすことができます。圧縮を有効にするために、再びhttaccessを修正していきます。キャッシュの活用で処理したhtaccessをテキストエディタで開き下のコードを追加します。

これでファイルの「圧縮の有効化」ができました。

スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/cssを排除する。

img_pagespeedinsights13

難しい言い回しなので簡単に説明をします。ブラウザでwebページを表示した時にスクロールせずに見える部分が、ユーザーが最初に目にするページの部分となります。なのでブラウザは優先的にスクロールせずに見える部分の情報を読み込もうとします。ですがブラウザがその情報を読み込む際にjavascriptやcssがあるとそちらを読み込もうとするので、必要な情報の読み込みを遅らせて。つまりスクロールせずに見える部分に必要でないjavascriptやcssはできるだけあとで読み込むように処理をしましょうということです。

javascriptの排除

今回はjavascriptを非同期にすることで解決をしてみたいと思います。

スクロールせずに見える部分には必要のないjavascriptに対してasync属性を追加していきます。

このようにasync属性を追加することでjavascriptが読み込みをブロックすることを防ぐことができます。

cssの配置の最適化

弊社のサイトはwordpressで運営しているので、「Async JS and CSS」というプラグインを使用したいと思います。

img_pagespeedinsights14

「新規追加」→「Async JS and CSS」でインストールできたら有効化します。

img_pagespeedinsights15

画像のようにsettingをしたらcssの配置の最適化は完了です。

改善後の点数

img_pagespeedinsights16

改善後の計測結果はPC「81点」モバイル「71点」でした。改善が難しいものもあるので「修正を考慮」がいくつか残っていますがPC,モバイルそれぞれ約30点も点数を上げることができました。改善の処理の方法は他にもあるようなので、いろいろ試して高得点を目指していきたいです。今回の記事で説明した処理自体は1時間ほどでできるので表示速度の改善のために是非試してみてください。

 


SEO対策 名古屋はAPOLLO11にお問合せ