"

PageSpeed Insightsを使ってサイトのパフォーマンスを軽く!

面倒なのは嫌だけど、サイトパフォーマンスを上げればGoogleさんの評価も上がるはず。

サイトの広告主である「Google AdSense」さんから「サイトのパフォーマンスが悪い」とのご指摘がありました。

MISSION:簡単かつ手軽にサイトのパフォーマンスを上げること。

今回は以下の3つに分けて書いていきます。

  1. PageSpeed Insightsとは
  2. サイトパフォーマンスの改善点の確認
  3. gzip圧縮の利用方法

PageSpeed Insightsとは

ご指摘の内容を確認しようとすると下記の「PageSpeed Insights」のサイトに飛ばされて、勝手にトップページの検証が始まりました。以下の画像のリンク先で直接URLを入力してもチェックができます。

このサイトはスピードチェックではなくて、サイトのソースそのものを細かくチェックして改善点を指摘してくれます。

もちろん実現不可能なものも表示されます(笑)

サイトパフォーマンスの改善点の確認

結果はモバイルとPCの2種類のタブで区切られて表示されていました。

WS000001

 

なかなか良い点が取れてます(笑)

しかし、これに辿りつくまでには低い点数から改善点をよく読んで地道に解決するしかなかったです。

速度・ユーザビリティ(ユーザーエクスペリエンス)などの観点から評価してくれて、それぞれ提案・修正が必要なもの・どのソースをどう改善するとどのくらい良くなるのかをサクッと表示してくれます。

ワードプレスを使っているとどうしても修正しづらい「テーマ」の中のjQueryや、CSSを改善せよ!とか画像のサイズを小さくせよ!とか言ってきますが、面倒です。

そんな中で見つけたのが次の項目「サーバ側でソースを圧縮したらいいよ」です。

gzip圧縮の利用方法

まず、gzipってなんぞや?

ってところは省略します。zipって文字が入ってるし圧縮後のファイル名なんだなーってところでおさえてください。サーバ関連ではよく聞く拡張子です。

htmlやcssの圧縮とはなんぞや?

まず結果は圧縮なのでファイルサイズが小さくなるのは明白です。

イメージでは、余分なスペース、改行を削除、<div>は「d」に変換して文字数も減らすみたいなことをやるんでしょうかね。詳しくはわかりません。というか調べません(笑)

htmlからgzipへの圧縮・変換方法

フリーウェアなどで自分のPC上で変換することはできそうだ。

とは思いますが、ファイルを作るたびにそんな手間をかけるのは嫌だし、サーバでよく聞く言葉ということはサーバ側でうまいことできないだろうかとしらべましたところ、ありました。

サーバーの命令文を書く「.htaccess」(ドットエイチティーアクセス)に記述してサーバーにアップするだけ。

うちはさくらインターネットを利用しているので、この記事でクリアできました。

自分のサイトのルートに「.htaccess」ファイルを作成して以下の記述をします。

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnv force-gzip

2行目:画像ファイルはgzip圧縮を行わない設定
3行目:さくらインターネット用

こんな感じです。ちなみに「/」が反対を向いてるやつは「バックスラッシュ」といってwindowsでは(半角の)¥マークになります。

これで、ファイルサイズは軽くなって、サイトのパフォーマンスは大幅に改善されました。めでたしめでたし。

サーバーサイドでgzip圧縮の最後に

ただし、サーバー側で何かさせる以上、サーバーに負荷をかけていることになります。

そのためレンタルサーバーの仕様や料金プランによっては利用できない場合もありそうです。
mod_deflate」モジュールとかいう設定や、実際にgzipを使うしかないところもあるかもしれませんので、要確認です。

さくらインターネットでも非公式だけど今のところ使えるとのことで助かりました。