試してみたのでその話を。サーチコンソールの速度テストでは対処方法がよくわからない改善方法を示されます。こんな感じです(これは画像ですよ)「ブラウザのキャッシュを活用する」「CSSを圧縮する」「最適化する」などですね。修正方法を表示すると具体的に示されますが多くの人がどうやって修正していいやらわからないと匙を投げます。匙を投げても埒があかないので仕方なしに検索しまくって学びますね。最初はちんぷんかんぷんだったこともやがて少しずつ理解出来るようになります。理解は出来ても面倒臭くてとてもやれないことなんかもありますね。「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」なんてのは理解は出来ても実現が難しいことの一つです。いった面倒臭いことを比較的簡単に実現できるという触れ込みのプラグインです。これを試しに入れてみました。OptimizationタイトルにPageSpeedで100点取ってる絵を乗せていますね。これいったい、何が出来るプラグインでしょう。クリティカルCSSの管理、条件付きクリティカルCSS、CSS配信の最適化、Javascriptのロードの最適化、遅延読み込みなどを設定できます。Optimizationを見つけられるのでインストールします。インストールすると「設定」ではなく「外観」の中に設定が現れます。最初どこにあるかわからなかったですよ。Fold」メニューが登場します。タブクリティカルCSSを設定、管理できます。クリティカルCSSすなわち「スクロールせずに見えるコンテンツに使用されるCSS」ですね。これを先に読み込み、残りを後回しにすることで速度が上るということです。登録したものはインラインで読み込まれます。このクリティカルCSSを複数登録できます。ホームの場合、ポストの場合、アーカイブの場合、ポストタイプの場合、それぞれのクリティカルCSSを保存しておき、必要に応じてインラインにて読み込まれます。ブログ全体のすべての表示パターンにおけるクリティカルCSSなんてのはとてもやっかいなものになりますね。以前、ちょっと探ってみましたが全ページのデザインに共通するものを探っているだけで非現実的な長大なCSSになってしまい諦めたことがあります。表示するページに応じてクリティカルCSSを使い分けられるとすれば希望があります。クリティカルCSSの作り方とは言え、登録するためにクリティカルCSSを作らねばなりません。これ簡単なことではありませんが、今の世の中便利になったものでそういうのをサポートするウェブサービスなんてのも出てきています。例として私が使用したのを乗せておきます。CSSをまとめておくまず、使用しているCSSをまとめてしまいます。優等生なひとはそもそも複数のCSSを使用していないかもしれません。それなら問題ありません。私なんかは基本的なCSS、サイト固有のCSS、使い回すためのCSS、複数使用しています。そのせいで読み込みが遅いんです。使用しているCSSを順序よく全部繋げます。予備としてファイルにして保存しておいてもいいですしコピペ用にまとめるだけでもいいと思います。Generatorを利用しました。目的のURLを入れます。ホームやポストやその他、クリティカルCSSを作成したい代表的なURLです。CSS欄には、さきほど用意した全部CSSをペーストします。大きなボタンをクリックすると、クリティカルCSSを作成してくれます。Createでクリエートして各URLごとのクリティカルCSSを作成できます。このページで作成されるクリティカルCSSがどこまで信頼できるものかわかりませんがとりあえず信用することにします。Optimizationに戻り、設定してもいいのですがせっかくなので作成されたCSSを縮小しておくのもいいでしょう。縮小するのもウェブサービスを利用します。online」をGoogle検索したブラウザのページが開きます。検索した結果の1位を試しに開きました。ミニサイズCSSが作られます。CSSに貼り付けて設定そんなこんなで作ったクリティカルCSSを条件設定と共に複数登録しました。タブお隣のタブ「CSS」ではCSSの最適化に関する設定ができます。Enabledにすることで、クリティカルCSSの設定が生きてきます。このCSSタブでは、CSSの遅延読み込みなんかの設定が出来ますね。クリティカルでないCSSをfooterに振ることもできます。クリティカルでないCSSをfooterに入れて遅延させてみましたが、一瞬ぷりっと変な表示になったりする場合もありました。クリティカルCSSが上手く作れてない証拠ですね。これを許容できるならCSSの後読み設定で問題ありません。タブJavascriptの調整は、場合によっては動作に支障を来しますから各自調整できる人はしてください。何も考えずに機能をオンにしたらあれこれ問題が発生しました。じつは私はこっちの知識はまったくなくて、どうしていいやら検討もつきません。自信のない方は設定したくても避けたほうがいいかもしれません。私も一旦はJavascriptタブを無効にしていましたが、諦めきれず、こそこそとテストを重ねて落としどころを見つけました。私個人が使用しているプラグインなどとの絡み故、一般化は不可能です。組み合わせは多岐に渡り、理屈も理解していないので「たまたまこれなら動くという偶然の組み合わせ発見」程度のメモです。チェックを入れてオンに。オンにしたのでエラーが出るプラグインやスクリプトを確認します。キャッシュが効かないようにしてサイトにアクセス、いろいろ操作してテストです。問題が発生したプラグインやスクリプトライトボックス系ライトボックス系のプラグインを使ってきました。いつも何かとの組み合わせで上手く動かないことになったりする代表格です。他プラグインやjqueryとの相性もややこしいです。Optimization、それにJetpackのPhotonとの相性悪いですね。