ページの読み込み時間のパフォーマンス改善

ブロードバンド、大容量時代になり動画もバンバン配信される時代になりました。ホームページを作る側としても、最初のころのようにギリギリまで画像を圧縮したり、HTMLの順番を意識したりするようなこともなくなりました。が、それは私の勝手な思い込みで、やはり軽いほうがいいようです。googleの「ページの読み込み時間のパフォーマンス」で指導が表示され、「改善すると、ユーザーにとっての利便性の向上やトラフィックの増加につながります。」と書かれています。今の状況でも不具合とまでは行きませんが、ムダが多いのは事実のようなので、改善したいと思います。

以下は、Google developerページのアドバイスを翻訳したものと、私の対応をメモしたものです。

圧縮を有効にする

gzipやDEFLATEとリソースを圧縮すると、ネットワークを介して送信されるバイト数を減らすことができます。

詳細:gzipで次のリソースを圧縮すると447.6KiB(72%削減)することで、転送サイズを減らすことができる。
以下14項目にわたって、どれだけ圧縮できるかが表示されました。では、どうするのか・・・

image

「gzipやDEFLATEとリソースを圧縮する」で検索すると、.htaccess ファイルに記述を追加する方法がいくつかヒットしました。早速試してみますが、なぜだかうまくいきません。Wordpressならではの問題が生じているのでしょうか。

今度は、「Wordpress gzip」と検索してみました。すると今度はWordPressの速度アップのためgzip圧縮を有効にするというサイトがヒットしました。このサイトによると、プラグインで何とかなるということです。

これで下のようにチェックしたところ4ポイント改善。しかし、圧縮すべきファイルリストには多数残っています。
どうやら、JavaScriptが改善されただけのようで、まだ何か根本的な問題があるようです。

image

よくよく見てみると、gzip以外のところが改善されて、

image から image

になっていました。ここまでで59点まで回復

画像を圧縮 WordPress高速化に必須なプラグイン「WP Smush.it」

image

こちらについては、下記のサイトに詳しく紹介されています。

ワンタッチで全画像のファイルサイズを圧縮!!Wordpress高速化に必須なプラグイン「WP Smush.it」

インストールして、実行した結果は、

image

赤から緑のマークに。11個あったリストも1個に改善。ここまでで66点まで回復

キャッシング活用ブラウザの設定

ご利用は計画的に。ということではありませんが、簡単に言うとキャッシュ(ブラウザがローカルに保存したファイルを使用して、WEBページを表示すること)を有効に活用することで、ネットワーク経由でのファイルのダウンロード処理が省略され、サイトの高速化、サーバの負荷軽減に繋がります。Wordpressにはいろいろなプラグインがありますが、やり方が悪いのかなかなか思うような効果が出ず。

今回たどり着いた結果は、下記のサイトの「ブラウザの有効期限を設定する」のソースを.htaccessに記述しました。これにより、目に見えて、赤から黄色へと変わりました。日本語翻訳なので若干言葉は変ですが意味はわかります。

さくらインターネットでサイトの表示速度高速化設定 – レンタルサーバーで遊ぶサイト(Web-Polaris)

image

この時点で70点。さらに、WPtouchも停止。スマホなどで見る方も、パソコンと同じような画面でナデナデしたほうが分かりやすいような気がするので、やめました。スマホを持っていないので、要望があればまた考えます。

さくらインターネットのPHP設定を利用 gzip圧縮する

今日最も悩み、時間を割いたのがこれ。いろいろなプラグインを試すもどれもなかなかうまくいかず。最終的に最も効果が出たのが、これです。

さくらインターネットのコントロールパネルを開き、サイドバーのアプリケーション設定にある、PHP編集。そこに、次の1行を記述しました。たったこれだけです。

zlib.output_compression=1

これで、14項目あったご指摘が1項目まで削減。最高得点の76まで上げていただきました。

ここからは、サイトに搭載しているプラグインや構文の見直しもしながら、安定して80点以上をたたき出せるように挑戦してみたいと思います。今日いろいろ試したことで不具合が発生していたら教えて欲しいです。

image
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク