本ページはプロモーションが含まれています

【コピペで完了】Rinkerを貼りすぎて重くなったページを「爆速」に変える裏技

rinker-speed-up-eye-catch WordPress
スポンサーリンク
スポンサーリンク

WordPressの「Rinker」って、商品リンクを貼るのがすごい便利ですよね。

ついつい大量に掲載してしまって、「ページの表示速度がガクンと落ちてしまった」なんて経験はないでしょうか?

実はあるコードを貼り付けるだけで、その悩みが一瞬で解決します!

SEOにも有利!!

本記事ではそんな魔法のコードの使い方を、図をたっぷり使って丁寧に解説しています。

「最近ブログが重い気がする」
「PageSpeed Insightsのスコアを改善したい」
「専門知識はないけど高速化したい」

ぜひ、ご自身のページを「サクサク」にしてみてください。

それでは、一緒に見ていきましょう!

ゴタクはいいから「さっさとよこせ!」って方は、こちらをクリックしてください。

このページでわかること
  • 「読み込み速度」や「PSIスコア」の改善結果
  • なぜ速度改善できるのか?
  • 実際のコード実装方法
スポンサーリンク

実装後の結果

読み込み速度

わかりやすくするために、比較動画をご用意しました。

めちゃくちゃ速なってる!
効果テキメンですね。

PSIスコア

PSI(PageSpeed Insights)でのスコアです。

数値としても改善しています!

実装後のデメリット

コード実装前に、この内容を必ず理解しておいてください。

次の項目で詳しく説明していますが、Rinkerの読み込みを後回しにしているため、不完全なページのレイアウトの状態をユーザーに見られてしまう可能性があります。

ご検討いただいた上で、導入をお願いします。

スポンサーリンク

改善のしくみ

Rinkerは、ページ表示前に全部読み込むようになっています。

そのためページ内にRinkerを掲載すればするほど、ページの初期表示が遅くなります。

これを「魔法のコード」の実装で、以下のように変更します。

ページ表示後にRinkerを読み込むので、Rinkerが大量にあってもページ表示速度への影響がなくなります。

初期読み込みは「空データ」を読み込むので、カロリーゼロ!

ネタバラシも終わったので、さっそく導入していきましょう!

スポンサーリンク

コード実装方法

本記事ではWordPressのテーマ「Cocoon」で解説しています。そのため、違うテーマをお使いの方は環境に合わせてアレンジしてください。

  • 1
    「魔法のコード」をコピーする

    下のコードをコピーしてください。

    /*
    Rinker遅延読み込み
    (ユーザー操作で開始 + 最大同時読込数 + 待機時間)
    */
    
    //--------------------------------------
    // 0. 環境設定(変数調整)
    //--------------------------------------
    define('RINKER_MAX_CONCURRENT', 20); //同時読み込み数
    define('RINKER_INTERVAL_MS', 3000); //読み込み間隔[ms]
    define('RINKER_EVENTS', ['scroll', 'mousedown', 'touchstart', 'keydown']); //読み込み開始の操作フラグ
    define('RINKER_AUTO_START_MS', 5000); //無操作時の読み込み待機時間[ms]
    
    //--------------------------------------
    // 1. ショートコードをプレースホルダーに置き換え
    //--------------------------------------
    add_action('wp_loaded', function () {
        if (shortcode_exists('itemlink')) {
            remove_shortcode('itemlink');
            add_shortcode('itemlink', 'my_rinker_lazy_placeholder');
        }
    }, 100);
    
    function my_rinker_lazy_placeholder($atts)
    {
        if (empty($atts['post_id'])) {
            return '';
        }
    
        $json_atts = esc_attr(json_encode($atts));
    
        return sprintf(
            '<div class="rinker-placeholder" data-atts="%s">読み込み中...</div>',
            $json_atts
        );
    }
    
    //--------------------------------------
    // 2. Ajax リクエスト処理
    //--------------------------------------
    add_action('wp_ajax_rinker_load_action', 'my_rinker_ajax_handler');
    add_action('wp_ajax_nopriv_rinker_load_action', 'my_rinker_ajax_handler');
    
    function my_rinker_ajax_handler()
    {
        $atts = json_decode(stripslashes($_POST['atts'] ?? ''), true);
    
        if (!empty($atts) && class_exists('Yyi_Rinker_Plugin')) {
            echo Yyi_Rinker_Plugin::get_object()->shotcode($atts);
        }
    
        wp_die();
    }
    
    //--------------------------------------
    // 3. JavaScript:ユーザー操作で遅延読み込み開始
    //--------------------------------------
    add_action('wp_footer', function () {
    ?>
        <style>
            .rinker-placeholder {
                min-height: 150px;
                margin: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f9f9f9;
                border: 1px solid #eee;
                border-radius: 4px;
                color: #999;
                font-size: 14px;
            }
        </style>
    
        <script>
            (function () {
                const MAX_CONCURRENT = <?php echo RINKER_MAX_CONCURRENT; ?>;
                const INTERVAL_MS = <?php echo RINKER_INTERVAL_MS; ?>;
    			const EVENTS = <?php echo json_encode(RINKER_EVENTS); ?>;
                const AUTO_START_MS = <?php echo RINKER_AUTO_START_MS; ?>;
    
                const queue = [];
                let activeCount = 0;
                let started = false;
    
                async function processQueue() {
                    if (queue.length === 0 || activeCount >= MAX_CONCURRENT) return;
    
                    activeCount++;
                    const el = queue.shift();
    
                    const body = new URLSearchParams({
                        action: 'rinker_load_action',
                        atts: el.dataset.atts
                    });
    
                    try {
                        const res = await fetch('<?php echo admin_url("admin-ajax.php"); ?>', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: body.toString()
                        });
    
                        if (res.ok) {
                            const html = (await res.text()).replace(/0$/, '').trim();
                            if (html) el.outerHTML = html;
                        }
                    } catch (e) {
                        console.error('Rinker Load Error:', e);
                    } finally {
                        activeCount--;
                        setTimeout(processQueue, INTERVAL_MS);
                    }
                }
    
                function startLoading(event) {
                    if (started) return;
                    if (event && event.type === 'scroll' && window.scrollY < 50) return;
    
                    started = true;
                    cleanup();
    
                    const placeholders = document.querySelectorAll('.rinker-placeholder');
                    placeholders.forEach(el => queue.push(el));
    
                    for (let i = 0; i < MAX_CONCURRENT; i++) {
                        processQueue();
                    }
                }
    
                function cleanup() {
                    if (Array.isArray(EVENTS)) {
                        EVENTS.forEach(ev => window.removeEventListener(ev, startLoading));
                    }
                }
    
                setTimeout(() => {
                    if (Array.isArray(EVENTS)) {
                        EVENTS.forEach(ev =>
                            window.addEventListener(ev, startLoading, { passive: true })
                        );
                    }
                }, 1000);
    
                setTimeout(() => {
                    startLoading(); 
                }, AUTO_START_MS);
            })();
        </script>
    <?php
    }, 100);
  • 2
    「functions.php」にアクセスする

    WordPressの管理画面から「外観」→「テーマファイルエディター」に移動します。

    編集するテーマが「Cocoon Child(子テーマ)」になっていることを確認してから、「functions.php」を選択します。

    親テーマ「Cocoon」を直接編集すると、テーマのアップデートで消えるので良いことがありません。

  • 3
    コードを貼り付ける

    一番下までスクロールしていき、先程登録したコードを貼り付けます。

    その後、ファイルを更新をクリックします。

    「ファイルの編集に成功しました。」と表示が出ればOKです。

  • 4
    Rinkerの動作を確認する

    Rinkerの多いページで、正常に表示されるか確認します。

    F12で開発者ツールを起動後、「コンソールタブ」をクリックします。

    もし以下のような「503」や「507」エラーが発生している場合、サーバー制限に引っかかっている可能性が高いので、次のパラメータの調整が必要になります。

  • 5
    パラメータを環境に合わせて調整する

    もし正常に表示されなかった場合は、先程貼り付けたコードの値を調整してください。

    エラーが発生する場合
    同時読み込み数:値を小さくする
    読み込み間隔[ms]:値を大きくする
    ※1000ms = 1sec

    再度Rinkerの動作をチェック後、開発者ツールでエラーが発生しないか確認してください。

    エラーの発生原因は、レンタルサーバーがダウンしないようにサイトごとにアクセス制限を設けているからです。図のようなイメージとなります。

    契約しているレンタルサーバーによって制限がかかる値が異なりますので、「適正値」を自力で探し当てる必要があります

スポンサーリンク

まとめ

ここまで読んで頂き、ありがとうございます。

いかがでしたでしょうか。

この魔法のコードによって、さらに「神ツール」が使いやすくなったかと思います。

ぜひ快適なブログライフを送ってください。

他にも「サイトの表示速度改善方法」を以下の記事にまとめていますので、興味のある方はぜひ参考にして頂ければと思います。

不明な点がございましたら、気軽にお問合せフォームよりご連絡をお願いします。できる限りサポートさせて頂きます。

それではまた会いましょう!

コメント

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