お問い合わせ

SWELLをpreconnectで更に高速化する方法

  • URLをコピーしました!

SWELLはテーマ単体で高速化する機能が盛り込まれたテーマです。特にテーマにキャッシュ機能があるため静的キャッシュプラグインを入れなくても高速な表示が可能になっています。

SWELLの高速化の大きな特徴は、遅延読み込みです。

いわゆる画像のLazyload以外にjavascriptに関しても遅延読み込みの機能が備わっており、他のテーマと大きな違いとなっています。

そんなSWELLですが、Cocoonににあるような基本的な高速化機能が無かったりします。

この記事ではSWELLを更に高速化できるかも知れない高速化施策について説明します。

SWELLにはpreconnect出力する機能が無い

preconnectはあらかじめ接続する外部サイト等に接続しておく機能です。

Cocoonにはpreconnect機能がありますが、SWELLにはありません。

preconnectは遅延読み込みと相反する思想ですので、SWELLには取り入れられていないのかもしれません。

また、preconnectは高速化に寄与しないということなのかもしれません。

しかし、確実に読み込むことがわかっているものに関してはpreconnectした方が無駄がないと思います。

Cocoonにあるpreconnect dns-prefetch設定機能

Cocoonには、preconnect dns-prefetch設定機能が追加されています。

デフォルトで、preconnect dns-prefetch設定が出力されます。

preconnect dns-prefetch設定機能追加

Cocoon設定メニューにある「高速化」に「事前読み込み」設定を追加しました。

画像やスクリプト等のリソースの事前読み込み設定です。

linkタグによるdns-prefetchとpreconnectするドメインを設定画面から変更できるようになりました。

https://wp-cocoon.com/2-1-3/#toc3

Cocoonでpreconnect dns-prefetch設定が出力されるコード

Cocoonのheader.phplinkタグを出力するコードがあります。

<?php //preconnect dns-prefetch
$domains = list_text_to_array(get_pre_acquisition_list());
if ($domains) {
  echo '<!-- preconnect dns-prefetch -->'.PHP_EOL;
}
foreach ($domains as $domain): ?>
<link rel="preconnect dns-prefetch" href="//<?php echo $domain; ?>">
<?php endforeach; ?>

SWELLでpreconnectのlinkタグを出力するカスタマイズ

Cocoonのようにheader.phpをカスタマイズすることもできますが、子テーマが必要になります。

wp_headフックを使って自分で書くこともできます。

その場合は、wp_headpriorityは0にします。

<?php
add_action('wp_head',function(){
?>
<link ....>
<link ....>
<link ....>
<?php
},0);

実は、wp_resource_hintsというフックを使うとheadタグにlinkタグを簡単に出力することができます。

function resource_hints( $hints, $relation_type ) {
    if ( 'dns-prefetch' === $relation_type ) {
    $hints[] = '//something.com';
    $hints[] = '//something.net';
    $hints[] = '//something.org';

    } elseif ( 'preconnect' === $relation_type ) {
    $hints[] = '//something.com';
    $hints[] = '//something.net';
    $hints[] = '//something.org';    
}
    return $hints;
}
add_filter( 'wp_resource_hints', 'resource_hints', 999, 2 );

autoptimzeを使用している場合

SWELLはjavascriptの最適化と相性が悪いので、SWELLユーザーの利用者は少ないかもしれませんが、autoptimizeプラグインを使っている場合は、autoptimizeのフックを使うことでpreconnectを出力することができます。

以下は、Cocoonの初期設定と同じサイトにpreconnectする例です。

add_filter( 'autoptimize_extra_filter_tobepreconn', function(){

	$preconnect=array(
		"https://www.googletagmanager.com",
		"https://www.google-analytics.com",
		"https://pagead2.googlesyndication.com",
		"https://googleads.g.doubleclick.net",
		"https://tpc.googlesyndication.com",
		"https://ad.doubleclick.net",
		"https://www.gstatic.com",
		"https://cse.google.com",
		"https://fonts.gstatic.com",
		"https://fonts.googleapis.com",
		"https://cms.quantserve.com",
		"https://secure.gravatar.com",
		"https://cdn.syndication.twimg.com",
		"https://cdn.jsdelivr.net",
		"https://images-fe.ssl-images-amazon.com",
		"https://completion.amazon.com",
		"https://m.media-amazon.com",
		"https://i.moshimo.com",
		"https://aml.valuecommerce.com",
		"https://dalc.valuecommerce.com",
		"https://dalb.valuecommerce.com"
	);
	return $preconnect;
});

フックを使わなくても、autoptimizeの設定画面からも設定ができます。

preconnectはGoogle fontsを使うなら必須

preconnectを使うことでGoogle fontsの読み込みが早くなります。

まとめ

preconnectやdns-prefetchをやみくもに追加しても逆効果の可能性がありますので、必要なモノだけ追加するようにした方がよいです。

他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次