お問い合わせ

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

  • URLをコピーしました!

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

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

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

この記事を書いた人

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

目次

PHP includeの遅延読み込み

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

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

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

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

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が高速なテーマとなっている理由だと思います。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

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

目次