WordPress高速化のちょっとしたTips | ポータルサイトHack - 東京・港区ポータルサイト制作会社アクセルメディア

2019/5/23

ポータルサイトをWordPressで作成するケースもあると思いますが、SEOのためにも、少しでも高速化するためのTipsをご紹介します。

適切な画像サイズを設定する

画像はアップロードされる時点で、各サイズの画像が自動生成されます。
デザイン時点で決定する必要がありますが、表示領域に合わせて適切なサイズにリサイズしたものを使用しましょう。
functions.phpに記述します。

<?php
// 例：ヒーロー画像用のサイズ
add_image_size('hero', 1980, 1080, true);
// 例：アバターなど正方形の画像
add_image_size('square', 640, 640, true);

jQueryを軽量化

フロント側でjQueryを使う場合、複雑な機能が必要なければ、デフォルトのものよりも軽量版（スリムビルド）をおすすめします。
管理画面には適用されないようにします。
最新バージョンは jQuery公式サイトでご確認ください。
functions.phpに記述します。

<?php
// 管理画面以外ででの処理
if (!is_admin()) {
  // デフォルトのjQueryを削除
  wp_deregister_script('jquery');
  // 軽量版を適用
  wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.4.1.slim.min.js', [], false, true);
}

JavaScriptにdefer属性を付ける

JavaScriptファイルの読み込み時、<script>タグにdefer属性を付けることで、なるべく初期表示を邪魔しないようにします。
プログラムによっては不具合が出るため注意が必要です。
functions.phpに記述します。

<?php
// JavaScriptにdeferを付ける
add_filter('script_loader_tag', function ($tag, $handle) {
  // すべての script タグに付ける場合
  $tag = str_replace(' src', ' defer src', $tag);
  // 特定の名前のものに付ける場合
  if (0 === strpos($handle, 'script-name')) {
    $tag = str_replace(' src', ' defer src', $tag);
  }
  return $tag;
}, 10, 2);

セルフピンバックの無効化

セルフピンバックとは、投稿のなかに他のサイト内ページのURLを書くと、自動的にリンクが張られ、相互リンクになる仕組みです。
functions.phpに記述します。

<?php
// セルフピンバックの無効化
add_action('pre_ping', function (&$links) {
  foreach ($links as $l => $link) {
    if (0 === strpos($link, get_option('home'))) {
      unset($links[$l]);
    }
  }
});

バージョンの非表示

デフォルトではソースに <meta name="generator" ...> というタグが自動出力され、WordPressのバージョンが入っています。
特に必要ないと思いますので非表示にします。
functions.phpに記述します。

<?php
// バージョン表示の非表示
remove_action('wp_head', 'wp_generator');

wlwmanifest 表示の非表示

デフォルトではソースに <link rel="wlwmanifest" ...> というタグが自動出力されます。
これはWindows Live Writer用の記述ですので、使わない場合は非表示にします。
functions.phpに記述します。

<?php
// wlwmanifest 表示の非表示
remove_action('wp_head', 'wlwmanifest_link');

RSDリンクの非表示

デフォルトではソースに <link rel="EditURI" ...> というタグが自動出力されます。
RSDリンクは外部のサービスからブログを編集する仕組みで、そのためのURLが記載されます。
外部サービスを使わない場合は非表示にします。
functions.phpに記述します。

<?php
// RSDリンクの非表示
remove_action('wp_head', 'rsd_link');

短縮URLの非表示

ページによってはソースに <link rel="shortlink" ...> というタグが自動出力されます。
短いURLを知らせるためのものですので、SEOの影響も考慮し非表示にします。
functions.phpに記述します。

<?php
// 短縮URLの非表示
remove_action('wp_head', 'wp_shortlink_wp_head');

絵文字関連の処理を無効化

WordPress4.3以降、utf8mb4の文字コードに対応したため、絵文字も保存できるようになりました。
その絵文字を出力するための処理がいくつか自動追加されるため、もし絵文字を使う予定がなければ削除します。
functions.phpに記述します。

<?php
// 絵文字関連の処理を無効化
add_filter('emoji_svg_url', '__return_false');
remove_action('wp_head', 'print_emoji_detection_script', 7); // $priority は 7 でないと削除できない
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

OEmbed関連のタグを削除

デフォルトではoEmbedに対応するためのタグ（埋め込みされる場合）が自動出力されます。
個人的にはシェアされた時のために対応しておいた方が良いと思いますが、不要な場合は削除します。
functions.phpに記述します。

<?php
// oEmbed関連のタグを削除
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');