wordpress公式ロゴ

一覧ページが激重になってたのはoEmbedでした

篠原 隆司

状況

弊社で最近作り始めたWordPressサイトなんですが、一覧ページのところ（トップページ、カテゴリー、タグ、検索など）が激重になってました。

このサイトの特徴としてはほぼすべての投稿ページでインスタグラムの埋込みを行っています。
埋込はインスタグラム公式から取得するやつじゃありません。
インスタグラムのURLを投稿欄に入れるだけで、Wordpress側が良い感じで埋め込みタグに変えてくれるやつです。

原因追及

心当たりとしては「Wordpress側が良い感じで埋め込みタグに変えてくれるやつ」くらいしかないので、この辺りを中心に調査してみました。

まずはブラウザの「デベロッパーツール」で確認したところ、ブラウザ側じゃなくサーバ側でとてもとても時間が掛かってることが分かりました。

次に、すべての投稿のインスタグラムのURLをインスタグラム公式の埋込タグに変更してみようと思いました。
・・・が、しません。
公式の埋め込みタグを使うと、テキストの部分が固定になっちゃうんですよね。
WordPressのはURLだけ入れるとテキストも出てくるので、どこかのタイミングでインスタグラムからデータを取ってきていそうです。
何が言いたいかというと、インスタグラム側でメッセージを修正したときに、WordPressの機能を使ってるとその変更が反映されるんじゃないかと。
インスタグラム公式の埋め込みタグだと反映されないのではないかと。

とりあえず、管理画面 「設定」 > 「表示設定」で「1ページに表示する最大投稿数」を「1件」にしてみました。
で、最新の投稿でインスタグラムのURLを入れたのと消した場合とで表示させてみると、URLを入れた場合のほうが明らかに遅いので「Wordpress側が良い感じで埋め込みタグに変えてくれるやつ」が原因であることが確実になってきました。

ということは、oEmbed 辺りですね。
この機能を無効にしてしまえば早くなるはずです。

一覧ページ（トップページ、カテゴリー、タグ、検索など）は、oEmbed してくれなくて構いません。
一覧ページは「サムネイル画像、タイトル、日付、本文の先頭から数文字」という構成ですので、oEmbed して貰っても使われません。

ただ、記事ページのほうは oEmbed してもらう必要があります。

とりあえず試しに home.php に次のコードを入れてみました。

remove_action( 'wp_head','rest_output_link_wp_head' );
remove_action( 'wp_head','wp_oembed_add_discovery_links' );
remove_action( 'wp_head','wp_oembed_add_host_js' );
remove_filter( 'the_content', array( $wp_embed, 'autoembed' ), 8 );

get_header();

で、ブラウザで確認。スゴク早くなりました。

あとは他の一覧ページ関係のテンプレートファイルに同じように上記コードを入れていけば解決なんですが、それもあれですね。

解決したコード

functions.php に下記を追加しました。

// 一覧ページでは WP_oEmbed を使わない
add_action( 'get_header', 'action_get_header_remove_oembed' );
function action_get_header_remove_oembed(){
global $wp_embed;

if ( is_admin() ) {
return;
}

if ( is_home() || is_archive() || is_search() ) {
remove_action( 'wp_head','rest_output_link_wp_head' );
remove_action( 'wp_head','wp_oembed_add_discovery_links' );
remove_action( 'wp_head','wp_oembed_add_host_js' );
remove_filter( 'the_content', array( $wp_embed, 'autoembed' ), 8 );
}
}
  1. どのテンプレートファイルにも入れてある get_header() が呼ばれるタイミングで
  2. 管理者ページでなく
  3. ホーム または アーカイブ または 検索 なら
  4. oembed を無効にします

参考になったサイト