PHPファイルの遅延読み込みの実装方法

SWELLの高速化に、記事下部分の遅延読み込みというものがあります。

javascriptで行われていることは検証ツールなどで確認できたのですが、どのような仕組みで行われてるのか興味があったので少し調べてみました。

検索するとそれらしい記事が見つかりました。

PHP includeの遅延読み込み

PHPのincludeをファーストビューに含まれない部分は後で読み込むということでjavascriptと連動してあとからHTMLに追加する仕組みのようです。

アイデアマンズブログ

SEOにも配慮したHTML遅延読み込み Hybrid Include で Core Web Vitals を改善する試み | アイデアマンズブ… 小さいHTMLは正義 HTMLはWebページ全体(数mb)から見ると小さなリソー…

Qiita

PHPのincludeを簡単に非同期化するLazy Includeコンセプト – Qiita PHPで別ファイルのHTML部品を読み込むincludeを、できるだけ簡単にJavaScriptによる非同期読み込みに変えちゃおうという試みです。名付けてLazy Include。php-lazy…

使い方がかなり難しい感じがしますね。

フロント側では、jsでloadする部分を出力しておいて、あとから読み込めばいいのはわかるのですが、HTMLレベルに展開された結果をどうやって渡すのかが問題ですよね。

Stack Overflow

I need the equivalent of .load() to JS I’m developing a script but I mustn’t use jQuery library so I need the equivalent of .load() in JS. I need to do this without jQuery: $(document).ready(function…

正直、この内容だけだと、使えない感じがします。

SWELLではrest APIを使用して遅延読み込みを実施

SWELLでは記事ごとに異なるHTMLをjavascriptで遅延読み込みしていますので、SWELLのテーマの実装を確認してみたいと思います。

SWELLはテーマの機能の中で積極的にrest APIを利用しているのが他のテーマとの決定的な違いです。

例えば、SWELLには独自でPV数やクリック数のカウントをする機能がありますが、それらはrest APIを使用して計測しています。

記事下コンテンツの遅延読み込みや、フッターウィジェットの遅延読み込みもrest apiとjavascriptを組み合わせて実現しているようです。

仕組みとしては、rest apiのエンドポイントを独自で用意して、javascriptからそれを叩くと、rest apiからHTMLが返ってくるので、そのHTMLをjavascriptで埋め込むという流れになっています。

PHP側はSWELのlib/rest_api.phpを見ると、遅延読み込みのエンドポイントの定義が書かれています。

この辺を参考にすると、色んな部分で遅延読み込みを実現することができそうです。

javascriptで遅延読み込みしていると、HTMLにはその部分が存在しないため、SEO的に不利になるとも言われていますが、今のGoogle botはきちんと拾ってくれると思います。

まとめ

SWELLのテーマの内部を見ていると、Wordpressの機能をかなり有効に使ってテーマを作成しているな、という感想を持ちます。

特にrest apiを使ってPVを観測する部分や遅延読み込みを行う部分などは、他のテーマにはない部分だと思います。

javascript側に処理させることで、first viewを表示するための処理と分離できるため、SWELLが高速なテーマとなっている理由だと思います。