はてなブログ 軽量化とか〜ページ速度をできるだけ早くする。〜

▶最大80%オフ AMAZONタイムセール中

f:id:gamelifecompany55:20190201132618j:plain


この記事の目的

この記事では、はてなブログおよび
その他のブログでの、ページ表示速度を最適化する方法を考察し、記載する。まだ、知識が少ないため
より良い方法を知っている方がいましたら、教えてください。

できるだけ、知識が少ない人でもわかるように書いていきます。
わからない部分があれば、ツイッターかメールでおしえてください。

ページ速度測定方法について

PageSpeed Insightを使用して、指摘された部分を改善する。

developers.google.com
自分のブログのURLを入れ、測定する。詳しい使用方法は、たくさん他の人が書いているので省略。

f:id:gamelifecompany55:20190201133333p:plain
こんな感じで、改善点が出ます。

  1. レンダリングを妨げるリソースの除外
  2. 適切なサイズの画像
  3. JavaScriptの最小化
  4. 使用していないCSSの遅延読み込み
  5. 効率的な画像フォーマット
  6. 次世代フォーマットでの画像配信


診断の中でも、びっくりマークがついているものは改善の余地ありです。


レンダリングを妨げるリソースの除外

javascriptを利用していて、同期しているなら非同期にする。

例えば、アドセンス広告のコードは
非同期、同期のどちらかが選択できる。非同期にしていなければ、変更してコードを取得し直す。

それ以外は、ソーシャルパーツの除去です。
ソーシャルパーツ自体、かなり重たくページスピードに関係があります。はてなブログに準備されている物を利用すると
ページスピードが20くらい落ちます。試してみるとわかりやすいです。

それでも、ソーシャルパーツを利用したい場合は、軽量化されたものを利用するほうが良いです。

www.glco.xyz

こちらの記事で解説しました。

主にJavaScriptの非同期の設定、ソーシャルボタン、ツイッターの非表示、関連記事の削除です。

参考
www.imuza.com


適切なサイズの画像

これに関しては、かなりめんどくさいが
圧縮をめんどくさがった、過去の自分が悪い。

全てのアップロードした画像、または、指摘された画像を
圧縮処理を行った画像に置き換えていく。今の所、いっぺんにやる手段なし。


圧縮
tinypng.com
上記のようなサイトを利用して、画像を圧縮処理する。その後、ブログで使っている画像と変えるだけ。


JavaScriptの最小化

コードの圧縮化、非同期化などを試す。

アドセンスコードを入れすぎている場合は減らして、スコアがどのくらい変わるか確認してみる。

アドセンスコードが入れすぎるとかなりスコアに影響が出る。
そのため、多くて4~5個あたりが良いかと思われる。収益の増減についても調べたい。

実際に、JavaScriptの最小化を行った記事
www.glco.xyz



使用していないCSSの遅延読み込み

CSSの圧縮化と非同期化

www.glco.xyz

デザインCSSにスタイルシートを最後に読み込ませることで、ページ表示速度を向上させています。




効率的な画像フォーマット

次世代フォーマットでの画像配信

convertio.co

上記のサイトを利用して、jpegやpdfをjpeg200に変換することができる。
圧縮化と同様にこちらを行うとよい。