ページChromeとMozillaでロードした後に点滅しますが、OperaとEdgeではロードしません。

Question

私はウェブサイトhttps://www.designersheds.com.auで作業しており、読み込まれたページの後に奇妙な点滅があります。正しく表示されてから点滅します。この現象は、ChromeとFirefoxでは発生しますが、OperaとEdgeでは発生しません（Edgeではいくつかのスタイルが正しくないように見えますが）。すべてのスクリプトはフッターにあります。そして、すべてのスタイルが頭の中にあります（私はWordPress用のAutoptimize Pluginを使用しています）。

この点滅は、最適化を行う前にステージングWebサイトで発生しています。

ウェブサイトは、WordPressのGenesis Childテーマを使用しています。

Answer 1

このような動作は、すべてのスタイルとフォントをフッターに移動した結果です。私はあなたがPageSpeedの推奨事項に従おうとしたと仮定します:)。それぞれのサイトごとにすべてが受け入れられるわけではありません。

DOMの作成を開始した時点で、ブラウザはあなたのスタイルを知らない。ページ全体を生成して出力した後、フッターにスタイルを検出します。あなたのスタイルを適用すると、ページ全体が点滅する原因となるDOM全体が再構築されます。

どうすればよいですか？

第1の方法。サイトを壊さないPageSpeedの推奨事項のみを実装します。全体的に - あなたの目標は何ですか？できるだけ早くの作業サイトを作る。重要なスタイルをヘッダーに移動しても、サイトの速度が低下することはありません。

第2の方法。インラインコードとして重要なスタイルをヘッダーに配置します。この場合、PageSpeedはスコアを下げません。しかし、このアプローチでは手作業を必要とし、Autoptimizeでは実行できません。