今日は、PageSpeed Insightsでブログの表示速度を診断した後に出てくる
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正方法について書いていきたいと思います。
と表示されますので、それを1つずつ解決していこうと思います。
目次
PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを～」を修正するのに使った「Autoptimize」プラグイン
遅延を起こしているJavaScript1個とCSSリソースが13個、さてこれをどう修正すればいいのか？
私のようなプログラム知識のない人間がいじっていいものか、悩みながらいろいろ調べていたら「Autoptimize」というプラグインを見つけました。
今回参考にさせていただいたのは、This is between us.さんの「Webサイトの読み込み速度を改善する」という記事です。
「Autoptimize」はhtml、JavaScript、CSSコードを最適化するというプラグインです。
ただ、他のプラグインとの相性問題、テーマによっては不具合が起こる可能性もありますので設置は自己責任でお願いします。
本当はプログラムをいじってやるのがいいのでしょうが、私のような知識のない人間がいじって元に戻らなくなってはシャレにならないので、今回はプラグインで一発解決する方法を選びました。
ちなみにインストールしようと考えている人のために、私がインストールした時の環境を教えておきます。
テーマ：AFFINGER4
インストール済みプラグイン
プラグイン「Autoptimize」インストールと設定
WordPressに「Autoptimize」をインストールした後に設定をしていきます。
下にスクロールして「Autoptimize」の[設定]をクリックします。
今回の設定では[HTMLオプション][JavaScriptオプション][CSSオプション]の3つにチェックを入れました。
チェックを入れたら[変更を保存してキャッシュを削除]をクリックします。
PageSpeed Insightsでは「ブロックしているJavaScript/CSSを排除する」だけなので、[HTMLオプション]は関係がないように思いましたが、[HTMLオプション]にチェックを入れたほうがPageSpeed Insightsのスコアが上がりました。
これにチェックを入れるとどうなるのか、というとHTMLソースの無駄なタグ（改行、スペース）がなくなりページが軽くなります。
ただ、HTMLソース、CSSソースを頻繁にいじっている人はタグの場所がわかりずらくなるようなので、そういう人は[HTMLオプション]のチェックを入れないほうがいいかもしれません。
まとめ：PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングを～」を修正する方法
今回の記事では、PageSpeed Insightsの「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」の修正方法について書きました。
「Autoptimize」というプラグインですが、正直インストールして不具合が起きたらどうしようと思いながら実行してみました。
しかし、特にデザインが崩れたり、表示するはずの画像が表示されなかったりといった不具合もなく設定は完了しました。
実際に「Autoptimize」で最適化することによってPageSpeed Insightsのスコアが上がることを確認しました。
このプラグインを入れたからといって修正項目がすべて消えるわけではありません。
あくまでも最適化できるところをやってくれるというだけなので、修正できない部分は検索されて残ります。
ただ、手動でプログラムをいじって最初からやるよりは全然楽ですね。
