皆さん、サイトの表示速度って気にされてますか?
実はサイトの表示速度というのは検索順位に間接的に影響します。
なぜ間接的に影響するのか?
ページ表示速度は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になっていれば有効になっています!
サイト表示速度のスコアを確認
ここでサイト表示速度のスコアを確認できます。
ぐにらぼはGzip圧縮をしたことによって……
とりあえず20点アップ!
※サイトによって効果は違います
点数的にはもっと改善ができると思いますが、かなり効果は高いですね。
まとめ
他の方法は結構面倒なことが多いんですが、Gzip圧縮設定であればカンタンにできるのでぜひやっていただければな〜と思います。
最初は怖いと思うと思いますが、バックアップをとって試してみましょう!