WordPressブログの読み込みが重たいから改善してみた

最近、WordPressの有料テーマを購入して、「見た目カッコいい―!使いやす―!お金払った甲斐があったわー」なーんて思っていたら、サイト表示がかなり遅いのが気になりだした。テーマのカッコよさが優先されて表示速度なんて気にも留めなかった。

なので、今回はWordPressテーマのストークの表示速度を改善してみたいと思います。

まずどのぐらい遅いのか、Google Chomeの拡張機能である、「pagespeed insights api extension」を使ってみようと思います。

Chome ウェブストア検索で「pagespeed insights api extension」を検索して一番上にある方をCHOMEに追加しました。

 

こちらの拡張機能は、サイトの表示速度をモバイル表示とデスクトップ表示ごとに評価してくれるのでかなり便利!

直接以下のURLからでも行けます。

PageSpeed Insights

早速、僕のブログのURLを評価してみます。

自分のURLを入力し、分析ボタンをクリック。

 

分析中・・・

 

出ました!
モバイル表示は、41/100

 

デスクトップ表示は、21/100

 

これはちょっとヤバい…。改善してみよう。

サイトを最適化する方法やってみた

PageSpeed Insights内で「最適化についての提案」もありますのでそちらを参考に、わからないところはネットで調べてみたいと思います。

ブラウザのキャッシュを活用する

ブラウザのキャッシュを利用することで、

「ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになる」とあります。

W3 Total Cache

ネットで調べた結果、ブラウザのキャッシュのことなら「W3 Total Cache」ってプラグインが良さそうです。

まずは、これをWordPressにインストールしてみます。

WordPressのメニュー→プラグイン→新規追加でキーワードに「W3 Total Cache」で検索すると、一番トップに出てきました。これをインストールしていきます。

 

インストールすると、performanceってメニューが増えているのでSeneral Settingsをクリック。

 

あとは、OXY NOTESさんがこのプラグインを詳しく解説しているのでこっちを参考にしました。

以上でキャッシュ系は終わりです。

画像を最適化する

「画像のフォーマットと圧縮をすることでデータ サイズを大きく削減できる」とあります。

僕のブログは画像を多用するので、画像の圧縮は効果がありそうです。

まず先に、これまでアップロードしていた画像の自動生成される画像を再生成しておきます。

意味はあまりないと思うんですが、メディアの設定で画像サイズを軽めにしていたので、それも含め再生成しておきます。

一応使ったのは、「Regenerate Thumbnails」ってプラグイン。

EWWW Image Optimizer

次に、画像を最適化をしてくれる便利なプラグインが「EWWW Image Optimizer」です。

WordPressのメニュー→プラグイン→新規追加でキーワードに「EWWW Image Optimizer」で検索すると、一番トップに出てきました。これをインストールしていきます。

 

インストールすると、設定にEWWW Image Optimizerが追加されているのでをクリック。

 

「Remove metadata」の設定

「Basic setting」のタブをクリックします。画像のメタデータ「EXIF情報」を削除する設定を行った方がいいみたい。EXIF情報とは、撮影した日時や場所の情報がふくまれているそうで、余計な情報を削除してくれることで、画像ファイルが軽くなるみたいです。スマホなどで撮った画像ならそういった情報が付加されているので個人情報の観点でも確実に消しといたほうが良さそう。

「Remove metadata」には必ずチェックですね。

とりあえずこれぐらいが標準的な設定っぽいので、これでセーブしておきます。Save Changesをクリック。

これから画像がアップロードされるときはこの設定が適用されるみたいですね。

 

それでは過去にアップロードされてきた画像に対して圧縮をかけてみたいと思います!

「メニュー」 → 「メディア」 → 「Bulk Optimize」をクリック。

「Force re-optimize」は、以前に最適化された画像はデフォルトではスキップされるけどチェックすると強制的に上書きされるみたい。

スライダーゲージは、圧縮最中に画像間で一時停止する時間の設定で、確認しながら圧縮する人向け?なのかなと思います。今回は指定する必要は無し。

「Resure previous optimization」をクリック

 

「Start optimizing」をクリックして、圧縮スタート!1755ファイルが対象とあります。

 

しばらく時間かかりそうなので放置します。

 

時間は30分くらいで圧縮は終わったようです。

 

この後、再度PageSpeed Insightsで表示速度を計測してみた。結果、どうだったと思います?

モバイルが38/100

デスクトップが27/100

ほとんど変わってない。変わってないどころかモバイル表示jの方は酷くなったんですけども。

なんなの?この無駄な努力。

実のところ、遅い理由にトップページにあるスライダーが多少影響があるのはわかってたんだけど、「この機能は失いたくない」って思っていたから、それについては触れなかったけど、少しでも改善するなら画像赤枠の方のスライダーを停止してみる。

 

もう一度表示速度を計測してみた。

モバイル表示42/100

 

デスクトップ44/100

 

 

結局…

少しは改善したけどまだまだ・・・。

気持ち的にサイト読み込みは多少早くなった気はするけど納得いかない。

ちなみに僕は一生懸命トップページのみの改善を行っていましたが、普通の記事では、モバイルが45/100、デスクトップが87/100でまぁまぁいい方なんですよ。

それでもやっぱりトップページも軽い方がいいですもんね。

これがSEOにどう影響してくるかわからないけど、アクセスが伸びないようであれば、もう一度改善してみようと思います。

今のところは、多少改善しただけでもいいか。と思うようにする!

 

2018/03/24 追記

あの後、JSの非同期読み込みって方法も試してみた結果、

モバイル 37/100

デスクトップ 98/100

 

というイカれた結果となった。なにが起こったんだ?こんなにもJS非同期読み込みがこんなに効果あったんだ・・・。ただモバイルだけが相変わらずだけど・・・。

以下に方法を載せて起きます。

WordPressのテーマの編集で、function.phpを開いて、


// JSを非同期で読み込む
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 if ( strpos( $url, 'jquery.min.js' ) ) return $url;
 if ( strpos( $url, '14ea827164dc138eed7835a571294a64.js' ) ) return $url;
 return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

を追加。
ただ、この方法だと、ヘッダーの画像が読み込まれなくなった。
この辺りの原因を見つけてやれば結構いけるかもしれない。
相変わらずモバイルは死んでるけど。
以上。


自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA