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

555 view

前回 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つにまとめる

Popular Posts wpp.css の読み込み禁止

プラグインのダッシュボード > Tools から設定することができました。

[Use plugin’s stylesheet]をdisabledにするだけです。

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

GTMetrix WordPress

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

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

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

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

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

コメントを残す

  • コメント欄には個人情報を入力しないようにしてください。

  • 入力いただいたメールアドレスは公開されませんがサーバーに保存されます。
  • 入力いただいた情報の他に、IPアドレスを取得させていただきます。取得した IPアドレス はスパム・荒らしコメント対処ために利用され、公開することはありません。