【OnePress】テーマに限らず、WordPressで作成するサイトは実に様々なものが外部から読み込まれています。どのようなものが読み込まれているかというのはページを表示した状態でページのどこかで右クリック後「ソースを表示」して見れば分かると思います、例えば
<link rel='stylesheet' id='' src="．．．>
<script type='text/javascript' src='．．．>などというコードがソースの先頭の方にずらっと並んでいると思います。
前者がスタイルシート（見た目をCSSコード）を読み取るためのリンク、後者が特定の動作をさせるためのスクリプトと呼ばれるプログラムを呼び出すコードになります。
これらはページの上から下へ順番に読み込まれ、かつ、読み込みが完了したら次へ・・という形でページが表示されていくようになっています。
WordPressではプラグインの追加などにより、この記述のある行がどんどん増えていく傾向にあり、それが「プラグインをたくさん追加するとページの表示速度が落ちる」という都市伝説的な話になっているのですが、読み込み先がサイト内のデータの場合（src=””の部分が自サイトの場合）は、よほど行数の多いスタイルシートだったり、スクリプトだったりしない限りは、大きく表示速度に影響を及ぼすことはないと思います。
が、問題はソース上でリンク先が外部のURLになっている（src=””が自サイトでない）場合。そのコードを読み込む際には、外部のサイトに接続して必要な処理をしたものが帰ってきて処理が完了するという流れになるので、外部URLの反応や処理速度によって大きく影響を受けます。前述したプラグインの追加により、このケースが増えることで速度には少なからず影響があります。
これを回避するためには、読み込みや処理中のものはやらせておいて、次をどんどん読み込んでいくという処理をさせるのが一番の近道で、ググっていろいろと調べてみると
- CSSは事前に読み込むように「preload」というタグを使うといい
- スクリプトは「async」「defer」属性のいずれかを付けておくといい
といった内容が掲載されていると思います。
でも、自分でテーマファイル内に記述したものならともかく、プラグインなどが追加したものまでを全部対処するのは大変。そこでWordPressならではの方法を紹介しておきます。
作業としては以下のコードをテーマのfunctions.phpの末尾へ追加するだけです。
//管理画面では適用しない
if(!is_admin()){
/************************ サイト高速化 ***********************/
/*header内JS非同期読み込みasync/defer*/
if ( !function_exists( 'hab_replace_scripttag' ) ):
function hab_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', 'hab_replace_scripttag' );
endif;
/***** enqueueされるCSSにプリロードを付加する *****/
if ( !function_exists( 'hab_add_rel_preload' ) ):
function hab_add_rel_preload($html, $handle, $href, $media) {
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'"
id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'hab_add_rel_preload', 10, 4 );
endif;
}このコードが何をさせているかを簡単に説明しておきます。
まずは上半分のコードはscriptタグに「defer」属性を付けるようにするものです。HTMLソース上にある
<script type='text/javascript' src='．．．>の中の「type=’text/javascript’」という文字を見つけ、「defer」という文字列に変更しなさいというプログラムになっています。「defer」という属性は今の処理をしながら次のことをしなさいという意味合いを持つので、処理が滞ることなくページの読み込みが続けられ、表示が高速になるという仕組みです。
下半分のコードはCSSの読み込みを同時ではなく先に読み込みなさいというものになります。WordPressではソース上にCSSファイルへのリンクタグを埋め込むために、独自のコードを使いますので、そのコードを使ってリンクタグが挿入される場合に先読みの設定をして出力しなさいというコードになります。
説明が凄く難しいので分かりにくいかも知れませんが、この措置をした上で、ページスピードのチェックをしてもらえれば効果が実感できることが多いと思います（サイトによっては効果的でない場合もあります）。
１つ注意したいのが、この措置により、ページの表示が崩れたりするケースがあること。これは環境によって、使用しているテーマやプラグインによってさまざまですので、設置してみて問題がなければ使うという方法でしか試す方法がありません。