WordPress ページ表示高速化。CDN に頼らないチューニングで【PageSpeed B 達成】

By ゆいちょん On 2016/10/30 Last updated 2016/12/27 0

この記事は投稿されてから１年以上経っています。内容が古くなっているかもしれませんので、ご注意ください。

前回 WordPress の高速化に取り組んだものの、あまり成果が上がらなかったのですが、そのまま放置しておくのもアレなので、さらにいくつかスコアアップに取り組んでみました。

と、その前に、「高速化＝パフォーマンスアップ」という言葉を使うとこのあたり（Webサイトパフォーマンス管理の基礎知識とかPingdomやGTmetrixでレンタルサーバーの性能を評価しても意味がありません）界隈からは指摘を受けそうな気もするので、このブログで言う高速化というのは「GTmetrix」「PageSpeed Insights」におけるスコアの改善と定義することにする。

ということでお願いします。

SyntaxHighlighter Evolved を外す

結局外した。記事中の該当部分のソースをすべて書き直しました。

ただ、スコアにはあまり影響なし。（計測ページでそもそもソースコードなどを記載しているページではなかったためかも）

楽天アフィリエイトモーションウィジェットを外す

楽天アフィリエイトモーションウィジェットを取り外したところ、ページスピード、ページスコア（PageSpeed Insights／GTMetrix）が上がりました。

	GTmetrix PageSpeed Score / YSlow Score Page Load Time / Total Page Size	PageSpeed Insights PC / SP
（前回最終）	D / E 3.7s / 5.63MB	78 / 61
楽天ウィジェット削除	C / D 3.5s / 5.37MB	80 / 65

※ 何回か計測して良いものを記載しています。

AdSense 関連のファイルが良い感じに読み込まれたケースだと思いますが、3.5秒がでました。

wp-embed.min.js の削除

コンテンツのレンダリングをブロックしている JS の中に/wp-includes/js/wp-embed.min.jsなるものがありました。

この機能は、他のウェブサイトで「oEmbed」に対応している記事を、自分のブログに埋め込み可能になるもので、WordPress4.4 以降からは記事のURLを貼るだけで簡単に引用表示できます。

（中略）
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');
コレで出力されているすべてのEmbed系のタグを削除することができます。

ついでにHTTPレスポンスも成形する
remove_action('template_redirect', 'rest_output_link_header', 11 );
WordPress4.4以降からhead内に挿入されるようになった不要なタグ「Embed」を削除。 – ONZE

functions.php に追記して削除。

skip-link-focus-fix.js の削除

コンテンツのレンダリングをブロックしている JS の中にskip-link-focus-fix.jsなるものがありました。

// This one is for accessibility
wp_enqueue_script( 'sparkling-skip-link-focus-fix', get_template_directory_uri() . '/inc/js/skip-link-focus-fix.js', array(), '20140222', true );

この JS が何をしているかはよくわからなかったのですが、アクセシビリティに関するもののようです。

世の中的に言及されてないようなので、一旦外して様子を見てみます。

現在使用しているワードプレスのテーマ「sparkling」に同梱されていたもので、デフォルトでも存在している JS なのかは確認していません。

参考：skip-link-focus-fix.jsとは:メモ – WEBUTUBUTU

はてなブックマーク数を表示する画像を辞める

サイドバーに WordPress Popular Posts を使って、アクセスの多い記事を表示していますが、ここにはてブ数を表示するように手を加えました。
–>はてブ数を表示できるように PS Auto Sitemap （記事一覧生成 WordPress プラグイン）をちょこっとカスタマイズ | 雑記 BOOOKs

が、これが GTMetrix の Minimize redirects で F を叩き出す原因となっているので、辞めることに。

とはいえ、すべてを削除するのではなく、現在見ている記事と、はてブ数の多い記事だけは残しました。

	GTmetrix PageSpeed Score / YSlow Score Page Load Time / Total Page Size	PageSpeed Insights PC / SP
（前回最終）	D / E 3.7s / 5.63MB	78 / 61
楽天ウィジェット削除	C / D 3.5s / 5.37MB	80 / 65
はてブ数画像その他	B / D 3.2s / 5.39MB	80 / 65

遂に GTMetrix の PageSpeed Score で B 判定がでました！

プラグインで追加される CSS を1つにまとめる

WordPress Related Posts modern.css の読み込み禁止

// Related Posts modern.css の読み込み禁止
add_action( 'wp_enqueue_scripts', 'deregister_plugin_files' );
function deregister_plugin_files() {
        wp_dequeue_style( 'wp_rp_edit_related_posts_css' );
}

参考：How to Remove Plugin Scripts & Stylesheets in WordPress – Inspirational Pixels

上記を functions.php に記述してもwp-content/plugins/related-posts/static/themes/modern.cssが消えない。。

いろいろ調べてたけど、結局こちらもプラグインのダッシュボードから設定だった・・。

Advanced settings > Themes > Enable Themes で modern を選んでたのだけど、Enable Themes のチェックを外すだけでよかった。

絵文字用スクリプト・スタイルの削除

使わない。functions.php に（コピペで）下記コードを追記。

function disable_emoji() {
     remove_action( 'wp_head', 'print_emoji_detection_script', 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' );    
     remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
     remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );    
     remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
add_action( 'init', 'disable_emoji' );

参考：WordPress 4.2 で追加された絵文字対応のスクリプトを無効化する方法 – 零弐壱蜂

DNS プリフェッチ

DNS lookup が発生しているものに対して、

<link rel="dns-prefetch" href="">

した方が良い的なものを見たので追記した。
参考：DNSプリフェッチでウェブページの読み込み速度をスピードアップ | 海外SEO情報ブログ

前回 preconnect 追記してるんだけど、効果はあるのか無いのかよく分かってない。とりあえず、競合しないように、書き分けておいた。

DNS プリフェッチ、プリコネクトどちらについても、いつもの「私それやってます」的な記事があまり検索しても見つからず、どうしようか悩んだけれど WordPress プラグインの「Photon」を入れたら「DNS prefetch」追記される的な記事を何処かで見たので、おまじないがてら追記しておいた。

ウェブフォント「M+ 1p」

みんなが大好きな Noto Sans Japanese から M+ 1p に変えた。

ちょっと癖のある書体なきもするけど、Noto Sans が 5MB くらいあるのに対して、M+ 1p は 3MB くらいだったので。

ただ、Noto Sans 使ってるウェブサイトの方が多いでしょうから（想像）、キャッシュされていることを考えれば Noto Sans Japanese / JP の方が実際には高速かもしれないですけどね。

参考：Google Fonts + 日本語早期アクセス • Google Fonts + Japanese Early Access

ちょっと見飽きて来てたのでというのもあり。

結果

	GTmetrix PageSpeed Score / YSlow Score Page Load Time / Total Page Size	PageSpeed Insights PC / SP
（前回最終）	D / E 3.7s / 5.63MB	78 / 61
楽天ウィジェット削除	C / D 3.5s / 5.37MB	80 / 65
はてブ数画像その他	B / D 3.2s / 5.39MB	80 / 65
CSS フォント　その他	B / D 3.2s / 5.32MB	80 / 65

スコア的にはこんなもんでした。

最後の調整は、スコアには表れてないけど、きっと表示が早くなっていると信じてます。

HTML , JS , CSS の圧縮とかしたらもうちょっと改善されるものと思いますが、一旦このへんで終わりにします。あと、AdSense 外せば確実に良くなりますね。

CloudFlare 以外の CDN があれば使ってみたいなー。

※ 何度も言うようですが、何回か計測して良かったものを掲載しています。