4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

サイトの表示速度は、ユーザー体験はもちろん、実際のコンバージョンやSEOにまで影響していると言われています。実際に、表示速度が変わるだけでクロール量が10倍になるなんてことはザラです。

  • ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する
  • 操作開始時間が3秒のサイトは1秒のサイトに比べ、コンバージョン率は38%低下、直帰率は50%上昇する

このようなことをあなたも聞いたことが有ると思います。そこで、今回は、いくつかのサイトを高速表示する中で、得たポイントを公開していきます。

とりあえず、サイトの状況

とりあえず、先に結果をお伝えします。現在、サイトによってはページ数は3万を超えていますが、それでも89点以上を出せています。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ4つのサイト表示速度を89点以上にした時に、治したポイントまとめ4つのサイト表示速度を89点以上にした時に、治したポイントまとめ4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

慣れてくると、そんなに大変でも無いのですが、慣れていないうちは触れるのが結構怖いと思うので、丁寧に説明していきますね。

前提:.htaccessに慣れよう

まずは、.htaccessというファイルに慣れましょう。これが高速表示の肝です。

ただ、このファイル、間違えた表記をすると、サイト毎表示されなくなるという、諸刃の剣でもあります。

このhtaccessファイルは何をしているかというと

ユーザーがサイトへアクセスする際に、「サーバーがどのようにデータを渡すか」というルールを記載したファイル

だと思って下さい。

なので

  • gzip圧縮
  • キャッシュ
  • URLのリライト

などはこのファイルで行えます。基本的には、index.phpやindex.htmlど同フォルダにあります。

レンタルサーバーには拘ろう

とりあえず、格安サーバーは禁止にしてください。既に契約しているという方は、乗り換えをオススメします。

何故かの説明のために、サイトの表示速度をより細分化して見ていきます。(デベロッパーツールのNetworkを開いて、サイト内でリロードして下さい。)

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

この表示が出ると思います。この一番右の列が細分化された表示速度です。ここのどれか一つを選択し、速度の内訳をみてください。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

「TTFB」という表記があると思います。これは、サーバーからのレスポンス自体の速度です。

基本的に、あなたが作成したサイトのデータは、サーバー上にアップロードされていると思います。

なので

  1. 「ユーザーのアクセス(リクエスト)」
  2. 「サーバー側でプログラムの処理」
  3. 「応答用のデータをユーザーに送信」
  4. 「ユーザーが受信(サイトが見れる)」

という手順を踏みます。

サーバー側のプログラム処理はどうにもできない

これから、キャッシュや、圧縮などの解決方法も紹介していきますが、この「TTFB」なるサーバーの待ち時間は、ほぼサーバーのパフォーマンスで決まります。他には、PHPのバージョンなどの影響です。

同じプログラムを使う場合(例えば、同じwordpressのサイトを動かす場合)、あとはサーバーの問題だけになります。というか、最終的にサーバーの応答スピードが限界値になります。

その為、できるだけパフォーマンスが高いレンタルサーバーを借りましょう。

僕は、AWSエックスサーバーをメインで使っています。(ロリポップやさくらサーバーは断念しました)

ただ、この2つでもエックスサーバーの方が圧倒的に楽な印象です。後述するmod_pagespeedなどの利用も楽なのが良い所です。

画像の圧縮をしよう

次は、画像の圧縮をしましょう。大体のサイトは、画像のサイズがでかすぎで、CSSで無理やり調整していることだと思います。

画像ファイルの調整は大きく二段階あります。

  • 画像のリサイズ
  • 画像の圧縮

画像のリサイズ

画像のリサイズは、表示されるサイズに合わせて、画像のサイズを調整することです。

デベロッパーツールで、実際の表示サイズを確認して、その画像サイズにサイズ変換しましょう。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

画像のリサイズには以下のようなサイトが役に立ちます。

オンラインでJPGを瞬時にサイズ変更 – iLoveIMG

画像の圧縮

圧縮とは言っても、簡単に言えばクオリティを落とすことです。ほとんどのサイトでは、クオリティを70%くらいにしても、違いが全く見られないのでオススメです。

以下のようなサイトで、画像圧縮をして差し替えてください。

画像の圧縮

キャッシュを使おう

キャッシュは、サイトのデータを一時的にユーザーのブラウザに保存しておき、再度アクセスした際に変更がなければ、保存されてるデータを読み込む仕組みです。

これによって、サーバーからデータを送る作業が必要ないので、高速で表示できるようになります。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

デベロッパーツールのfrom memory ~ というのはそれです。(2,3回リロードしてください)

.htaccessに追記する

キャッシュ自体は、.htaccessに追記すればすぐに出来てしまいます。細かい設定は抜きにして、僕の.htaccess例を出しておきます。

# BEGIN Expires-Headers
<IfModule mod_expires.c>
<FilesMatch “\.(js|css)$”>
ExpiresActive On
ExpiresDefault “access plus 1 weeks”
</FilesMatch>
</IfModule>
# END Expires-Headers

# BEGIN Cache-Control-Headers
<ifmodule mod_headers.c>
<filesmatch “(gif|ico|jpeg|jpe|jpg|svg|png|css|js)$”>
Header set Cache-Control “max-age=604800, public”
</filesmatch>
</ifmodule>
# END Cache-Control-Headers

 

これを、.htaccessの一番下に追記してください。既に何か書いてあるような方は、一番下から2行改行して追記すると良いです。要は、入れ子にしなくていいということです。

 

mod_pagespeedをONに

mod_pagespeedという、画像などの送信を早くしてくれるものをONにしましょう。

エックスサーバーを利用しているという前提だとして、サーバーパネルからアクセスしてONにします。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

表示を確認しよう

成功すると、デベロッパーツールでサイトを確認した際に、imgタグに以下のような表記がついています。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

pagespeed_url_hashなどの表記がついていることが目安です。

うまくいかない場合

うまくいかない場合は、.htaccessに以下を追記して下さい。

<IfModule pagespeed_module>
ModPagespeed on
# 画像劣化が気になる場合は画像圧縮をOFFに
# ModPagespeedDisableFilters rewrite_images
</IfModule>

 

これは、<IfModule mod~~>が既にある場合は、入れ子の形にして挿入して下さい。

 

CSSとJSを圧縮しよう

CSSファイルやJSファイルも送信に時間がかかります。これをgzip圧縮して送れるようにしましょう。

まずは、.htaccessに追記

まずは、.htaccessを変更します。

 

#スタイルシート (.css)
<FilesMatch “\.css\.gz$”>
ForceType text/css
AddEncoding x-gzip .gz
</FilesMatch>

#Javascript (.js)
<FilesMatch “\.js\.gz$”>
ForceType application/x-javascript
AddEncoding x-gzip .gz
</FilesMatch>

#HTML (.html)
<FilesMatch “\.html\.gz$”>
ForceType text/html
AddEncoding x-gzip .gz
</FilesMatch>

 

これを<IfModule ~~>内に追記してください。

CSS,JSファイルを圧縮

CSSとJSファイルを圧縮します。とはいえ、結構簡単です。

一度、ローカルにファイルを落とし、ターミナルを開きます。

「gzip (半角スペース)」と入力した状態で、Finderを開いてCSSファイルをターミナルにドラッグ&ドロップします。

そのままEnterを押すと、圧縮ファイルが出来ます。

4つのサイト表示速度を89点以上にした時に、治したポイントまとめ

これで圧縮できたので、このままアップロードしてもよいですが、もとのCSSも無いと困るという方は、.gzファイルをダブルクリックして解凍し、両方共アップロードしましょう。

JSも同様です。

まとめ

基本的には、上記のことで終了です。というよりも、できることはやった的な感じがあります。

WordPressの場合は、CDNですでに使われているjqueryや、中のプログラム構造とかがあまりいじれなくて難しいところも有るので、今度はWordPressに特化して研究しようと思います。

ありがとうございました。