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

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

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

SWELLユーザーの皆さんは、prefetchを有効化しているのではないかと思います。

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

このprefetch機能は要注意な機能であることはご存知でしょうか？

SWELLのprefetch機能はサーバーへの負荷が高い理由

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

SWELLの高速化機能というのは、基本的にはサーバーの仕事を増やす内容になっています。

特に貧弱なサーバーでSWELLのprefetch機能を有効化した場合、逆にサイトの表示が遅くなったり、固まったりするので注意が必要です。

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機能はオプション設定が無い

SWELLのprefetch機能は、除外するリンク機能しかありません。

Flying Pagesにあるオプション設定はSWELLにはありません。

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"
	);
});

SWELLのprefetchをマウス hoverのprefetchを使わないスクリプトに変更

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

GitHub

GitHub – GoogleChromeLabs/quicklink: ⚡️Faster subsequent page-loads by prefetching in-viewport link… ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time – GoogleChromeLabs/quicklink

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用のプラグインもありますので、そちらを使う方法もあります。

WordPress.org

Quicklink for WordPress ⚡️ Faster subsequent page-loads by prefetching in-viewport links during idle time.

まとめ：SWELL高速化設定のprefetch有効化は重くなる

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

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

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

SWELLのprefetchを有効化すると必ず早くなる？

prefetchはサーバーへの負担がかなり大きな高速化施策になります。サーバーの性能が高いのであれば気にならないかもしれませんが、サーバーの性能が低い場合は、逆に遅くなります。

SWELLのprefetchを有効化しても高速化した感じがしないのはなぜ？

prefetch自体はマウスポインタ付近のページを先読みして高速化する技術ですので、クリックされれば高速化に寄与しますが、クリックされなければむしろ無駄な動きが増えますから遅くなる技術です。