4

PageSpeed Insights で以下のエラーが表示されます。Miniify の「手動」モードに入り、以下の CSS を追加しました。しかし、Google はまだ CSS について不満を述べています。スコアは 64/100 しかありません。助けてください。

あなたのページには 1 つのブロッキング CSS リソースがあります。これにより、ページのレンダリングが遅れます。次のリソースが読み込まれるのを待たずに、ページのスクロールせずに見えるコンテンツをレンダリングすることはできませんでした。ブロッキング リソースを遅延または非同期でロードするか、これらのリソースの重要な部分を直接 HTML にインライン化してください。次の CSS 配信を最適化します 。

4

1 に答える 1

6

CSS を縮小するだけでは、多くの場合、ページ速度の洞察には十分ではありません。ページ速度は、「スクロールせずに見える範囲」(上部 600 ピクセル) のコンテンツを含む CSS を内部 (つまり、タグに読み込まれる) にすることを好みます。CSS の残りの部分はすべて、最も重要な ATF コンテンツの後に読み込まれるように延期する必要があります。

giftofspeedのこの例を参照してください

  • Q: どの CSS ファイルを遅延ロードする必要がありますか?
  • A: ページのレンダリングをブロックしているすべての CSS ファイルのロードを延期する必要があります。
  • A: 小規模または中規模の CSS スクリプトの遅延読み込みは行わないでください。代わりに、すべての CSS をインライン化することで、ページ速度の点でより多くのメリットが得られます。

CSS ファイルを延期するための Javascript スニペット:

<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);

/* Second CSS File */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" />
<link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" />
</noscript>
于 2015-02-16T03:57:01.917 に答える