-sQuirlyパソコンに関する最新デバイスやアクセサリーなど集めるのが好きです。興味をもったことは徹底的に調べつくす性格。海外向けの物品販売サイトも運営しています。詳しいプロフィールはこちらども。Insightsの点数を気にしているsQuirlyです。今回は、Google先生に叱られないよう、良点数をキープしつつCSSの最適化に挑んでみました。排除する”というものがあります。これは、CSSやJavaScriptをHTML内にインライン化・非同期ロード・フッターへ移動することによって解決しますが、ものによっては不具合が発生します。Cacheでは、”CSSを非同期ロード”をオンにすることにより、ページ読込み時に表示崩れが発生します。オフにしている方も多いのではと思います。“CSSを非同期ロード”をオンにすると。ページロード時にスタイルが崩れるですが、”CSSを非同期ロード”をオフにすると、ページロードは正常な動作になりますが、今度はGoogle先生から「CSSが読み込みをブロックしているから何とかしろ!」叱られてしまいます。「レンダリングをブロックしているCSSをどうにかしろ!」と叱られるそこで、”CSSを非同期でロード”しつつページロード時に表示崩れが発生しないように対策します。スタイル関連の非同期ロードを無効化する「要は、”style.css”だけ非同期ロードから除外すればいいんでしょ?」ということで、それを行う方法を以下に記述します。下記方法はあくまでもHTML・CSS・PHPに詳しくない自分がGoogle先生から叱られないために行った処置です。他に最善な策は他にもあると思いますので調べてみてください。“CSSを非同期ロード”をオンにします。その後、“変更を保存”をクリック。”CSSを非同期ロード”をオンにします。〇テーマのスタイルシート内容をコピーするFTPソフト(FFFTP)などを使って使用中のテーマファイル内のstyle.cssをダウンロードします。ダウンロードしたCSSを開いて内容をコピーします。FTPソフトなどを使って使用中テーマのCSSをダウンロードスタイルシートのコードをコピーまた、この時点でコード内の不要な部分(コメントなど)を削除すると尚良いです。Cacheの設定画面にもどり、[6]チューニングの”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。”重要なCSSルール”内にコピーしたコードを貼り付け「FTPソフト使ったこと無いから他の方法で教えやがれ!」って方は下記方法を行っても、一応Google先生からは叱られなくなります。〇ブラウザでデベロッパーツールを立ち上げブラウザーにて自分のサイトを開いた状態でF12キーを押し、デベロッパーツールを起動します。〇CSSのコードをコピーChromeの場合は、”Sources”→”サイトのドメイン”→”min”→”〇〇〇〇〇.css”と進み、内容をコピーします。デベロッパーツールよりスタイルシートのコードをコピーFirefoxの場合は、スタイルエディターより〇〇〇〇〇.cssの内容をコピーします。Cacheで縮小化や結合を行っていない場合は”style.css”を探し出してコードをコピーしましょう。Cacheの設定画面にもどり、[6]チューニングの”重要なCSSルール”欄にコピーした内容を貼り付けします。”変更を保存”のクリックも忘れずに。Insightsの”レンダリングをブロック”に引っかかる”CSSの非同期ロード”をオンにしつつ”重要なCSSルール”にテーマのスタイルシート内容を記載することで回避が可能Google先生から叱られるとSEO的にも響く部分があるのかな?と思っているので、些細な点数アップではありますけど改善を怠らずにやっていきたいと思います!余談”重要なCSSルール”欄に記述されている、CSSを非同期ロードを有効にする場合は、折り畳まれたコンテンツのクリティカルなCSSルールを指定します。-sQuirlyパソコンに関する最新デバイスやアクセサリーなど集めるのが好きです。興味をもったことは徹底的に調べつくす性格。海外向けの物品販売サイトも運営しています。コメントをキャンセルメールアドレスが公開されることはありません。