前回は画像の圧縮を対応することで23点から68点へと評価を上げることができました(∩´∀｀)∩
先生、今の私には……何が足りないですか！？
んーキミはちょっとあれだねぇ。
JavaScriptとかCSSとか多用しすぎ！
そういって採点表をさしだすPageSpeed Insights先生。
レンダリング（表示）を邪魔してるJavaScriptとサヨナラしなさい！
レンダリングを邪魔してる、とはページをお客さんに表示させるより前に、先にJavaScriptのダウンロードをさせているということです。
先にダウンロードが入っちゃ、表示が遅くなるのも当然ですよなあ(;´･ω･)
先生はが提示したリストを見ると、
ajax.googleapis……
Jqueryを読み込んでる。右下に出てくる「ページ最上部に戻るボタン」を機能させているコードです。
これを消せと……うーん(;'∀')
他にもJqueryでいずれ実装する便利機能が出てくるかもしれないし…。
use.fontawesome.com……
ページ内でフォントオーサムを使うためのjsだ！
これは申し訳ないけど、デザイン的に外したくないですよね……
rws.a8.net/rakuten/ranking.js
楽天市場のホテル情報を自動で表示してくれるjs、つまり広告のためのjsですね。
わかった、外そう。（キリッ）
ws-fe.amazon-adsystem.com/……
Amazonさんから写真を拝借するためなどで必要になってくるjs。
これがないとブログが味気ないものになってしまう……。
counter.hatena.ne.jp/……
訪問者数をカウントするためにはてなサーバーが自動で挿入している系統です。
これはどうすることもできません……><
platform.twitter.com/widgets.js
記事内にツイートを読み込んだりするツイッターのjs。
これもはてなが標準搭載してるみたいですし、機能的にも使いそうなものなので外せないですね！
cdn.blog.st-hatena.com
以下9個くらい、この明らかにはてな側の仕業っぽい（きっとブログ表示上必要な）JavaScriptが読まれています。
これもどうすることもできないので、泣き寝入りっｗ
レンダリングブロックするJavaScriptたちとサヨナラする2つの方法
自分で対処できるのは自ら『設定』⇒『詳細設定』⇒『検索エンジン最適化』⇒『headに要素を追加』に書き込んだところのみ。
あとは広告を貼るため、機能を追加するためなどで、HTML内（たとえばサイドバーとか）に直接書き込んで読み込んでいるJavaScriptたちだけ。
つまり自分で書いたものだけ！
さて、私のブログで対処できるのは…
- ajax.googleapis……（Googleが用意した、様々な機能を実現する基本のJquery）
- use.fontawesome.com……（フォントオーサムのjs）
- rws.a8.net/rakuten/ranking.js （楽天のjs）
- ws-fe.amazon-adsystem.com/（Amazonのjs）
この4つくらいですね！
とりあえず対処してみた
対処方法は2通りです。
そもそもjsの読み込みをやめる（消す）
使うことそのものをあきらめました！
楽天トラベルのホテル一覧が出るの好きだったけど……軽くしたいのでサイドバーから広告そのものを外しました。
これで3番の楽天jsは削除できました。
秘密の魔法『非同期（async）』を唱えてみる
もっかい書きますがレンダリングをブロックしてる、というのはつまり『ページの表示より先に各種JavaScriptをダウンロードしてきてる』ということです。
であれば！
JavaScriptを読み込むのをちょっと遅らせて……レンダリングの後にJavaScriptを読み込みさせれば、レンダリングブロックにはならない！
ということで魔法をかけます。
-----BEFORE-----
<script src="https：//use．fontawesome.com/2b6d2caf6e．js"></script>
-----AFTER-----
<script async src="https：//use．fontawesome.com/2b6d2caf6e．js"></script>
つまりasyncを書き足すだけ！
こうするとレンダリングの後からスクリプトを読んでくれるので、PageSpeed Insights先生のご指摘には出てこないはずです。
ただし、この魔法はタブー（禁忌）があって『document.……』みたいなコードが書かれているJavaScriptに使っちゃうと、そのスクリプトの機能が実行されなくなります(;'∀')
うちでいうとページ最上部に戻るボタン。
ためしに1番のGoogleのJqueryにasyncの魔法をかけてみたところ、ボタンが出なくなりましたｗ
ので、あきらめます。
このasyncの魔法で解消できたのは2番のフォントオーサムです。
レンダリングの後に実行しても、ちゃんとフォントオーサムは表示されています^^
対処できなかった2つ
ということで、どうしても対処できなかったのは1番のGoogleJqueryと、4番のAmazonjsでした。
JavaScriptの対処結果は……
68点⇒78点にあがりました！やった(^^♪
次はCSSをチェックしてみましょう。
CSS配信を最適化しなさいっ！
これが先生からのお達しです。
CSSの最適化ってなに！？
基本的にはこういうこと。
- 外部CSSファイルをたくさん読み込むとさぁ、重いんだよね！
- とはいえ<head>内にあまりにたくさんのCSSを書かれると、これまた重いんだよね！
- あとさぁ<p style="XXX">みたいにタグの中に直接スタイル書くのも重いからイヤなんだよね！
これがGoogle側からの見方のようです。
じゃあどうする？
指摘のリストを見ると、上から…
- はてなの基本CSS（対処ムリ）
- はてなのテーマに紐づいたCSS（対処ムリ）
- フォントオーサムのCSS1個目
- ウェブフォントのCSS1個目
- ウェブフォントのCSS2個目
- フォントオーサムのCSS2個目
- フォントオーサムのCSS3個目
フォントオーサムでCSS読みすぎ
フォントオーサムのために読まれてるCSSが3つあるようです。
フォントオーサムはいくつか設定方法があるから、ゴリゴリいじってるうちに何個も読ませる書き方しちゃったのかな…？
ということで見直しを図り、フォントオーサム用のCSSを1個にしました！
ウェブフォントでCSS読みすぎ
しかし私としては、スマホでの文字の読みやすさ（キレイさ）向上のためと、ロゴ部分のウェブフォントはどうしても譲れないため……この2つは諦めます！
つまり結果として対処できたのはフォントオーサムの重複のみでした。
点数は78点から変わらなかったので……
次回は『修正を考慮』と先生がいっている、指摘じゃなくてご提案にも乗っかってみてさらにブラッシュアップしてみたいと思います！
スマホはまだ赤いですし……(;'∀')
----------------
残る謎
他のはてなサーバーのブログさんをちょこちょこのぞいてみたところ、ウチほどjsがレンダリングを邪魔しているところはない……。
はてなカウンターのjsとかみんなはてなProなら必ず入ってそうなのに、jsが注意を受けていない……。
これはテーマを作った人による<head>内での書き方の順番（CSSが先かJavaScriptが先か）なのでしょうか…？？
謎が残りました(;'∀')
