レンダリングを妨げるリソースの除外について はてなブログ
PageSpeed Insightsの判定が厳しくなり、ページ表示スピードをもっと早くしないためその考察のための記事。
はてなブログでの紹介です。
今回は、「レンダリングを妨げるリソース」について
レンダリングを妨げるリソースとは？
まとめると、ページを読み込んでいる最中に。JavaScriptが読み込まれることで
ページの表示が遅れているということ。
たとえば、グーグルアドセンスとか
SNSボタン、登録ボタンなど
解決方法について
１：Javascriptのインライン化
インライン化を行うことで、スクリプトの外部リクエストがなくなり
より遅延なくページを作成することができるようになる。
２：JavaScriptの非同期
アドセンスは初めのコード作成で、同期か非同期を選択して作成できる。
そのため、もし同期でアドセンスコードを作成している場合は、作成したコードを削除して
新たに非同期に設定したアドセンスコードを取得して貼り直すことで改善することができる。
JavaScriptを非同期にすることで、ページ表示時のJavascriptの表示は遅くなるが
ページの解析の邪魔をしないのでページ表示を早めることができる。
３：JavaScriptの読み込みを遅らせる。
ページ表示に必要なJavaScript以外は、最後に動作させてページ作成を優先させる方法。
４：必要のないJavaScriptを削除する
ソーシャルボタンや登録ボタン、ツイッターのツイート表示など、ページ表示に関係のないものを
そもそも削除する。
オススメの解決方法
wordpressなどを使用してブログを作成していると、ブログ内のコードより軽量化することができるがはてなブログだと、サーバの設定やコードの知識があまりなくても使用できるメリットの元、使用している方が多いとおもいますので
オススメは
「JavaScriptの非同期」とくに、アドセンス広告の非同期
それと
必要のないJavaScriptの削除がオススメ
アドセンス広告の非同期でのコード作成方法は、
wakaba-penguin.com
現在のバージョンでは、自動的に非同期の設定でコードが作成されているみたいです。同期・非同期の選択ができず、コードをみると非同期処理されているコードになっています。
必要のないJavaScriptの削除は、
はてなブログでは、デフォルトのソーシャルボタンを表示しているのであれば
そちらの削除をオススメします。
スコアが全然違います。ここまでのスコアの差はあまりにないので
デフォルトのソーシャルボタンを使わずに、軽量化されたソーシャルボタンを利用するか、削除するか をオススメします。
削除は、ソーシャルボタンのチェックを全て外すだけで表示をはずすことができます。
ほかに簡単に改善できるポイントとして
読者になるボタンや、ツイッターの表示、関連記事の表示あたりかと思います。
レンダリングを妨げるリソースの除外について はてなブログ
を終わります。
