仮想通貨から投資信託へ移行して「ほったらかし」で資産形成しよう

サイトをプラグインで簡単に高速化してみた【WordPress】

ごきげんよう、バビです。

SEO対策なんかを考えて調べていたら、ふと気になったサイトの表示速度。

ちょっと測ってみたら・・・

めっちゃ遅い!

 

気になったので改善することにしました。

一番速いのは当然文字だけのコンテンツですけど、それだと今度は見づらかったり個性がなかったりでそれはそれでユーザビリティが低くなるので、バランスが難しいところ。

あと、難しい設定とかはめんどくさいので、プラグインだけで簡単に高速化できないか、試してみました。

サイト表示を高速化するメリット

高速化するメリットは以下の2つです。

  1. ユーザビリティの向上
  2. SEO対策

私のサイトのテーマ「SANGO」を開発されたサルワカくん先生のサイトを見ると、Googleの公式調査では、モバイルページでは以下の結果になったそうです。

  • 読み込みが1秒から3秒になると、直帰率は32%上がる
  • 読み込みが1秒から5秒になると、直帰率は90%上がる
  • 読み込みが1秒から6秒になると、直帰率は106%上がる
  • 読み込みが1秒から10秒になると、直帰率は123%上がる
参考 WordPressの高速化〜表示速度を上げる12の技〜サルワカ

ページを開いてから内容が表示されるまで時間がかかって、「おっそ!他のページ見よ!」ってなることありますもんね。

CEO的にも、検索結果からサイトを見てからの滞在時間や、ページの表示速度自体が検索順位に影響を与えている可能性もあるので、「高速」とまではいかなくとも、「遅い」という状況は改善しておいたほうがよさそうです。

まずは速度を測ってみた

Google公式ツールの「PageSpeed Insights」で測ってみました。

PageSpeed Insights

60点以下が赤点で、PCなら90点、モバイルなら85点以上が良いらしいです。

結果はこんな感じ

おっそ!これはひどい・・・。せめて80点くらいにしたい。

ちなみにこのツールのいいところは改善策を教えてくれるところ。

それぞれの項目に対応したプラグインを導入していきましょう。

プラグインで簡単に高速化してみる

参考にしたのは↓こちらのサイト

参考 【爆速サンゴ計画】SANGOを高速化するカスタマイズマサオカブログ

このとおりにやってみましょう。

注意
テーマやプラグイン同士の相性で、プラグインを使用することで不具合が出ることもあるので注意してください。

Autoptimize

「PageSpeed Insights」の「HTML・CSS・JavaScript を縮小する」に対応するのが「Autoptimize」というプラグインです。

こいつをインストールすると「設定」の中に「Autoptimize」ができるのでこれを開きます。

HTML、CSS、JavaScript を最適化してくれるので全部チェックを入れておきます。

一応サイトのトップページと記事ページの表示を確認しましょう。私は特に問題ありませんでした。

ここで速度を測ってみます。

モバイル:64→68、パソコン:59→61

ちょっと速くなりましたね。

※追記続・サイトをプラグインで簡単に高速化してみた【WordPress】

こちらも合わせて設定すると速くなるかもしれません。

WP Fastest Cache

「PageSpeed Insights」の「ブラウザのキャッシュを活用する」「圧縮を有効にする」に対応するプラグインです。チーターがカッコいい。

インストールすると、大阪のおばちゃんのトレーナーみたいなチーターのマークができるのでこれを開きます。

英語なので、下のほうにある「Language」を「日本語」にして一旦「Submit」を押します。

日本語化されるのでマサオカブログ様を参考に設定しました。真似っこです。

こちらもサイト表示には影響なし。

モバイル:68→68、パソコン:61→66

まだまだいきましょう。

Scripts To Footer

「PageSpeed Insights」の「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」を解決します。

色んなものを「header」から「footer」に移動するプラグインです。

インストールすると「設定」の中に「Scripts To Footer」ができます。

「除外するもの」にチェックを入れる設定なので、一番下の「Keep jQuery in the Header」だけチェックを入れます。

サイト表示には問題なかったので速度を測ります。

モバイル:68→75、パソコン:66→70

おお!これは中々の効果です。

注意

最近はのテーマは「jQuery」を使うことが多く、headerのままでないと機能しないことが多いので「Keep jQuery in the Header」はチェックを入れておいたほうが無難です。

SANGOの方は「シェアボタン」が使えなくなるほか、「記事一覧タブ切替機能(トップページ)」を使っていると、タブが機能しなくなるようです。

Compress JPEG & PNG images

「PageSpeed Insights」の「画像を最適化する」を改善するために画像を圧縮するプラグインです。やたら腹が立つパンダが印象的です。

有効化すると、画面が切り替わって上にこんな表示が出ます。よく分かりませんが使うためには押したほうがよさげなのでクリックしちゃいます。

また画面が切り替わりました。どうやらアカウント登録をしないといけないようなので、最初から入っているアカウント名とメアドを確認して「Register Account」を押します。

また画面が切り替わり、何かメールが送られたようなので、先ほど登録したアドレスを確認してみましょう。

Activate your account」というボタンのあるメールが届いていたので、臆さず押します。バビはそういう子です。

何かこういうページが開きます。一応ブクマしときました。

WordPressの管理画面に戻って、「設定」から「メディア」を開きます。

どうやらアカウントが有効になっているようです。

私は今まで圧縮なんてしたことなかったので全部にチェックを入れておきました。

画像を圧縮してみます。「メディア」の「ライブラリ」を開いて、一覧表示の形式を切り替えます。

切り替わった一覧の右にある「Compress」を押すと1つ1つの画像を圧縮できます。

ですが、私の場合圧縮してないファイル数が4,000枚超えでした。1枚1枚やってられないので、一括でやっちゃいます。

ただ、もしかすると画像の表示に影響があるかもしれないので、何枚かやって表示に問題ないか確認しました

メディア」から「Bulk Optimization」を開きます。

アップロードしてる画像が666枚。圧縮してない画像が4,090枚だそうです。迷わず「Start Bulk Optimization」を押しちゃいます。バビはそういう子です。

少しずつ圧縮されていくのですが、この「Compress JPEG & PNG images」で圧縮できるのは月に約500枚だけなんです。全部やるなら有料化が必要なので、今月はここまでにしておきます。

MEMO

ちなみに4千枚もの画像ですが、WordPressは画像をアップロードしたときにアイキャッチ用の画像などを自動生成するからなんだそうです。これを自動生成しないようにする方法もあるようです。

参考 WordPress:画像アップロード時の自動生成を停止する方法(medium_large_size_w含む)NxWorld

最終的な効果は

さて、画像は一応トップページにあるものはある程度圧縮しました。最終的な速度はどうでしょう。

最初から比べると以下のとおりです。

  • モバイル:64→76
  • パソコン:59→77

さすがに80は超えられませんでしたが、かなり改善されてます。

せっかくなので他の速度チェックサイトでもチェックしてみました。GTmetrixというサイトです。

GTmetrix

結果がこれ

こっちはB(84%)だからまあ、いっか!

と、自分を慰めています。

 

とりあえずプラグインでできることのみなら十分な結果なので、今度はプラグイン以外でできることもやってみる予定です。

コメントを残す

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