webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
ページ高速化SEO施策(3)「レンダリングをブロックしている JavaScript/CSS を排除」 eyecatch画像

ページ高速化SEO施策(3)「レンダリングをブロックしている JavaScript/CSS を排除」

rss

ページスピードアップ・高速化 SEO施策(3)

※WEBコーディングの備忘録です。

前回・前々回に引き続き、WEBサイトの読み込みページスピードを上げてみようと試み中です。
Google提供のWEBサイトの読み込みスピード判定ツール、PageSpeed Insightsでの判定結果を元に施策を講じます。

判定結果


修正を考慮

 1.画像を最適化する
 2.ブラウザのキャッシュを活用する
 3.HTML・CSS・JavaScriptを縮小する
 4.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

1~3の項目についての施策は前回・前々回のとおりです。
  ページ高速化SEO施策(1)「画像を最適化する・ブラウザのキャッシュを活用する」
  ページ高速化SEO施策(2)「HTML・CSS・JavaScriptを縮小する」
今回は、4の項目を見ていきます。


 

【項目4】「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

 
レンダリングブロックイメージ画像


この項目は結構厄介です。
レンダリングは奥深く、またレンダリングブロック回避方法もたくさんあるため、その所作を詳しく解説するのは省き、簡単にWebcode-labで実施している施策を紹介します。

簡単なレンダリングブロックの説明

レンダリングエンジンの仕事は「レンダリング」= 要求されたコンテンツをブラウザの画面に表示することです。

レンダリングの際、
まずWebブラウザはソースコードを上から順番に読み解釈していき、
要求されたHTTPリクエストを元にコンテンツが読み込まれていく(ファイルダウンロード)のですが、
その順序や所作に決まりがあり、先の順番のファイルが読み込まれないと次のダウンロードに移れません。

同時にダウンロードできるファイル数にも限度があり、
最近のブラウザでは5~6個を同時にダウンロードしていますが、
その数を超えるリクエストが順番待ちとなり、レンダリング遅延が発生します。
このレンダリング遅延が「レンダリングブロック」です。

 

<HEAD>タグ内の記述順って気にしてますか?

通常、CSSファイルのダウンロードが完了しない限り、Webブラウザはページのレンダリングを開始できません。
ブラウザはソースコードにCSS・STYLEを見つけると、まずそれらをダウンロードしようとし、
JS・画像等のダウンロードは待機となりレンダリングブロックが発生します。
ということは、
ブラウザはソースコードを上から順番に読み解釈していくので、
CSS・STYLEの記述がJS等ソースコードよりも上にある方がいいということです。

<head>内の記述の順番として、

<!-- 文字コード・Viewport設定 -->
<meta charset="UTF-8">

<!-- Title等設定 -->
<title>Topics-page5|Webcode-lab</title>
<meta name="description" content="Topics-page5|「CMSサイト制作」京都Webcode-labはWebサイト・ホームページデザイン・WEBシステム等お安く高い質で制作。" />
<meta name="keywords" content="ホームページ,web,制作,管理費無料,CMSサイト" />
<!-- Canonical,Alternate等設定 -->
<link rel="canonical" href="/blog/id/25/" />

<!-- CSS設定 -->
<link rel="stylesheet" href="/_common/css/style.css">
<link rel="stylesheet" href="/_common/css/uk_icon.css.min.css">
<style>
.contents h2 span {
    font-size: .85em;
}
</style>

<!-- JS設定 -->
<!-- できればページ下部に記述、<head>内記述が必要な場合も、<head>内の下部に記述 -->

<!-- その他設定 -->
<link rel="alternate" type="application/atom+xml" href="/feed/rss_blog.php" title="Atom">


CSS・STYLE
の記述

JS・JavaScriptの記述

この記述順に気をつけることが結構大切です。
また、「見える範囲のコンテンツに関するCSS」を優先して記述することも対策になります。

 

CSSファイルをできるだけ少なくする

前述①のとおり、
まずはCSSファイルが読み込まれないと、ブラウザはページのレンダリングを開始できません。
つまり、CSSファイルの読み込み完了スピードが、ページスピード高速化の肝となります。

そこでできるだけCSSファイル数を少なくし、ボトルネックとなるCSS群を早く読み込ませることが大切です。
Webcode-labでは、
特別なデザインやエフェクト・動きがあって、どうしても仕方ないページ以外は、
通常ページに置くCSSファイルを3個までとし、多すぎないようにしています。

それでも、Googleの「PageSpeed Insights」で、
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」ようにと指摘が出ます。
ファーストビュー(Above the Fold)のスタイルのみ、CSS外部ファイルでなくページ内にインラインで<style>書きする、という方法がありますが、
手間がかかるのとメンテナンス効率が落ちることとのバランスで、
Webcode-labではそこまでせず、上記のようなルールに落ち着きました。

尚、CSSファイル自体の圧縮については、 ページ高速化SEO施策(2) 「CSS/HTML/JavaScriptを縮小する」で詳しく書いています。

 

JSファイル読み込み・JavaScriptの記述は、ページ下部に

特別理由がない限り、
JSファイル読み込み・JavaScriptの記述は、ページ下部(</body>閉じタグ前)に置くこと。
Webcode-labでも、 JS・JavaScriptはページ下部に置いています。

少し話がそれますが、
jQueryやprototypeなどを使ったプラグインをページ内に複数設置していて、ページ下部に記述すると動かない!なんて時は、もしかすると「コンフリクト(競合)」している可能性があります。
「コンフリクト(競合)」については、下記に詳しく書いています。
プラグインを複数入れたらjQueryが動かない!-コンフリクト対策

 

サーバー選びが大切

最後に。
どのような内部施策を講じても、どうしようもないのがサーバーの性能です。
「HTML・CSS・JS」等の圧縮機能があることや、
そもそものサーバーの速度が早いことが何よりページスピードに影響しますので、

施策の手間を考えてもサーバー選びが重要になることは言うまでもありません。



ページ高速化SEO施策(1) 「画像を最適化・ブラウザのキャッシュを活用」へ →

ページ高速化SEO施策(2) 「CSS/HTML/JavaScriptを縮小する」へ →


ページの先頭へ

rss
1件目 (1件中)