ゆめの町はてなランド

よーし、パパ頑張っちゃうぞーの心意気でやっております。

たった5分でブログの表示速度を向上させた取り組み2つを紹介

この記事をシェアする

『セイチョウジャーニー』を目下、読書中でお馴染みのイエロートマトです。

本書にて言われている「成長と充実のハードルを下げる」というのは読み進めていく度にハッとするような気づきをうまく言い表しており改めて技術者必読だと感じます。

イチョウジャーニーはちゃんと感想をまとめて発信したいですね。

https://growthfaction.booth.pm/items/1035830

無料サンプル読んで興味を持ったなら読んで損なしですよ。

最近、ブログをある程度更新しているのもこのセイチョウジャーニーと染谷 昌利さんの
『複業のトリセツ』の影響です。 

複業のトリセツ(DMM PUBLISHING)

複業のトリセツ(DMM PUBLISHING)

 

そんな染谷昌利さんのブログ飯もKindleセール中ですので、ブログやっている方ならこちらも是非。ブログのモチベーションアップにもつながりますよ。

ブログ飯 個性を収入に変える生き方

ブログ飯 個性を収入に変える生き方

  

そんなある程度更新している当ブログで気になった表示速度の向上の話が今回のテーマです。

前々から私のブログは記事数に対して表示速度が遅いなと思っておりました。表示速度の遅さというのはSEO云々という部分もあるかもしれませんが、単純に開くのが遅いサイトは読者さんの貴重な時間を待たせているということでいいことはなにもありません。そこでこの機会に表示速度改善に取り組みました。 

 

現状分析

まずは本当に遅いのか、現状定量化しようということでこちらのPageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=jagoogleのサイト速度計測ツールです。こちらに自分のサイトのURLを入れることで速度が表示されます。

それでは改善前の結果がこちら。

f:id:coinman:20181027130828p:plain

「LOW」、日本語に訳すと「低い」。うーん、googleのお墨付きをいただいてしまいました。これは早急に改善せねば。

 ちなみに改善後がこちら。

f:id:coinman:20181027130643p:plain

おお!から57⇒76の19の上昇!評価も「LOW」が「Medium」に!
体感的にもやはり速度は向上しています。

それでは、どのように改善点を見つけ、改善したかを紹介しようかと思います。

改善策の選定手法

そもそも、このスピードテストは表示のマイナスとなっている要因を分析し改善点を表示してくれます。しかもしかも、その改善内容に最適化した画像イメージファイル、css、js(JavaScript)のコードまで生成してくれます。ありがたすぎます。

といってもコードに関しては私がWEB系の言語に疎く、あまり触りたくないというので、今回の扱う範囲は画像イメージの差し替えのみを行っていきます。こちらが簡単ながら直接的にかなり効くのでこちらを修正しました。

1.画像イメージの最適化

変更したのはアイコンに用いていた画像と、ブログのヘッダー画像(このブログではパソコンやらイヤホンやらが写っているやつ)です。

これらは特に意味はないがカッコいいかなと思っていた画像なのですが、かなり表示に負荷を掛けていたようです。こちらをはてなブログの設定画面からさきほど最適化した画像に差し替え。

 2.トップページの記事数(PC版)を10⇒1つに

そして、トップページの記事数を減らしました。このブログの読者の方は、およそ、調べたい情報があって、結果、ここにたどり着いたという人がほとんどなはずです。そんな読者さんがいきなり数記事分読みたいということはまずありません。それならトップの記事数は一つで十分で、その記事がある程度満足できるなら読者さんはそのまま読み進んでいくのではと思います。そこで記事数を1つに減らすことで表示速度をあげようというものです。こちらもはてなブログの設定からトップページの記事数(PC版)を変更できます。

上記2つのみ、5分足らずで取り組めてある程度の効果を発揮することができました。
もし、ご自身のブログの表示速度が気になっている方は一度試してみてはいかがでしょうか。