皆さん、サイトの表示速度って気にされてますか?
実はサイトの表示速度というのは検索順位に間接的に影響します。

なぜ間接的に影響するのか?
ページ表示速度はGoogle公式から「検索順位には影響しない」と言われています。しかし、表示速度が遅ければ、直帰率や、離脱率の増加、回遊率の低下につながるので、SEO的にも、ユーザビリティ的にも影響があると言えます。

そのページ表示速度改善の中でも効果的な方法がGzip圧縮です。意外と簡単に設定できるので、ぜひ設定してみてください!

サイト表示速度の重要性

サイトの表示速度は意外と重要な要素です。ページに訪れてから2秒以内に表示されないと大きく離脱率が増えるとも言われ、8秒以内に表示されないとほぼ全ての人が離脱してしまうと言います。
つまり、サイトが遅い場合、どんなに質の良い記事を書こうとも読んでもらえない文になってしまうということ!

そのため、良い記事を書くと同じくらい表示速度は非常に重要なんです。

そこでページ表示速度の計測に使えるサービス、Google PageSpeed Insightsで計測してみた結果。
42点!?少なっ!
シンプルなものだから大丈夫かと思ってましたが、そうでもないようです。
ウェブサイトの高速化はSEOの内部施策として非常に効果があります。ぜひ改善していきましょう!

ちなみにSEOについて知りたいならこちらの記事を参考にどうぞ。
▶SEOとは?

Gzip圧縮の設定

このページ表示速度の高速化で一番効果高かったものがGzip圧縮でした。
これを設定しただけで20点以上スコアが上昇したという驚きの結果が出ました!

今回はそのやり方をお教えします。

Gzip圧縮って?
Gzip圧縮は、サーバからのデータを読み込む際に転送するデータに対して圧縮をかけます。テキスト、HTML、CSS、JavaScript、画像、フォントに対して圧縮をかけられ、データ量を大幅に軽減できるので、処理速度向上が図れます。

.htaccessの設定

Gzip圧縮の設定はたくさんありますが、一瞬で終わる方法があります。
それが.htaccessに書き込む方法です。

ただし、.htaccessファイルはウェブサイトの大事なファイルなので、編集前にバックアップを取って、十分に気をつけながら設定するようにしてください
編集作業は自己責任でお願いします。

まずはFTPソフトで.htaccessを探しましょう。
[サイト名フォルダ] → [public_html]にあります。

この.htaccessをダウンロードし、下記のコードを一番下に追加しましょう!
※不安なら書き込む前の.htaccessをバックアップしておきましょう。

AddType image/x-icon .ico
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
# gifやjpg、pngなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
# gifやjpg、pngなど圧縮済みのコンテンツは再圧縮しない
# 有効な圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
# 有効な圧縮
</IfModule>
# セキュリティ上、ETagを消す
FileETag none
# セキュリティ上、ETagを消す
# アクセスしてほしくない WordPress ファイルをブロック
<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>
# アクセスしてほしくない WordPress ファイルをブロック

よく分からない方でも、大丈夫。コピペでOKです。

このコードを書き込んだ.htaccessをサーバ側に上書きしましょう。

注意:mod_deflateが対応しているサーバーか確認

この方法はmod_deflateという機能を使っています。これはウェブサイトのサーバーによってあるかないかが変わりますので注意してください。

対応済みのレンタルサーバー

エックスサーバー
さくらインターネット
ロリポップ!何もしなくてもgzip有効
お名前.com
ヘテムル

表を見て分かるように……ほとんどのレンタルサーバーがmod_deflateを使ってOKになってます。

心配な場合は【レンタルサーバー名 mod_deflate】で検索してみましょう!

Gzipが有効になったか確認する方法

こちらのサイトにてGzipが有効になったか調べられます。

簡単なオンラインWebページの圧縮/収縮/ gzipテストツール

自分のサイトのURLを入力して【Web page compressed?】がYesになっていれば有効になっています!

サイト表示速度のスコアを確認

ここでサイト表示速度のスコアを確認できます。

Google PageSpeed Insights

ぐにらぼはGzip圧縮をしたことによって……
とりあえず20点アップ!
※サイトによって効果は違います

点数的にはもっと改善ができると思いますが、かなり効果は高いですね。

まとめ

他の方法は結構面倒なことが多いんですが、Gzip圧縮設定であればカンタンにできるのでぜひやっていただければな〜と思います。

最初は怖いと思うと思いますが、バックアップをとって試してみましょう!

第二弾:ブラウザキャッシュの設定