PageSpeed Insightsのレンダリング警告について

確認をしてみました

画像を最適化する
EWWW Image Optimizerプラグインなどを使い画像を最適化してください

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
これは非同期にしたりまとめることで減らすことはできます

参考:PageSpeed Insghts対策
ちなみに上記の対策をすると追従ウィジェットが動作しなくなりました
僕の環境では

他にも影響があるかもしれません

なんとなく対応できそうなのはこれぐらいな気がします

HTMLの圧縮は
Autoptimizeプラグインを使うとできます

Autoptimizeを使えばjavascript&cssも圧縮できます

ただ不具合がおきるかも…

ありがとうございました。

消えてしまうのは怖いので、少し様子見をします。

EWWW Image OptimizerプラグインはＷＰＸを使っていると不要なので、今は使っていません

EWWW Image OptimizerプラグインはＷＰＸを使っていると不要なので、今は使っていません

不要なのではなく使えないのではないでしょうか?
違いましたらすみません。

EWWW Image OptimizerをWPXでも動作する設定方法があったので
参考にしてみてください
WPXで画像圧縮プラグインEWWW Image Optimizerが使える設定方法！

画像は圧縮されているので、問題ありません。

わいひら様へ

同じＵＲＬなのですが、トップページ最下段に最新記事を表示しているのですが

画像の回り込みが解除されています。

これを直すＣＳＳをご教授ください。

わいひら様へ

同じＵＲＬなのですが、トップページ最下段に最新記事を表示しているのですが

画像の回り込みが解除されています。

これを直すＣＳＳをご教授ください。

多分わいひらさんも言われるのではないかなと思いますが
初めての方は必ずお読みくださいにもあるように1つのトピックにつき1つの質問を書いてください。
なので新規で作っていただければと思います

1つのトピックにつき1つの質問を書いてください（複数質問があるときはトピックを分ける）

ファーストビューで表示される部分のスタイルをheadタグ内にstyleで書くと評価は格段に上がります。

単に、PageSpeed InsightsはGoogleが提唱する指標に沿ってればスコアが上がるもので、別にそんなに気にするところではないです。まぁ表示は速くはなりますが速く見えるようになるだけで根本的な話ではないので。

で、実際にraopiさんのサイトにキャッシュ無しでアクセスしてみてもそこそこ高速なので特に改善するとしたら、各cssやjavascriptの圧縮ぐらいでしょうか。
※ 親・子テーマstyle.cssの先頭にあるコメント部分のいわゆるコメントヘッダは圧縮してはいけません。
※ コメントヘッダ以外を圧縮する必要があります。

> 追加でネットワークのラウンド トリップが必要

ここの意味合いとしては応答を早くしろということかと思います。つまりは高速なサーバーを利用しろということかと。
どんな指示がでているのかは画面を見てないのでわかりませんが、preconnectとか、prefetchとかそういうのの話かも知れません。

DNSルックアップからHTTPリクエストを経て、データをダウンロードするまでの過程をラウンドトリップというわけですが、一般的にはHTTPリクエストを減らすのが簡単です。簡単ですがこれが面倒くさいんですけどね(笑)

各cssを圧縮したりするのは「データをダウンロードする」のに、ファイルがより軽い方が良いということに繋がりますが、cssがたくさんあれば、それをそれぞれhttpで「これを読め」と指示するわけですからそこに時間がかかります。そこで、cssをひとまとめにして1つにしてしまうというのが一般的です。
これはautoptimizeなどでできるものの、autoptimizeが色々処理するのに時間がかかるのと自動でやってしまうため何かしらの問題が発生することもあり諸刃の剣です。

そこでSimplicityで言うなら、親テーマ子テーマのstyle.cssはまぁ読み込むとして、その他諸々のcssがあります。responsive(-pc等).cssとかextension.cssとか、fontawesomeとか、各プラグインのcssとか。
こういうのを子テーマにひとまとめにしてしまうのが良いです。で、各プラグインのcssはfunctions.phpで解除してしまうわけです。

プラグインのcssは子テーマstyle.cssよりも後で読み込まれるだろうと思うので、先に読み込んでおけば良いですし、子テーマstyle.cssが多少巨大になったとしてもテキストファイルですからファイルサイズはさほどではありません。

しかしこれをしようとすると、サイト自体は高速になりますが管理が大変になりますので、ローカルで各cssごとにファイルを(scssなどで)管理してgulpなどのタスクランナーで1つのcssにまとめて書き出すというような管理が必要になります。プラグインなどはアップデートのたびに修正する必要もあります。

つまりGoogleのような、そのサイトに特化したcssを書いているのであればそれもできるだろうけれども、wordpressの仕組み的にはそれは一般的ではないということです。

サーバーによっては利用できるサーバーとそうでないサーバーもありますがgzip圧縮したものを利用するのも良いです。いちいち処理をさせないということでキャッシュも有効です。

ブラウザはcssの処理が終わらないとページをレンダリングできません。css自体がレンダリングブロックにあたりますから、ここをできるだけ改善するのが得策です。

手を入れるかどうかはraopiさん次第ですが、今の所急いてやる必要はないかと。

> 画像の回り込みが解除されています

.widget-under-page-sns-buttons .new-entry::after {
    content: "";
    display: table;
    clear: both;
}
.widget-under-page-sns-buttons .new-entry-thumb {
  float: left;
}
.widget-under-page-sns-buttons .new-entry-content {
  margin-left: 100px;
}

が一番簡単ではないかと思います。後はアイテム間の調整とかをして下さい。

大変参考になりました。

ありがとうございました。解決しましたのでありごとうございました