[PageSpeed Insights] ブログを素早く表示するためにやったことまとめ

[PageSpeed Insights] Webサイトを早く表示するためにやったことまとめ

サイトパフォーマンス(ページの読み込みや表示までのスピードなど)の向上は、SEOにも効果があると言われていますし、なにより見てくれる方のストレスを軽減できます。

このブログは5Kのディスプレイ(iMac)で更新していることもあって、画像ファイルが大きくなりがちです。(5Kでも綺麗に見えるよう大きめのサイズで画像を作っているため)

記事も増えてサイトの読み込み速度も気になってきたので、PageSpeed Insightsを使って数値を確認しながらいろいろと改善してみました。

PageSpeed InsightsはGoogleが提供しているツールで、Webサイトのパフォーマンスを計測してくれ、改善点を提案してくれます。

スマートフォン版とPC版の両方の数値を提示してくれるので、とても参考になりますね。

といってもほとんどのサイトがレスポンシブで作られていると思いますので、基本的には一つの作業でスマホとPCの数値が改善されるはずです。

この記事ではパフォーマンスアップのためにおこなった作業を紹介しています。 結果的に結構改善することができました。

現状分析

まずは作業を行う前に現状のパフォーマンスを確認。
(100点満点です)

モバイル・・・31点
パソコン・・・29点

うーん…。かなり悪いですね。

他サイトのスコアはどんな感じ?

制作会社LIGさんのWebサイト
モバイル・・・56点
パソコン・・・6点

オニマガさん
モバイル・・・57点
パソコン・・・67点

Webクリエイターボックスさん
モバイル・・・52点
パソコン・・・52点

他にもいろいろと見た結果、今回の改善の目標は50点以上にする、に決めました。

CSS、JSの圧縮

PageSpeed Insightsの改善点を参考にひとつづつおこなっていきます。

まずはソースファイルの圧縮から。

リソースの圧縮(ミニファイ)とは、余分なスペース、改行、インデントなどの不要なバイトを取り除くことです。HTML、CSS、JavaScript を圧縮すると、ダウンロード、解析、実行時の速度を向上させることができます。

出典:PageSpeed Insights について

PageSpeed Insightsでは圧縮したほうがいいファイルをリスト化してくれます。 リスト化されたファイル全てを圧縮していきます。

今回は「Refresh-SF」を使ってCSS、JSともに圧縮しました。 ソースをコピペするだけで圧縮してくれるので楽チンです。

ただ良く更新するメインのCSSだけは圧縮しないでおきました。 (後々更新しにくくなるのは嫌なので…)

CSSの読み込みも削除

このブログはSimplicityをテーマに使っています。
デフォルトで組み込まれているCSSで不要なファイルはこのタイミングで削除しました。 (コメントやアイコンフォント、スマホ用のメニューなどなど)

ちなみにCSSの読み込みは「/simplicity2/lib/フォルダ」にある「scripts.php」へ記述されています。 必要な記述を消してしまわないよう恐るおそる…。

この段階で数点UPしました。(微々たるものですが…)
モバイル・・・34点
パソコン・・・30点

画像ファイルの圧縮

こちらが一番効果がわかりやすかった施策でした。

画像ファイルについても圧縮したほうがいいファイル名がリストになるので、一つづつ圧縮していきます。

画像の圧縮については「Tiny PNG」や「JPEG mini」などいろいろとWebサービスがあるのですが、個人的には「Compress JPEG Images Online」がオススメです。

いつも記事を更新する際に画像を圧縮していたのですが、今回引っかかっていたのはWordpressが自動で生成するサムネイル画像で盲点でした。 確かに記事一覧ではそちらの画像が使われるので、積もり積もってという感じでしょうか。

EWWW Image Optimizerは効果がある?

WordPressのプラグインに「EWWW Image Optimizer」というものがあります。このプラグインはWordpressにアップロードしてある画像を一括で圧縮してくれるというもの。すごく便利でいろいろなブログで紹介されていますね。ただ今回、試しにこちらのプラグインも試してみたのですが点数には影響せず。圧縮されてはいるものの、圧縮率が低いのかな…?過去の画像も一括で圧縮できる優れものなのですが。

そもそも画像はあまり使わないようにした

画像ファイルの圧縮もそうですが、そもそも画像を使わないという選択もパフォーマンス向上には効果的です。 人気記事の一覧に大きく画像を使っていたのですが、テキストのみの見た目に変更しました。

アドオン Lazy Loadで画像を遅延読み込みさせる

画面外の画像を読み込まず、スクロールしたタイミングで読み込ませる(遅延して読み込ませる)Lazy Loadを導入しました。 Wordpressだとアドオンとして提供されているので簡単に導入できます。 こちらは点数には直接反映されなかったのですが、ページ表示の向上ということで採用しています。

Head Cleanerでheadタグ内をキレイに

headタグ内の情報を整理・統合などしてくれる「Head Cleaner」を導入してみました。

※SimplicityのSNSボタンのカウント部分にエラーが出たのでHead Cleanerは削除しました。

人気記事ランキングをSimple GA Rankingに変更

人気記事のランキングに「WordPress Popular Post」を使っていたのですが、「Simple GA Ranking」のほうがパフォーマンスがいいということで変更しています。 設定がわりとややこしかったのですが、丁寧に解説してくれているブログが多かったので助かりました。

最終的な点数は…?

モバイル・・・54点
パソコン・・・79点

でした!

モバイルをもうちょっと頑張りたいところですが、50点を超えたのでOKということにします…。

キャッシュ系のプラグインなども効果があるようですが、なかなかにややこしそうなので今回はやめておきました。

課題としては高解像度の画像を使うことが多いので、いかに圧縮できるかというところでしょうか。 サイトをデザインする際に画像サイズの設定が重要そうですね。

また定期的にチェック・改善していきたいと思います。 最後までお読みいただきありがとうございました。