【SIMPLESTER】ページ表示速度の改善策３つを紹介

皆さんサイト運営順調ですか！

今日は当サイトで適用しているテーマＳＩＭＰＬＥＳＴＥＲ（VER.5）＠ＳＴＩＮＧＥＲ５での、ページ表示速度改善策について記事にしたいと思います。

最近ＴｗｉｔｔｅｒのＳＮＳボタン表示速度が異常に遅い・・・
皆さんの中にも感じている方は多いのではないでしょうか。

当サイトも読み込みが終わらず、ずっとＴｈｒｏｂｂｅｒ（スローバー）がクルクル回った状態になる事があったため、対策に乗り出しました。

何をすれば改善されるのか、まずは調べる

「SIMPLESTER SNSボタン」でググッてみると、ズバリなやつがありました。
http://torapple.com/simplester-sns/

また、プラグインの導入で速くなることをどこかで見ていたのでそちらも調べてみました。
http://calico.xyz/2014/12/13/speedup/

さらに当サイトは画像をよく使っているので、画像サイズの圧縮も速度改善につながると考えました。
http://wispyon.com/ewww-image-optimizer/

今回はこの３つを実施していきたいと思います。
ＳＮＳボタンは時間が掛かりそうなので、最後に実施しました。

１．プラグインを導入

@calicocatxyzさんの記事を参考に「Autoptimize」プラグインを導入しました。

１つ気になったのがＳＩＭＰＬＥＳＴＥＲでは、
CSS Options の Optimize CSS Code? はチェックしない方が良いでしょう。
私の環境では何故か半角文字の見た目が違和感出ていました。

また、当サイトではnend広告を配信していますが、導入した直後は広告が表示されなくなりました。
ただこちらもcalicoさんの以下記事を参考に解決できました。
http://calico.xyz/2015/09/04/autoptimize-solution/

２．画像サイズの圧縮

@yume_pyonさんの記事を参考に「EWWW Image Optimizer」プラグインを導入しました。

過去記事の画像についても、WordPress管理画面の「メディア」→「Bulk Optimize」を選択し、「start optimizing」ボタンを押すことで圧縮が可能です。
当サイトは２００画像程度でしたが、１０分程度で終了しましたよ。

３．ＳＮＳボタンの軽量化

こちらはtorapple.comさんの記事を参考に

• 「SNS Count Cache」プラグインを導入

さらに下記４ファイルをバックアップ後、直接編集します。

• style.css （SIMPLESTER）
• style.css （STINGER5）
• sns.php（STINGER5）
• sns-top.php（STINGER5）

ここでも１つ、気になったというか前提の話なんですが、Ｔｗｉｔｔｅｒアカウント作成とＦｅｅｄｌｙへの登録が済んでいる必要があります。

私はＦｅｅｄｌｙへの登録が済んでいませんでしたので、このタイミングで実施しました。
参考記事）http://pc-karuma.net/feedly-init/

実施結果

３つの改善策を実施した結果、PageSpeed Insightsの評価は

モバイル

↓

９ポイントの改善

ＰＣ

↓

７ポイントの改善
とモバイル／ＰＣともに効果がありました。やったね。

最後に

ページの表示速度はやっぱり重要ですよね。
私も表示速度の遅いサイトだと、すぐ戻って別のサイトに行ってしまいます。
ＳＮＳボタンの軽量化は少し手間ですが、効果は大きいですのでよかったら試してみてはいかがでしょうか。

それでは。

 - SEO, サイト運営