WordPress高速化と表示速度を改善する方法
2018.12.21
Webサイトやブログではコンテンツ内容が1番重要ですがそこから目を逸らす方法として表示速度の改善をいうものがあります。いかに改善を行い、PVや回遊率・直帰率を改善していくかというところもサイト運営の楽しさでもあると言えます。てなわけで前置きはSEO対策用に書いているので、つまるところこういうところに気をつけると表示速度が改善されるかもよという話です。
まずはこの情報は2018年12月のお話になります。こういうものは随時変化していきますので、すぐさま情報が古くなるかもしれません。極端な話、Googleが「重いサイト最高だぜ！」といい始めたらそこで世界がそのように改変されます。
自分のしている方法を紹介していきます。合ってるかも知れないし、間違っているかもしれません。質問などは受け付けますが、動かなくなったー消えたーなどは自己責任でお願いします。(バグって冷や汗かきながらあれこれ修正するときが一番勉強になる瞬間でもある気もします。)
それでは紹介していきます。
何はともあれまずは計測
Webサイトの表示速度の計測をするサービスはいくつかありますが、計測する上ではどれか一つに絞って計測していきましょう。そして計測は、「TOPページ」「記事ページ」を計測するようにしましょう。記事ページの方が重要なので記事ページだけ重点的にというのもOKです。
有名所は、Googleの提供しているPageSpeed Insightsがあります。
対策したあとの結果にはなりますが、この「たこさんちゃんねる」の結果です。
TOP
下層
パソコンは100点出ましたマンモスうれピー。モバイルの方は70点前後ですがAMP対応をしているので、目を閉じます。
いいサーバーを選ぶ
ちょっといきなりハードルとお金の話になりますが。飲食店でもお家でも立地は重要です。小手先云々よりもお金で解決できる部分でもあるので、おすすめです。
エックスサーバーやさくらインターネットがベースとして、この「たこさんちゃんねる」はConoHa WINGの「リザーブドプラン」を利用しています。
収容ホストの負荷が上昇しても、パフォーマンスが変動せずに安定稼動できるプランです。
つまりレンタルサーバーの同居住人による影響を受けないということですね。逆に他の住人に影響を与えないということでもあります。
ConoHa WING / リザーブド2GB / メモリ2GB / CPU 3Core / SSD 300GB
このプランで月3,000円ぐらいです。
バック・インフラ周りが得意な方はさくらのVPSやConoHa VPSでKusanagiを使うなどするとさらなる高速化が期待できるかもしれません。
サーバーの設定のPHPの見直し
これは評点には直接関わりませんが、WordPressの応答速度が改善されます。特にPHP5.XをPHP7.Xにすると3倍の速度改善が見込めるとされています(シャア！)
エックスサーバーの場合は、
管理画面→PHP Ver.切り替え→ドメイン選択→変更後のバージョンを選択
画像の圧縮とリサイズ
地味に一番改善が簡単で評点に関わります。
- 画像のサイズを、長辺1,200pxぐらいにする
- 画像1枚のサイズを1MB以下にする
WordPressのプラグインで、リサイズと圧縮をしてくれるプラグインでは、下記3つがおすすめです。
Compress JPEG & PNG images
自分の場合は写真を長辺1,200pxにリサイズしたのち、Web版TinyPNGで圧縮をしたあとにアップロードしています。サーバーへの負荷と、予め小さくしておいたほうがアップロード時間も少ないのでそこの部分も速度改善となります。
また現状運用しているサイトの場合は、
FTPサーバーにはいって、
/wp-content/uploads/~
の中身をサイズの大きい順に並べて1MB超えているものをダウンロードしてリサイズ+圧縮して再アップロードするなどするのも効果的かと思います。
次世代フォーマットでの画像の配信
PageSpeed Insightsで計測すると、「次世代フォーマットでの画像の配信」というアドバイスがでてくるかと思います。こちらはまだ各ブラウザの対応にばらつきがあり、今対応しても無駄足になりかねないので一旦スルーします。
Javascriptは/body直前にまとめる
すっごく簡略すると、ブラウザがページを読み込むことを「レンダリング」といいます。その読み込む途中に今は使わないファイル(特にJavaScriptとか)があると、無駄足、邪魔になるわけです。
どうしても上部で読み込まないといけないものもありますが、そうでない場合はページ下部に持っていきましょう。
<head></head>内、<body>すぐ下に書いてあるものなどを</body>の直前に設置する。
うまく表示されなくなるなどの不具合も起こるかもなので、すぐに戻せるように適宜バックアップを取りながら実施していきましょう。
また、余分なJavaScript、使っていないソースコード(HTMLやCSS)、クリック率の悪い広告、ウィジェットなどを外すことも大切です。削ることで整理整頓に繋がりますし、本当に読んで欲しい記事や押して欲しいボタンに目がいきやすくなります。
シェアボタン
シェアボタンは標準のものではなく、オリジナル(自分での意)で用意する。標準のものはいろいろとJavascriptを読み込んだり、非同期読み込みの関係上、表示にラグが発生します。
Webフォントをやめる
特に日本語のWebフォントなのですが、日本語は数も多く(ひらがな、かたかな、漢字とか)、NotoSansなどウェイト数の多いものになると数百MBと重くなるのでよほどこだわりがない場合は基本フォントに設定する。
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Sans, "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
またアイコンなどでFontawesomeを使用している場合で、使用するアイコンが少ない場合は、それだけ選んでローカルにいれてしまうという方法があります。
FontawesomeやWebフォントを外すだけで、10点〜15点ぐらいあがります。
スマホのときはAMP対応
WordPressの場合、AMP対応はプラグインで(比較的)簡単に(?)可能です。
この辺が参考になるかも。
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法（アナリティクスにも対応）
WordPressで勝手に読み込まれるJSやCSSを削除
適宜自分の環境にて変更をお願いします。
function.php
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_action('wp_head', 'wp_generator');
add_filter( ‘emoji_svg_url’, ‘__return_false’ );
add_filter(‘xmlrpc_enabled’, ‘__return_false’);
add_filter( ‘wpcf7_load_js’, ‘__return_false’ );
add_filter( ‘wpcf7_load_css’, ‘__return_false’ );
add_filter( ‘adminStylesheet’, ‘__return_false’ );
Contact form 7を利用している場合。
// contactだけ読み込む
function my_enable_cf7_js_css() {
if( is_page( 'contact' ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'my_enable_cf7_js_css' );
なるべくプラグインは使わない。
できる限り、減らしていきましょう。使用頻度の割に余分なCSSやJSを読み込んでしまう可能性が高くなります。
まとめ
結構内部よりになってしまった…。
うえってなりがちですが、WordPressでのブログ運営は、HTML,CSS,JavaScript,PHPやサーバー云々と学べることは多岐にわたるので、できることがどんどん増えていくと楽しいものです。(pjaxやPWAやらはおいといて)
WordPressのいいところは、調べるとだいたいのことは出てくるので、先人の知恵がたくさん転がっています。
速さが足りない!!って叫びながら楽しんで速度改善していきましょう。
それでは！
Comment