【解決】PageSpeed Insightsのサイト評価で強制リフローが表示される

PageSpeed Insightsは、Googleが提供するウェブページの表示速度とパフォーマンスを分析するツールとして有名です。

主な機能としては下記があります。

当サイトも定期的に本ツールでサイト評価をしています。

関口

ほとんど管理人の趣味のようなものです。
そんなことより、記事を増やすべきなのは承知の上、どうしても気になってしまうのは、管理人の性格のようです。

数か月前から、結果の項目がかわったようで、当サイトも突然、「強制リフロー」という指摘がでるようになりました。

いろいろ試行錯誤して解決に至ったので、そのお話を記事にします。

当サイトについて

当サイトは、wordpressでテーマは、「cocoon」を使っています。

強制リフローとは、Webブラウザがページのレイアウトを再計算する必要がある状況を指します。強制リフローが発生すると、サイトのパフォーマンス低下の原因になる可能性があります。

これは、DOM（Document Object Model）やCSSの変更によって、ブラウザがページの表示を更新しなければならなくなるときに発生します。

つまり、javascriptで「要素のサイズや位置を取得」、cssで「スタイルを変更（例：width = “100px”などを個別指定）」が多いと発生する可能性があるということになります。

原因

当サイトでは、テーマ「cocoon」の機能で「高速化」という設定があります。
「高速化」で、CSSとjavascriptの縮小化を利用していました。

試行錯誤の結果、上記が逆に「強制リフロー」を引き起こす原因であることが特定できました。

原因究明をする際、一度、「高速化」でCSSとjavascriptの縮小化のチェックを外して、PageSpeed Insightsでチェックをすると、見事、「強制リフロー」の指摘が消えていました。

当サイトでは、下記を実施して「強制リフロー」の指摘を改善できました。

解決方法

実際の設定は下記のとおりです。

以上です。閲覧ありがとうございました。