レンダリングブロックを解決する方法 2021年版

WEB制作

この記事は、WEBデザイナーフロントエンジニアPHPの勉強をしている人、向けの記事です。

WordPressを運営していたら必ずぶち当たる壁があります。

それはホームページの表示速度です。

表示速度が遅いと…「イライラする」「見る気が失せる」「見たくない」に繋がります。

この結果、せっかくホームページを運営しても見る人がいないのであれば意味がないということになってしまいます。

A男
A男

何このサイト…

おそっ!!

他のサイト見よ!

SEO(検索エンジン最適化)とはお客様(ユーザー)の満足度が高ければ高いほど良いとされています。

こちらの記事もあわせてお読みください。

ホームページの表示速度の原因を探る

ホームページの表示速度はPageSpeed Insightsで計測することができます。
登録は不要。urlを入れるだけです。

Googleの拡張機能で「Lighthouse」でも計測は可能です。

PageSpeed Insights

改善できる項目に、レンダリングを妨げるリソースの除外とあります!

ブラウザがWebページを表示する為に行う、一連の描画処理のことを「レンダリング」と言います。
ページ表示の推移が画像になっています。一番初めは真っ白です。二枚目も真っ白です。
真っ白になっている部分を短縮して早く装飾等を表示させることが重要です!

※原因は他にもいろいろありますが、今回はレンダリングブロックに注目しています。

ホームページを表示するまでの流れ

※今回はWordPressの場合に限定しています。

  1. PHPが実行され、ブラウザーがHTMLファイルを作成
  2. HTMLファイルの読み込みと、CSSファイル、JavaScriptファイル、画像ファイルの確認
  3. 画像ファイルをダウンロード
  4. CSSファイルをダウンロードして読み込む
  5. JavaScriptファイルをダウンロードして読み込む
  6. Webページを表示する

上記からわかるように一連の描画処理が終わるまでには、
主に、CSSファイルJavaScriptファイル画像ファイルのダウンロードが早く行われなければならないのです。

■参考文献
https://coliss.com/articles/build-websites/operation/work/improve-site-performance.html
https://engineer-lady.com/program_info/css-preload/

CSSのレンダリングブロックを解決する

CSSはインポートを使用しない

基本的にcssは、リンクに @import を使わないこと。
WordPressの場合は、functions.phpにリンクコードを書いて、ヘッダーに出力させる方法が推奨されています。

<link rel = "style.css" href = "style.css"> 

しかし、link [rel = stylesheet]をつけていることでもレンダリングに影響を与えていることになります。

CSSを分割し、読み込むページを分割する

まずは、トップページ、またはファーストビューになる部分の読み込み速度を上げる必要があるので、トップページやファーストビューにあたらないところのCSSはそのページで読み込む必要はありません。

以下は、記述例です。ご自身の環境に合わせてファイルIDを変えてください。
‘wp-block-library’は、Gutenberg(グーテンベルグ)のCSSになります。’’”はID名となります。

トップページ、またはファーストビューにブロックメニューを使用していない場合は、これが使用できます。

‘contact-form-7’は、プラグインの「Contact Form 7」を使用している場合です。
お問い合わせページはファーストビューに当たらない場合は、これが使用できます。

//レンダリング対策cssをページ分け読み込み //スラッグの場合
function my_deley_file(){
	if(!is_page('home')) { //トップページでは読み込まない
	wp_dequeue_style( 'wp-block-library' );
	}
	if(!is_page('contact')) { //お問い合わせページ以外では読み込まない
	wp_dequeue_style( 'contact-form-7' );
	}
}
add_action('wp_enqueue_scripts', 'my_deley_file');

CSSを分割し、ページ別に読み込みを区別することだけでも、ページ読み込みスピードは大幅に上がる!

CSSを非同期でロードする

urlに接続するとすべてのcssとJavaScriptがロードされてホームページが表示される。それがホームページ表示の遅延に繋がる原因となるので、「非同期」という方法をとってリソースを先に読み込んでおくだけであり、実行(適用)はされないといった方法をとることにします。

link relに media=”print” onload=”this.media=’all'”をつけるだけです。

<link rel="preload" href="assets/css/index.css" as="style" media="all" onload="this.onload=null;this.rel='stylesheet'">

preload(プリロード)は先読みという意味。
onloadイベントで、この <link> タグ自身のrel属性値を“stylesheet”に書き換えています。

※補足:as 属性にファイルの種類を指定することにより、ブラウザがファイルに合った最適なタイミングを判断することができます。
※CSSファイルが先読みできたらすぐに適用させるために以下の属性を加えるononload=”this.onload=null;this.rel=’stylesheet’”
※media 属性が省略されている場合は all として取り扱われます。ですので、特に対象デバイスを指定する必要がない場合は指定する必要はないのですが、参考文献にあったのでそのまま載せています。

functions.phpに読み込むファイルを記述している場合は、以下のようなコードを記述します。
そうすれば、ヘッダーのlink relに media=”print” onload=”this.media=’all'”がついた状態で出力するようになります。

function styleLoader($tag, $handle, $href, $media) {
	if (is_admin()) {
		return $tag;
	}
        // 親テーマは先に読み込まないと見た目が崩れるためperloadしない
	if (in_array( $handle, ['parent-style'])) {
		return $tag;
	}
	// preload属性を追加
	$html = <<<'HTML'
		<link rel="preload" href="%1$s" as="style" onload="this.onload=null;this.rel='stylesheet'" data-handle="%3$s" media="%4$s" />
		<noscript>%2$s</noscript>

HTML;
	return sprintf( $html, $href, $tag, $handle, $media );
}
add_filter('style_loader_tag', 'styleLoader', 10, 4);

ヘッダーに読み込みファイルをリンクする場合は、必要なコードの記述を追加すればよいが、functions.phpにファイルの読み込みをする場合は記述が少々難しくなる。
しかし、子テーマなどにも使用できるので知っておいて損はない方法!

preloadの未対応ブラウザについて

can I useによると現在(2021年7月時点)最新バージョンにおいてはIEのみとなります。

IEに対応させる方法は、「loadCSS」というポリフィルを使用することになります。

loadCSS
https://github.com/filamentgroup/loadCSS/#how-to-use-loadcss-recommended-example

loadCSSの使用方法

githubにあるjsファイルを読み込みます。loadCSS.jsとonloadCSS.js。
デフォルトでは、loadCSSはページ内のすべてのCSSとJSの後にスタイルシートリンクを挿入しようとします。

動的に使用したいcssがあればloadCSS関数を使用します。
Google fontやfontawesomeに使用することもできる。

loadCSS( "path/to/mystylesheet.css" );

loadCSSはこれからも開発されているようですので、随時githubを確認することをお勧めします。
ググっていたらcssrelpreload.jsの例が多いのですが、現時点では存在してません。
なので現時点でのやり方を自分で確認した方が良いと思います。

JavaScriptの非同期処理をする

//asyncの場合
<script src="myscript.js" async></script>

//deferの場合
<script src="myscript.js" defer></script>

JavaScriptをヘッダーではなくフッターで読み込ませる

とにかく装飾の描画を最優先にしたいので、JavaScriptは最下部に読み込ませます。
WordPressの場合は、CSSと一緒にfunctions.phpにフッターに出力するような記述をします。

スクリプトタグをつける

以下は、functions.phpに記述し、すべてのスクリプトコードのタグに「defer」という記述を追加する方法になります。

//JS非同期読み込み
	function replace_scripttag($tag){
		if(!preg_match('/b(defer|async)b/',$tag)){
			return str_replace("type='text/javascript'",'defer',$tag);
		}
		return $tag;
	}
	add_filter('script_loader_tag','replace_scripttag');

「async」や「defer」を追加すると、スクリプを非同期で実行できます。

asyncやdeferは大きく実行順序の仕方に違いがあります。2つの違いについて調べてみました。

asyncとは

意味…非同期、非同期の

  • scriptは非同期でダウンロードされる。HTMLパースは継続。
  • scriptのダウンロードが完了。
  • HTMLパースを中断する。
  • scriptを実行する。
  • HTMLパースを再開する。
  • ★文書の読み込み中にそのスクリプトが利用可能になった時点で実行される。

deferとは

意味…遅らせる、延期する

  • scriptは非同期でダウンロードされる。HTMLパースは継続。
  • scriptのダウンロードが完了。HTMLパースは継続。
  • HTMLパースが完了。
  • scriptを実行する。
  • ★文書の読み込みが完了した時点でそのスクリプトを実行する

deferをつけることで、不必要にHTMLのパースを停止せず、サイトを高速に表示することができるようなります。
また、HTMLパースが完了しているので確実にDOM操作をすることができます。
依存関係のある複数ファイルを読み込む場合は、deferを使用した方が無難!

まとめ

上記の方法をとることで、PageSpeed Insightsで計測しても「レンダリングを妨げるリソースの除外」は除外されているはずです!

検証でもちゃんと非同期の設定がされているか、確認してみてください。

タイトルとURLをコピーしました