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

f:id:gamelifecompany55:20190201132618j:plain

この記事の目的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSの圧縮化と非同期化

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

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