はてなブログの人気テーマ「ZENO-TEAL」で表示速度を早くするためにやったこと
おすっ！つな（@tu_na_69）です(*‘∀‘)
はてなブログのテーマ「ZENO-TEAL」の表示速度を改善するために行ったことをメモします。
サイトの表示速度をチェックしたところ、数値が低かったので改善してみました。
今回行った対策は、データ量の多いものを削除したり、軽いものに変えていく方法です。
改善後のサイトスピードの採点はこちらです。
モバイルでは数値があまり変わっていないようですが、パソコンでは前回の「41」→「71」と大きな改善が見られました。
はてなブログが、Wordpressなどに比べてそもそも重いとも言われているので、70点台が出ればまぁまぁかなと思います。
次世代フォーマットでの画像の配信とは
軽量化のポイントの前に、モバイルとパソコンの採点の大きな違いについて少し触れたいと思います。
モバイルとパソコンで表示速度が大きく違うのは画像の「次世代フォーマットでの画像の配信」に対応できているかどうか、という点が大きいようです。
↓このようなメッセージが表示されます。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
「JPEG 2000、JPEG XR、WebP 」などはじめて聞く言葉で、どう対処していいのか…。
調べてみましたが、次世代フォーマットでの画像の配信に関しては、こちらのサイトの説明がわかりやすかったです。
「次世代フォーマットでの画像の配信」に対応していない分、モバイルとパソコンでの表示速度の採点に大きな差が生じるのは仕方がないのかなぁ…と思います。
改善後、パソコンでの点数が大きく伸びたことからも、ここで行った改善策には効果があったといえると思います。
表示速度を早くするためにやったこと
【改善前】
先ほどの【改善後】と比べてみると、たいぶシンプルになったのがわかります。
画像の圧縮・縮小
まずは基本的な画像の圧縮・縮小から行いましょう。
ひごろから画像サイズは気をつけているのですが、気になる写真をいくつか修正しました。
これまで画像サイズの対処をしていなかったサイトでは、これだけでも大きく改善されると思います。
すでに削除してしまった画像に関しては、こちらの方法で画像サイズを縮小することもできます。
ヘッダー画像を削除
ヘッダーに設定していたオリジナル画像を削除しました。
ヘッダーの画像は幅サイズも大きくなり、サイズも大きくなりがち。これまで使っていた画像は、ロゴを貼り付けたり手間をかけて作ったオリジナル画像なので、とても気に入っていたのですが、思い切って削除しました。
ヘッダー下画像リンクを削除
ヘッダー下の画像付きリンクがお気に入りだったのですが、こちらを削除しました。代わりにナビゲーションバーを設置しました。
【修正前】画像のオレンジで囲んでいる部分です。
ここで使用される画像サイズを縮小するというのも、対策のひとつだと思います。
SNSボタンをオリジナルに変更
これまで使用していたはてなブログのSNSボタンを止めました。はてなブログのSNSボタンは、シェア数も表示されるため重くなりがちです。代わりに、オリジナルのSNSボタンに変更しました。
「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」→「ソーシャルパーツ」のチェックをすべて外します。
「変更を保存する」をクリックして完了です。
こちらのサイトを参考にさせていただき、SNSボタンを設置しました。
プロフィールを削除
記事下にプロフィール欄を設置したので、サイドバーのはてなブログプロフィールは削除しました。
まとめ
改善後のGoogle Analyticsでのサイト表示速度の結果は以下のようになりました。
サイトを開いてまず表示される部分は、できるだけ画像の使用は控えて軽くしておくのがベスト。特にはてなブログでは、軽量化のためにできることは限られているので、画像関連を整理しておくことは大事なポイントになります。
オリジナル画像をつかっておしゃれで個性的なサイトをアピールしたいという思いと、できるだけサイトを軽量化したいという思いを天秤にかけながらいいバランスでサイトづくりを楽しんでいきたいですね。
平均読み込み時間「7.62」はまだまだ改善の余地がありそうなので、思いきってテーマをまた変更して、もう少しサイトの軽量化に取り組んでみたいと思います。
