web-dev-qa-db-ja.com

読み込み時間を短縮するためにCSS / JSをヘッダーに配置する

最近、読み込み時間に関するSEOに関する多くの記事を読んでいます。最適なロード時間を取得しようとすると、かなり時間がかかる場合がありますが、サイトのロードが2倍速くなったときの気分もいいです。

現在、これらのチュートリアルとブログの多くは、CSS/JSのチャンクをheadタグに入れて、スクロールせずに見えるコンテンツがより速く読み込まれるようにすることを言っています。

「外部リソースのロードに時間がかかる」場合、ファイルのサーバーへのリクエストごとに時間がかかります。したがって、最初からすべてのCSS/JSをheadタグに実際に埋め込むだけでは意味がありません。

確かにこれは最初は面倒に見えるかもしれませんが、ブラウザで外部スクリプトをダウンロードするのに時間がかかる唯一の理由は、出力がすでにブラウザに送信されているためです。

単純に行うとどうなりますか：

<head>
    ... Usual things here ...
    <?php require('css/bootstrap'); ?>
    <?php require('css/mystylesheet'); ?>
</head>
<body>
    ... Usual things here ...
    <?php require('js/bootstrap.js'); ?>
    <?php require('js/myscript.js'); ?>
</body>

これは、ユーザーのブラウザーにヒットするとすぐに、CSSとJavaScriptが埋め込まれた単純なHTMLファイルとして提供されます。また、PHPでファイルを必要とするため、テキストエディターでの表示は以前と同じようにきれいです。

これにより全体的な速度のパフォーマンスが向上しますか、それともこの方法を避けなければなりませんか？

seoperformancepage-speedgoogle-pagespeed
1
Matthew Smart

この質問はStackoverflowに属し、ここではありませんが、完全なスタイルシートとスクリプトを各ページに含めています。これにより、各ページのダウンロードと計算時間が大幅に増加しますが、推奨されるのは、それほど重要ではないスタイリングとコードについてだけです。表示した内容を実行すると、ページのダウンロードサイズがおそらく10倍以上になる可能性があります。

接続不良の電話でマークアップ、スタイリング、コードをすべてロードしようとすることを想像してください。多くのサイトが、HTMLと基本的なCSSを提供する機能をほとんど果たすことができません。

提案しようとしているのは、最小限のマークアップを提供して、最初のユーザーエクスペリエンスをできるだけ早く使用できるようにして、後で他のすべての毛羽を追加できるようにすることです。

さて、これは時間がかかり困難ですか？うん。サイトによって異なります。

2
Rob