WordPress の head 内を整理してモバイル表示速度を改善する

ブログ運営と改善

WordPress の head 内を整理してモバイル表示速度を改善する

この記事は約 8 分で読めます。

ユウキです。

今回は WordPress でつくった Web サイトのソースを表示した際、ごちゃごちゃとしている head 内のタグを整理していきます。

TCD の MAG や Be を使っている方ならそのまま使えるカスタマイズになるので、サイトの表示速度を改善したい方は参考にしてみてください。

この記事が役に立つ読者
  • head 内の不要なコードを整理してサイト表示速度を改善したい方
  • ワードプレステーマ「Be」(TCD076)を利用されている方
  • ワードプレステーマ「MAG」(TCD036)を利用されている方

head 内の初期ソースコード

TCD「Be」の初期状態の head 内はこちら。(画像をクリックすると拡大)

TCD「Be」のソースコードを表示

TCD「Be」の編集は次の 8 箇所。

  • wp-block-library-css(/wp-includes/css/dist/block-library/style.min.css?ver=5.4.1)
  • javascript(/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp)
  • javascript(/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1)
  • REST API(/wp-json/)
  • EditURI(/xmlrpc.php?rsd)
  • wlwmanifest(/wp-includes/wlwmanifest.xml)
  • meta generator(WordPress のバージョン表示)
  • shortlink(記事へのショートリンク)

TCD「MAG」の初期状態の head 内はこちら。(画像をクリックすると拡大)

TCD「MAG」のソースコードを表示

TCD「MAG」の編集は次の 7 箇所。

  • pingback
  • application/rss+xml(/feed/)
  • application/rss+xml(/comments/feed/)
  • wp-block-library-css(/wp-includes/css/dist/block-library/style.min.css?ver=5.4.1)
  • javascript(/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp)
  • javascript(/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1)
  • REST API(/wp-json/)
  • shortlink(記事へのショートリンク)

head 内の整理

head 内のコードを整理する

具体的な編集方法は以下の通りです。

pingback を削除

pingback を受け付けないようにする設定は、WordPress の【設定】→【ディスカッション】から変更できますが、TCD「MAG」の head 内に不要なリンクが残ってしまうので削除します。

編集方法は、WordPress の【外観】→【テーマエディター】→【header.php】へ進み、18行目あたりの <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>”> を削除する。(画像をクリックすると拡大)

header.php から pingback を出力しているコードを削除

feed を削除

フィード購読をしてもらう意図がなければ不要なので、functions.php に次のコードを追加して削除します。


// feed を削除
remove_theme_support('automatic-feed-links');

block-library を削除

投稿編集でブロックエディタを使わず、クラシックエディタを利用しているなら block-library-css は不要なので、functions.php に次のコードを追加して削除します。


// block-library を削除
function remove_block_library_style() {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );

JavaScript(jQuery)の最適化

初期の jquery はバージョンが 1.12.4 で、Lighthouse の検査だと脆弱性を指摘されます。

古い WordPress テーマやプラグインには必要だったりしますが、TCD テーマでは不要なので、最新バージョンを確認して変更します。

編集方法はこちらの記事を参考にしてみてください。

jquery-migrate は動作上で問題個所を指摘してくれたり、動作を補助してくれるものですが、動作確認が完了済みなら不要なので削除します。

編集方法は、functions.php に次のコードを追加します。


// jquery-migrate.min.js を削除
function remove_jquery_migrate( $scripts){
	if(!is_admin()){    
		$scripts->remove( 'jquery');
		$scripts->add( 'jquery', false, array( 'jquery-core' ) );
	}
}
add_filter( 'wp_default_scripts', 'remove_jquery_migrate' );

wp-json を削除

api.w.org(wp-json)は、REST API を呼び出すためのコードで、WordPress と外部アプリケーションを繫ぐために使われます。

プラグインとの連携や、外部に WordPress 投稿を埋め込む embed 機能に利用されるのですが、head 内の <link rel=’https://api.w.org/’ href=’https://example/wp-json/’ /> という 1 行は不要なので削除します。

編集方法は、functions.php に次のコードを追加します。


// wp-json を削除
remove_action('wp_head','rest_output_link_wp_head');

WordPress のバージョン表示を削除

WordPress のバージョン情報が記載されている場合、ユーザーと検索エンジンのどちらに対しても表示が必要ないこと、セキュリティの観点も含めて不要なので削除します。

編集方法は、functions.php に次のコードを追加します。


// WordPress のバージョン表示を削除
remove_action('wp_head', 'wp_generator');

記事へのショートリンクを削除

初期状態は投稿 ID のリンクが表示されていますが、任意のパーマリンクを設定して canonical(URL 正規化)で指定表示もされているので、投稿 ID のリンクは不要な情報として削除します。

編集方法は、functions.php に次のコードを追加します。


// 記事へのショートリンクを削除
remove_action('wp_head', 'wp_shortlink_wp_head');

TCD Be 投稿用ツールを削除

TCD「Be」には head 内に外部から投稿編集するためのコードが出力されています。

EditURI は外部ツールを利用して投稿編集するためで、

wlwmanifest は Microsoft の Windows Live Writer というツールを利用して投稿編集するためのもの。

どちらも基本的に不要なので削除します。編集方法は、functions.php に次のコードを追加。


// TCD Be 投稿用ツール削除
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

functions.php に追加するコード一覧

TCD「Be」の functions.php に追加するコードまとめはこちら。


// block-library を削除
function remove_block_library_style() {
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );

// jquery-migrate.min.js を削除
function dequeue_jquery_migrate( $scripts){
    if(!is_admin()){    
        $scripts->remove( 'jquery');
        $scripts->add( 'jquery', false, array( 'jquery-core' ) );
    }
}
add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );

// wp-json を削除
remove_action('wp_head','rest_output_link_wp_head');

// 記事へのショートリンクを削除
remove_action('wp_head', 'wp_shortlink_wp_head');

// TCD Be 投稿用ツール削除
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

// WordPress のバージョン表示を削除
remove_action('wp_head', 'wp_generator');

TCD「MAG」の functions.php に追加するコードまとめはこちら。


// feed を削除
remove_theme_support('automatic-feed-links');

// block-library を削除
function remove_block_library_style() {
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );

// jquery-migrate.min.js を削除
function dequeue_jquery_migrate( $scripts){
    if(!is_admin()){    
        $scripts->remove( 'jquery');
        $scripts->add( 'jquery', false, array( 'jquery-core' ) );
    }
}
add_filter( 'wp_default_scripts', 'dequeue_jquery_migrate' );

// wp-json を削除
remove_action('wp_head','rest_output_link_wp_head');

// 記事へのショートリンクを削除
remove_action('wp_head', 'wp_shortlink_wp_head');

まとめ

WordPress の head 内にある不要なコードやリンクの整理について解説しました。

今回は私が利用している TCD「Be」と TCD「MAG」の環境で行ったカスタマイズですが、利用されている環境によって結果は変わりますので、

カスタマイズする前に必ずバックアップを取って、一つ一つ変更の効果を検証しながら進めるようにしてください。

以下の記事と併せて設定すると、サイト表示速度の大幅改善が見込めますので参考にしてみてください。

では今回はこの辺で。

ありがとうございました!

この記事のタイトルとURLをコピーする

関連記事

  1. WordPress の目次デザインをおしゃれにカスタマイズ

    ブログ運営と改善

    WordPress の目次デザインをおしゃれにカスタマイズ

    ユウキです。ブログのユーザビリティ(使いやすさ、見やすさ)を改善し…

  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    ブログ運営と改善

    WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決

    ユウキです。コンタクトフォーム 7 などで設定されている自動送信メ…

  3. TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ブログ運営と改善

    TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

    ユウキです。TCD「Be」のウィジェットに設置できるオリジナルのプ…

  4. Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ブログ運営と改善

    Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ユウキです。今回は、Autoptimize を使ってコードの最適化…

  5. AddQuicktag の設定と表示されない場合の解決方法

    ブログ運営と改善

    AddQuicktag の設定と表示されない場合の解決方法

    ユウキです。今回は AddQuicktag の使い方について解説し…

  6. TCD は SEO に弱いのか? H タグの使い方と修正方法

    ブログ運営と改善

    TCD は SEO に弱いのか? H タグの使い方と修正方法

    ユウキです。「 TCD のテーマって SEO 対策で不利って聞いた…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP