お問い合わせ

SWELL高速化設定|prefetch有効化で激重!おススメできない

SWELLにはテーマ設定に高速化設定があります。

SWELLでは、世の中で有効と思われている高速化手法を積極的にテーマに取り入れています。

SWELLが今ほどメジャーになる前は高速化機能のメインはpjaxでした。

しかし、pjaxは適用するサイトを選ぶので、現在のSWELLでは非推奨となっています。

そうなると、preftchぐらいしか高速化の手段がないので、皆さんprefetchを有効化しているのではないかと思います。

SWELLの多くの機能はjavascriptで実装されていることが多いのですが、prefetchもjavascriptで実装されています。

SWELLのprefetchの機能については、公式サイトの説明では、『処理内容は「Flying Pages」というプラグインとほぼ同じ』と明記されています。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富で、テーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。

目次

SWELLのprefetch機能は多機能すぎてかなり重い

SWELLのprefetch機能は、『処理内容は「Flying Pages」というプラグインとほぼ同じ』ですので、次の2つの機能を組み込んでいると思います。

  • Preload pages in the viewport – Detect links within the viewport (current viewing area) using ‘Intersection Observer’ and tells the browser to preload them using ‘prefetch’, switch to xhr if not available (similar to Quicklink).
  • Preload pages on mouse hover – On hovering links, if it’s not preloaded yet using above ‘viewport’, then Flying Pages will prefetch them instantly (similar to Instant.page).
https://ja.wordpress.org/plugins/flying-pages/

prefetch機能をONにするとページ遷移は早くなりますが、そのページを先頭から最後までスクロールしていくと引っかかりを感じます。

その原因は、Preload pages in the viewportだと思われます。

この機能はviewportにリンクが表示されたときにpreloadするのでリンクが多いページだと、ページを高速スクロールしていると引っかかります。

SWELLのprefetch機能は、オプションの設定が除外するリンク機能しかなく、他の設定はありません。

prefetch機能を使う場合はFlying Pagesを使う方がよい

SWELLのprefetch機能を使うなら、Flying Pagesの方が設定項目が多くて便利です。

Flying Pagesのソースコードを確認してみると、PHPで設定値をjs変数として書き出して、flying-pages.min.jsに渡しています。

<?php

// Embed the scripts we need for this plugin
function flying_pages_enqueue_scripts() {
    
    // Disable for logged admins
    if(get_option('flying_pages_config_disable_on_login') && current_user_can( 'manage_options' )) return;

    // Abort if the response is AMP since custom JavaScript isn't allowed
    if (function_exists('is_amp_endpoint') && is_amp_endpoint()) return;

    wp_enqueue_script('flying-pages', plugin_dir_url(__FILE__) . 'flying-pages.min.js', array(), FLYING_PAGES_VERSION, true);
    wp_add_inline_script(
        'flying-pages',
'window.FPConfig= {
	delay: '.esc_html(get_option('flying_pages_config_delay')).',
	ignoreKeywords: '.json_encode(get_option('flying_pages_config_ignore_keywords'), true).',
	maxRPS: '.esc_html(get_option('flying_pages_config_max_rps')).',
    hoverDelay: '.esc_html(get_option('flying_pages_config_hover_delay')).'
};',
        "before"
    );
}
add_action('wp_enqueue_scripts', 'flying_pages_enqueue_scripts');

// Add defer attribute to Flying Pages script tag
function flying_pages_add_defer($tag, $handle) {
    if ('flying-pages' === $handle && false === strpos($tag, 'defer')) {
        $tag = preg_replace(':(?=></script>):', ' defer', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'flying_pages_add_defer', 10, 2);

Flying Pagesのflying-pages.min.jsは縮小されて可読性が低いままリリースされています。

SWELLのpreftch.min.jsと比べてみると、確かにSWELL作者のいうように、両者の内容はほぼ同じです。

SWELLのpreftch.min.jsもFlying Pagesと同じ機能を持っているのですが、SWELL高速化設定が無い状態なのでオプション部分をユーザーに非公開にしているという状態です。

ソースの構成がほぼ同じであるため、オプションをユーザーが渡せば、SWELLのprefetch機能はFlying Pagesと同じように動きそうです。

ただ、同じものを改造して使うよりは、Flying Pagesを使う方が素直な選択だと思います。

おまけ:SWELLのprefetch機能にFlying Pagesと同じオプションを与える

jsの変数として、オプションを渡せばいいので、SWELLのprefetchでも同じようにオプションを渡せます。

<?php
add_action('wp_footer',function(){

// SWELLの初期設定
	$flying_pages_config_delay = 0;
	$flying_pages_config_max_rps = 3;
	$flying_pages_config_hover_delay = 50;

	wp_add_inline_script(
        'swell_prefetch',
		'window.SwellFPConfig= {
			delay: '.$flying_pages_config_delay.',
			maxRPS: '.$flying_pages_config_max_rps.',
			hoverDelay: '.$flying_pages_config_hover_delay.'
			};',
		"before"
	);
});

マウス hoverのprefetchを使わないスクリプトにする

Googleが開発しているQuick Linkというjavascriptがあります。

SWELLのprefetch機能をオフにして、このスクリプトだけ使う方が素直かもしれません。

is_user_loggedin()で判定しているのは、ログイン時に有効にすると勝手にログアウトしてしまうためです。

<?php
add_action('wp_footer',function(){
if(!is_user_loggedin()){
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.3.0/quicklink.umd.js"></script>
<script>
window.addEventListener('load', () => {
  quicklink.listen();
});
</script>
<?php
}
});

公式サイトを見ると、色々オプションもありますので便利だと思います。

quicklinkは、Wordpress用のプラグインもありますので、そちらを使う方法もあります。

まとめ

SWELLの高速化機能のprefetch機能を有効化するとスクロールが引っかかる感じがするので、機能的に同じとSWELL作者が公言しているFlying Pagesと中身を比べてみたらほぼ同じ処理内容でした。

Flying Pagesでは使えるオプションがSWELLでは使えないので、使いたい場合は素直にFlying Pagesを使うか、無理やりオプション変数を渡すことで対応できます。

また、Google推奨のquicklinkというjavascriptを自前で組み込むこともできますよ、という記事でした。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

コメント

コメントする

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

目次