レンダリングを妨げるリソースの除外について はてなブログ

f:id:gamelifecompany55:20190201132618j:plain

レンダリングを妨げるリソースの除外について はてなブログ

PageSpeed Insightsの判定が厳しくなり、ページ表示スピードをもっと早くしないため
その考察のための記事。

はてなブログでの紹介です。

今回は、「レンダリングを妨げるリソース」について

レンダリングを妨げるリソースとは?

ソース
developers.google.com

まとめると、ページを読み込んでいる最中に。JavaScriptが読み込まれることで
ページの表示が遅れているということ。


たとえば、グーグルアドセンスとか
SNSボタン、登録ボタンなど


解決方法について

1:Javascriptのインライン化
インライン化を行うことで、スクリプトの外部リクエストがなくなり
より遅延なくページを作成することができるようになる。

2:JavaScriptの非同期
アドセンスは初めのコード作成で、同期か非同期を選択して作成できる。
そのため、もし同期でアドセンスコードを作成している場合は、作成したコードを削除して
新たに非同期に設定したアドセンスコードを取得して貼り直すことで改善することができる。

JavaScriptを非同期にすることで、ページ表示時のJavascriptの表示は遅くなるが
ページの解析の邪魔をしないのでページ表示を早めることができる。

3:JavaScriptの読み込みを遅らせる。
ページ表示に必要なJavaScript以外は、最後に動作させてページ作成を優先させる方法。

4:必要のないJavaScriptを削除する
ソーシャルボタンや登録ボタン、ツイッターのツイート表示など、ページ表示に関係のないものを
そもそも削除する。

オススメの解決方法

wordpressなどを使用してブログを作成していると、ブログ内のコードより軽量化することができるが
はてなブログだと、サーバの設定やコードの知識があまりなくても使用できるメリットの元、使用している方が多いとおもいますので

オススメは
「JavaScriptの非同期」とくに、アドセンス広告の非同期

それと

必要のないJavaScriptの削除がオススメ

アドセンス広告の非同期でのコード作成方法は
wakaba-penguin.com

現在のバージョンでは、自動的に非同期の設定でコードが作成されているみたいです。同期・非同期の選択ができず、コードをみると非同期処理されているコードになっています。

support.google.com


必要のないJavaScriptの削除は
はてなブログでは、デフォルトのソーシャルボタンを表示しているのであれば
そちらの削除をオススメします。

f:id:gamelifecompany55:20190208143447p:plain
ソーシャルボタンなし

f:id:gamelifecompany55:20190208143452p:plain
ソーシャルボタン 全部のせ


スコアが全然違います。ここまでのスコアの差はあまりにないので
デフォルトのソーシャルボタンを使わずに、軽量化されたソーシャルボタンを利用するか、削除するか をオススメします。

削除は、ソーシャルボタンのチェックを全て外すだけで表示をはずすことができます。

f:id:gamelifecompany55:20190208144009p:plain


ほかに簡単に改善できるポイントとして
読者になるボタンや、ツイッターの表示、関連記事の表示あたりかと思います。


レンダリングを妨げるリソースの除外について はてなブログ
を終わります。

www.glco.xyz