ブログの表示速度（PageSpeed Insightsでの計測結果）をあげられないか、試行錯誤してみました。
(1)スクリプトの読み込みをヘッダーからウィジェットに移動
外部ファイルになっているJavascriptの読み込みをヘッダー内に追記して行っていましたが、それをウィジェット内にインラインで記述するように変更
計測結果は「モバイル（パソコン）」
同じ時間帯で複数回計測
計測時間 7:00
上が改造前の状態の数値
下が改造後
Simplicity 41(87) - 44(85) - 45(88) (前回)
Simplicity 53(93) - 57(96) - 62(91) (改造後)
参考までにCocoon無改造（ヘッダー読み込み）も同時に計測
Cocoon 35(85) - 38(87) - 45(89)
Javascriptを一つにまとめる
さらに、複数に分かれていたJavascriptのファイルを一つのファイルに纏める。これにより、スクリプトの呼び出しが一回だけですべて読み込めるようになる（読み込み場所はウィジェット内インラインのまま）
10:00
改造後Simplicity 73(80) - 64(86) - 67(80) - 70(87)
無改造Cocoon 32(77) - 42(86) - 42(90) - 39(90)
Javascriptを一つにまとめる（ヘッダー読み込み）
18:00
改造後Simplicity 50(89) - 40(92) - 34(93) - 49(89)
時間帯を変えてもう一度、まとめ+ウィジェット読み込み
18:00
改造後Simplici 47(93) - 57(93) - 35(88)
全ての広告を非表示に
07:00
60(92) - 61(93) - 61(92)
上部ヘッダー部分簡素化
07:00
63(93) - 63(94) - 61(94)
上部広告ウィジェットを削除（非表示だけでなくウィジェットを削除）
07:00
63(91) - 67(95) - 62(94)
上部ヘッダウィジェット機能を削除
7:00
63(95) - 63(94) - 66(94)
記事一覧の途中に自動挿入される広告を廃止
7:00
53(90) - 56(86) - 44(88)
モバイルページだけ広告を全て削除
65(92) - 66(93) - 63(93)
途中から面倒くさくなって(笑)比較対象なし、時間帯も別になって、検証の意味をなさなくなってますが。
色々やってみた感想としては、どれも、やっただけ、数値は微妙に上がる印象、ただ、劇的に上がることはない感じ？
ちょっと意外だったのは、すべての広告を非表示にした状態でもあまり数値が変わらなかったこと。単に計測時にネットが重かっただけかも知れませんが。
日時が変わると、ネット／サーバーの負荷具合のバラツキが大きいような？
もう一度、SimplicityとCocoonで広告の数と表示方法を揃えて比較
7:00
Sim 56(88) 51(91) 41(84)
Coc 60(94) 60(93) 58(95)
8:00
Sim 43(92) 53(94) 49(93)
Coc 47(94) 49(94) 51(95)
やっぱり、わずかにCocoonが速いけれど、劇的な差はなし、という結果は変わらずですね。
※完全に同一の広告が表示されているわけではないので、配信される広告サーバーの重さで差が出ているかも知れません。
今度は広告をすべて非表示（テーマの機能で「広告をすべて非表示」に）の状態で比較
9:00
Sim 62(93) 61(91) 60(93)
Coc 79(94) 86(94) 78(92)
ということで、まとめ。
パソコン表示の結果は、何をどう変えても安定して変わらない印象
広告がない状態では、やはりCocoonのほうがSimplicityより速い
広告を入れて重くなると、ややCocoonが速いが、差はあまりない
という感じですかね？
トータルで、わずかではありますが、やはりCocoonのほうが速いように見えます。
というか、何をどうやってもSimplicityはあまり変わらない印象
そして、色々と、Simplicityではできない事があって「痒い所に手が届かない」感じがあったのが、Cocoonでは改善されている部分があり。
結論として、やはり私もCocoonに変えるという結論になりました(^^;)
Cocoon ／ Simplicity などのテーマの問題ではないのですが、検索していたらスクリプトの読み込み方法を変えるという記事が結構でてきます。
PageSpeed Insight の改善提案に
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
というのが出てきますが、javascriptを「非同期」にすると改善されるよ、という話。
手っ取り早く、やり方の覚書メモ
以下のコードを Function.php に貼り付けるだけ。
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
こちらを参考にさせていただきました。
https://webkikaku.co.jp/blog/wordpress/pagespeed-insights-javascript-css-rendering-block/
これは何かというと、
『JavaScriptにasync属性を付与して非同期にする』
と言う事のようです。
ただし、jquery.min.jsは対象外、管理画面では対象外、としている。
WordPressが最初に自動的に読み込んでくるJavascriptがあるわけですが、これにasyncを着けて非同期にすることでレンダリングを停止させないようにしているわけですね。
※同期になっていると、Javascriptが読み込まれ実行されるまでレンダリングは停止してしまう。非同期の場合は並行して実行されレンダリングは停止しない。（ざっくり言いすぎて語弊があるかも？）
ただし非同期ではうまく動かないスクリプトもあるので注意
自分で読み込ませてる外部ファイルのJavascriptにこれをやろうとしたらうまく動きませんでした。。。
これはWordPress全てに共通する問題なので、PageSpeed Insightでの評価が問題になってきている状況なので、いずれWordPressのバージョンアップ時に改善される（コードの記述は不要になる）かも？
上記コードを書き込んでテストしてみても、あまり速度が変わらなかったので、もしかしてもう対応されているのかも？
上記コード有り／無しで比較してみました
有 43(84) 35(87) 53(91)
無 53(84) 58(86) 39(86)
無しのほうが少し速い？でも39なんて出てるし…
んー分からん(^^;)
とりあえず、あまり変わらないなら、外しておきますか（余計なコードが入ってると何が起きるか分からないので）
コメント