グーグルスピードインサイツで修正すべきエラーが多発しており、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」等、画像の圧縮のように簡単に対処出来ないエラーは、皆様どのように対処されていますでしょうか?

探してみたところ，
mod_pagespeedの画像の問題については，過去の記事

>【雑談】Github Issues
投稿日 ： 2017/01/15(Sun) 21:44
投稿者 ： bee

で解決されていましたね。
それで私のサイトでは画像がおかしくならなかった訳でした。

このグーグルのサービスがどんな評価しているかと，有名どこのAmazonとFacebookのサイトを計測してみました。

Amazonはモバイルがpoor,PCはNeeds work。
FacebookはモバイルがNeeds Work，PCはgoodでした。

モバイルで高評価はなかなか難しそうです。

色々と実験されていて参考になります。

.htaccessのオプションは、WEBサーバーの拡張モジュール（ライブラリ）を
使う、使わないの設定かと思います。標準的なもの以外は、あまり
使いません。
「apache mod_pagespeed」で検索すると、色々な方が他のサーバーで
実験した結果などが確認出来るようです。

また、FreeStyleWikiで作成したWEBサイトはGoogleで検索した結果に
「ページがモバイル フレンドリーではありません。」と出ますが、
そのページの方が、HAIKで作成したページよりスコアは高いです。
構造はかなり違いますが、結局、最も優先度の高い評価の項目は
何なんでしょうね。

私はアクセス数は気にしなくて良いサイトが多いので、
実際にブラウザで閲覧して使い勝手が悪くなければ良いのかな…と
思っています。

その後ONにしたときの画像圧縮の問題を解決する方法を見つけました。

http://webmemo.biz/mod_pagespeed-htaccess/

にある方法です。
私も画質低下は許容できないので、実行してみました。
エックスサーバーではONにするとhtaccessの最終行に以下の記述が追加されています。

ModPagespeed On

これに加えて、このように修正しました。

ModPagespeed On
ModPagespeedImageRecompressionQuality 100
ModPagespeedDisableFilters rewrite_images

2行追加します。

この結果スコアがどう変わるかチェックしました。
モバイルは、
Poor　63/100
パソコンは
Needs Work　79/100

　単純にONにしたときより若干スコアが落ちました。画像圧縮を制限した結果でしょう。
　しかし私は画質優先で行きたいのでこれで良しとしたいと思います。
　他に問題が生じていないかしばらく様子を見たいと思います。

（追記）その後ModPagespeedImageRecompressionQuality 100は無しにしても，rewrite_imagesを禁止するだけで画質劣化は防げているようです。
圧縮画像を使用しないなら，画質100％は意味が無いのかもしれません。

Yujiro　さん

私のサイトではブログのサムネイルの改善をしています。
2017年1月20日の「【機能改善】QBlogのリスト表示のサムネイル画像のカスタマイズ」にある修正です。
　あとはtomzoさんの作った印刷用CSSやフォントサイズやなどの調整CSSもフッターに書いています。
アイキャッチは各ページに標準のプラグインで設定しているだけで特別なことはしていません。

　これらが関係しているかはわかりませんが。

　1日経過後のチェックということで今朝、クロームの設定で全画像キャッシュを削除してみましたが、やはりサイトの表示には特に異常は発見できませんでした。
　マイクロソフトのエッジでも問題なかったです。

　ただ今後もそのまま問題ないかはまだ未知数です。
たとえばこのサイトが参考になりました。
http://nagoya-neko.com/mod-pagespeed/

　この記事でも画像の問題が取り上げられています。私にとって問題になりそうなのは画質の低下です。写真についてはこだわりがあるので、画質低下が許容範囲になるかどうかですね。
　

>エックスサーバーによると確かに副作用があるようですね。

画像表示に問題がないうみほしさんの場合、画像表示に関して何かカスタマイズが入っていませんでしたっけ？

どこかで何か似たような議論があったような。

エックスサーバーによると確かに副作用があるようですね。
いまのところ私のサイトを友人宅からキャッシュを削除して再読み込みしても画像はアイキャッチを含めて崩れていないようです。
　全部を見たわけではないですが、設定から約半日以上経過した時点では異常は見られませんでした。

XSERVERにおいて「mod_pagespeedの設定」をONにすると確かにスコアは上がる
のですが、画像の縦横比が勝手に変更されてしまいました。

例えばロゴ画像はナビの余白部分いっぱいに横に引き伸ばされてしまいます。

「mod_pagespeedの設定」をONに設定後、自サイトページをリロードしてわかりました。

HAIK 7.0.2

以下XSERVERにある「mod_pagespeed」の参考情報。確かに表示崩れのことに言及あり。

https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

そういえば、この議論、過去にもあったような。何か解決先があったかも。

うまくいったので報告します。

診断で指摘された圧縮の設定をエックスサーバーで行いました。
サーバーパネルから「mod_pagespeedの設定」をONにすると判定のスコアが上がり，とりあえずパソコンではNeeds Work（78/100）となりました。
　モバイルではまだPOOR（62/100）ですがスコアは上がりましたので効果ありです。

加えて通りすがりのサルさん紹介のキャッシュ設定を.htaccessに設定しキャッシュ時間を30日にしたところ，さらにスコアがあがりました。
モバイルでNeeds Work（66/100）
パソコンでNeeds Work（84/100）
というスコアです。

　これでPOOR判定は脱しました。

haikに変更になる以前に、画像の圧縮等行った所、ユーザビリティが良くなったからか、検索順位がかなりUPした事がありました。
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」は、htmlへインライン化するとエラーが潰し込めるらしいですが、何せ素人故に方法については???といった塩梅です。
困ったものです。
Google側は、自己解決出来る、ユーザー思いの努力をしているサイトに検索結果を上げてご褒美を与えるようです。

通りすがりのサルさん紹介のキャッシュ設定やってみました。
しばらく様子見です。

私も、やってみたら、POOR　でした。

こちらのページは、参考になるのでしょうか。
https://syncer.jp/page-cache-setting

私のサイトもpoor判定でした。
修正の解説を読んでも，CSSやJAVAスクリプトなどHAIK自体をいじらないと無理そうです。
　たとえ改良したとしても，世の中の通信速度やPC・スマホの処理速度も上がってますし，それほど差が出るものかどうか？
　

以下のグーグルのサービスでしょうか。
自分の管理しているHAIKサイトで確認すると、30秒弱で
診断結果を表示し、モバイル、パソコンともに「Poor」の
判定でした。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

これを修正するとGoogle等での検索結果が上位になりやすいと
いう事なのでしょうか。

資料が英語ですが、資料を確認するとヒントが得られないでしょうか。