最近サイト表示が遅かったので最適化したら効果がありました!

SNSでシェアする

こんにちは!久しぶりの雨に乾ききっていた事務所前の畑へも、お湿り程度ですが恵みの雨となったのではないでしょうか?野菜たちも活き活きしているように見えますね(*^_^*)
久しぶりの雨(^^)

サイト表示の高速化に試行錯誤していました

少し前から感じていたのですが、表示に時間が掛かってしまうために以前よりも直帰率が高くなり、訪問別ページビュー数も減少してきてしまいました。なので今年になってから空いた時間を使ってはサイトの表示のレスポンスを向上させようといろいろと試行錯誤しておりました。

いつも表示時間の測定や改善事項の確認でいつもお世話になっているのが「GTmetrix」でして、最適化前のスクリーンショットを撮り忘れておりましたがトップページ表示までの時間が6秒-7秒位掛かってしまっておりました。

遅くなっていた原因は
ヘッダーに設置してあったSNSのシェアボタン
写真が多くて読み込みに時間が掛る
サイドバーに設置してあった新着一覧など
レンタルサーバーのスペック

・・・・などなど色々とありますが、今回はレンタルサーバー(さくらインターネット「スタンダードプラン」)は変更するつもりは無かったので、サイト全てのページに表示されるヘッダーやフッター・サイドバーを中心に最適化していきました。

SNSのシェアボタンをリンク画像(CSSスプライト)に変更

ヘッダーに設置してあった(最近はフッターに移動していましたが)Google+・Facebook・Twitterのシェアボタンですが、ヘッダー(フッター)に設置すると全ページに表示される訳でして、トップページのシェアボタンを全ページに表示させなくてもいいんじゃないかっ!?という結論に達したので、単純にCSSスプライトを使って画像リンクに変更しました。

苦労したCSSスプライト
苦労して設置したCSSスプライト

これで余計な外部javascriptを読み込む数も少なくなり、結構スリム化が出来ました。

Jetpackプラグイン「Photon」を使ってCDNから画像を読み込み

JETPACK
「Photon」のサービスが始まった時に一度試してみたことがあったのですが、上手く設定できていなかったのかあまりメリットを感じなかったので、そのままお蔵入り状態だったのですが、こちらの記事を拝見してもう一度使ってみようと思い設定してみました。

[M] なぜ見逃していた! WordPressの多機能プラグイン「Jetpack」のPhotonがイイじゃないか!! | mbdb (モバデビ)

こちらのサイトに書かれていたのですが、「Photon」は勝手にサイト幅ピッタリに画像をリサイズしてキャッシュしてくれるんですって!?

それと、この「Photon」のおもしろいところがもうひとつ。パラメータを付けることで画像処理が可能になるという点。
記事の幅よりも大きな画像を挿入することがあるかと思いますが、普通はこれってCSS側で画像幅を制御してたりしますよね。
これが、「Photon」を有効化することで勝手にresizeパラメータが入り、幅ピッタリの画像としてキャッシュしてくれているんです。これはイイ。
CSSで制御した場合は、大きな画像をCSSで縮小してるだけなので、画像ファイルの容量は変わらないんですが、「Photon」のresizeパラメータで縮小されたものは画像ファイルの容量も変わってくるわけで、当然のことながら読み込み速度は速くなるわけです。

なるほど!!こんな便利な機能なのに今まで使わなかったなんて勿体無いですね。。。
設定しましたが、3つのWordPress.comのCDNサーバーから、サイト幅に合わせた画像を読み込むようになったので体感速度もかなり上がりました!

サイドバーの新着記事一覧も数を減らしました

サイドバーに新着ブログや新着施工例は現在も表示方法を表示数を変更して掲載しておりますが、Google Analyticsのデータを使った直近3日間の人気記事を表示していたウィジェットをやめることにしました。
人気記事一覧はあると嬉しいのですが、今回は断腸の思い(まででも無いですが)で削除しました。

色々と試行錯誤した結果ですが・・・効果はありました!!

余計なCSSなども整理して、できることは一通りやった(つもりな)ので「GTmetrix」で計測してみました。

GTmetrixの結果
試行錯誤しましたが高速化の効果がありました!

3秒37!!念の為に数回計測してみましたが3秒台前半から中盤位でしたので間違いでは無さそうです(*^_^*)
Page Speed Grade:95% A」「YSlow Grade:83% B」は共に今までで一番いい評価も貰えました!
Total page size:1.55MB」も最適化前は2MB程あったので、かなりスリム化できましたね♪

最適化してみての感想ですが、やる前は表示速度については殆ど諦めていたのですが、制限の多い共用のレンタルサーバーでもそれなりに高速化することが出来るんだと実感できました。
これで直帰率や訪問別ページビュー数が減少してしまった分が回復してくることを願っています。