最適なパフォーマンスが得られるようにウェブサイトを設計する方法について、Google PageSpeed ガイドラインに従うように最善を尽くしています。
ウェブサイトを分析した後、Google はそれらのガイドラインに基づいてスコアまたはランクを与えてくれます。
私のスコアを低く抑えている 1 つのガイドラインは次のとおりです。
スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を排除します。
あなたのページには 1 つのブロッキング CSS リソースがあります。これにより、ページのレンダリングが遅れます。
私はこの問題を解決するために多くのことをしました。
これには、CSS の一部を HTML 自体に埋め込み (最初のレンダリングに必要な部分のみ)、インライン スクリプトを介して CSS を読み込もうとすることが含まれます。
HTML 本文の末尾に次のコードを追加しました。
(function (document) {
if(!document) return;
var stylesheet = document.createElement('link');
stylesheet.href = 'http://www.my-website.com/bundles/styles/125/core';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.appendChild(stylesheet);
})(document);
ただし、Googe PageSpeed は依然として、レンダリングがブロックされていると不平を言っています。
これはなぜですか? また、この問題を解決するにはどうすればよいですか?