【モバイル100点】プラグインなしでWordPress爆速化【阿部寛に勝利】

Webサイトの記事をより見てもらえるようにするためには検索結果のより上の方に載る必要があります。　そしてそのためにはSEO対策をする必要があります。

そして、検索市場で最も高いシェア率を誇るGoogleはSEO対策の一つとして「ページの表示速度を向上させる」ことも重要である述べています。

そこで私は様々な方法を使ってBableTechを最適化して、見事Googleが開発したツール上でのパフォーマンスのスコアが100点になりました。

そこで今回は、WordPressサイトにおいてプラグインなしで表示速度を改善＆軽量化する方法を一挙公開します。

表示速度とSEOについて

まず最初に、Webサイトの表示速度がどれだけSEO対策と関係あるのかについて軽く説明したいと思います。

とはいえ、ここに関しては以前に作った記事でみっちり解説しているのでそちらをご覧ください。

加えて、上の記事である程度爆速化する方法を紹介していますので、一通り目を通していただきたいです。　上の記事ではプラグインなども活用して高速化していて見事99点という高スコアをたたき出していますが、今回は上の記事の内容プラスアルファで、さらに表示速度を極めるための方法を紹介していきます。

そのため、できるだけ上の記事で紹介した方法をまずは実践してほしいです。

プラグインなしで表示速度を改善する方法

それでは早速紹介していきます。上で紹介した記事と多少重なる内容もありますが、ぜひすべて検討してみてください。

サーバーキャッシュ設定

重要度：★★☆☆☆

クライアント側のキャッシュシステムといったらCSSやJSなどのファイルや画像等をブラウザ上に記憶しておいて次にアクセスするときに同じファイルをいちいちインターネットからダウンロードせずに済むようにして表示の高速化を図るというものですが、直接的にSEO対策につながりませんし、その人が再訪問しない限りキャッシュは有効に使えないので、正直あまり効果が期待できません。

しかしながらサーバーキャッシュシステムではよく使うデータ（よくアクセスされるページのデータ等）　をサーバー上の読み込み速度が速い領域に保存しておくことで、次にアクセスされたときに迅速にデータを提供できるようにした仕組みとなっていて、初めての訪問者かどうかに限らずよくアクセスされるページを高速表示することができるため、クライアント側キャッシュシステムよりも高い効果を得られることが期待されます。　それに、Googleがクロールするときにもその効果を得ることができることもあるため、SEO対策にもつながる可能性が高いです。

具体的な方法についてですが、レンタルサーバーの機能などを活用するのが一番良いです。

例えばBableTechが採用しているXserverにおいてはXアクセラレータという機能を利用することができ、静的なファイルだけでなくWordPressを構成しているような動的なPHPファイル等についても効果を得ることができます。

Xserverではサーバーキャッシュ設定というものもあるので、ONにしておきましょう。Xserver以外でも、あらゆるレンタルサーバーに似たような機能があったりするので是非検索して調べてみてください。

他にも、CDN（コンテンツデリバリーネットワーク）を利用することでより一層パフォーマンスを上げることができたりもします。

HTMLコード最適化

重要度：★☆☆☆☆

これから紹介するものは比較的重要度が低いですが、やれることは全部やったという人はさらにもう一歩高速化を実現するために実践してみてください。

まずはHTMLコードの最適化についてです。

HTML最適化

コメントアウトはない方が良い
改行やスペースはない方が良い
階層は浅い方が良い
タグは少ない方が良い
クラスやIDは短い方が良い
内容は深い方が良い

以上がHTMLコードを組み立てるときの心得です。WordPressにおいてはHTMLというよりはsingle.phpなどのテンプレートファイルの話になりますね。

コメントアウト（<!– –>）などによってコードの解説が含まれていることがありますが、消すことでコードのサイズを減らすことができる上に、セキュリティ対策にもつながる可能性があるのでお勧めです。　また、同時にスペースや改行等も減らせるだけ減らしておきましょう。

https://codebeautify.org/minify-html

上のようなツールを使えば簡単に無意味な文字を削除して圧縮してくれます。なお、コードの可視性が非常に悪くなるため、編集するとき用にオリジナルのテンプレートもどこかに保存しておいた方が良いです。

また、そもそもタグ自体少ない方が良いです。例えば無意味そうなspanタグを撤去して階層をなるべく浅くするなどすれば、HTML解析処理が短く済むようになるので高速化につながります。

また、タグに付与するクラスやIDも少ない方が良いですし、短い方が良いです。ただしCSSなどがうまく反映されなくなる恐れがあるので、HTML等に自信のある人だけタグの編集等は行うようにしましょう。

ちなみに本文を多少長くしたからと言ってページの表示速度にはほとんど影響は出ませんので、内容は深くしましょうね。

CSSコード最適化

重要度：★★☆☆☆

続いてCSSコードの最適化です。こちらについてはHTMLコード最適化よりも重要だと思っています。

CSS最適化

コメントアウトはない方が良い
改行やスペースはない方が良い
セレクタは単純な方が良い
Webフォントは使わない方が良い（ブラウザ標準フォントを利用するべき）
ショートハンドプロパティを使う方が良い
プロパティは少ない方が良い

コメントアウトや改行、スペースのくだりはHTMLと同じです。以下のツールなどを利用して圧縮しましょう。

https://www.toptal.com/developers/cssminifier

CSSについても、圧縮すると可視性が非常に悪くなるので、圧縮後の物はstyle.min.cssという名前にするなどして、オリジナルのstyle.cssは残しておくようにしましょう。

なお、WordPressテーマファイルの一つである「style.css」にはテーマについての情報がコメントアウトで記載されていたりします。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: BableTheme 
Description:This theme was produced only for BableTech. This theme will never be distributed. 
Author: Babu
Author URI: https://bablishe.com/about-us/
Version: 20230527
---------------------------------------------------------*/
/* ここから下のコードを圧縮する */
*{font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;margin:0;padding:0}.st-.st-aside,.st-main,article,canvas,details,figcaption,figure,footer,header,nav,section,summary{display:block}#breadcrumb ol li,#relative_post ul li a,.other_new_product,div#post_tag_field ul li,div.spec_field ul li,ul#sidebar_popular_list li a{display:inline-block}body{min-width:320px;word-wrap:break-word;background:#fffcf5}img{max-width:100%}.wp-block-image img{border-radius:20px;box-shadow:0 0 20px #a69d9d91;transition:.5s;height:auto}.wp-block-image img:hover{box-shadow:0 0 50px #a69d9d57;cursor:pointer}#headbox-bg{

このコメントアウトまで消してしまうとテーマがうまく認識されなくなる危険性があるので、一番上のコメントだけ残して、その下のコードだけ圧縮するようにしましょう。

また、ファイル名もstyle.cssのままにして、オリジナルの物はstyle.original.cssみたいに保存しておきましょう。

また、スタイルを指定するときのセレクタについては複雑よりも単純な方が良いです。

div.test ul li a{
/* こちらよりも */
}

.test a{
/* こちらの方が軽量 */
}

ピンポイントでちゃんと反映されるようにしつつ、最も単純なセレクタで済ませることを意識しましょう。なお、セレクタが単純な方がCSSの優先順位が低くなってデザインがおかしくなる危険性があるので、そこも確認しながら行いましょう。

また、HTMLコードの最適化によってクラス名やID名を短くしておけば、CSSセレクタのコードの量も短くて済むようになるので良いですね。

加えて、以下のようなショートハンドプロパティを活用することをお勧めします。

div{ /* こうじゃなくて */
    margin-right:5px;
    margin-left:10px;
    margin-top:5px;
    margin-bottom:10px;
}

div{ /* こちらの方が軽量 */
    margin:5px 5px 10px 10px;
}

単純にコード量が減るだけでなく、慣れてきたらこちらの方が開発速度が向上＋可視性も良くなるでしょう。　marginだけでなく、paddingやfont、box-shadowなど様々なプロパティでショートハンド記法が使えたりします。以下の記事で丁寧に解説されていたので是非ご覧ください。

https://webliker.info/css-short-hand/

また、Webフォントはなるべく使わない方が良いです。

CSS遅延読み込み

重要度：★★☆☆☆

HTMLファイルを読み込んでいくときに途中でCSS（linkタグによるスタイルシートの読み込みやstyleタグによる直接記述）　が見つかった場合、その時点でHTMLパース（解析）をやめてCSSの解析に移ってしまいます。

そのCSSがファーストビュー（ページが読み込まれたとき最初に見える部分）に関係するものだったら良いのですが、例えばフッターや関係ないページのCSS等、最初に読み込む必要のないものだったら無駄にHTMLパースを中断させてしまっていることになります。

そうなるとページの表示速度に影響が出てしまうので、重要でないCSSはページが読み込まれた後に読み込むようにするべきです。

CSSの遅延読み込みに関しては様々な方法があるわけですが、私はJavaScriptを用いてページ読み込み後にlinkタグをHTML内に挿入して遅延読み込みさせるようにしています。

window.addEventListener('load', () => {

  //スタイルシートを読み込む
  var ss = document.createElement('link');
  ss.type = 'text/css';
  ss.rel = 'stylesheet';
  ss.href = 'CSSファイルのアドレス';
  document.head.appendChild(ss);

});

header.phpなどに上のようなスクリプト埋め込むことで、任意のスタイルシートをページ読み込み後に読み込むことができます。　私の場合ですが、すべてのCSSをsecond_style.cssに書き込んで、WordPressテーマの標準スタイルシートであるstyle.cssに重要なCSSを書いています。

CSSのインライン化（HTMLタグに直接書き込む）　を行って、最初の段階では一切CSSを外部から込みこまないようにすれば更なる高速化が期待できるわけですが、インライン化は面倒くさいのと表示が崩れるなどのトラブルが起きやすいのであまりお勧めはしません。

JavaScriptコード最適化

重要度：★★☆☆☆

続いてJavaScriptの最適化です。

JavaScript最適化

ライブラリ（jQuery等）は使わない方が良い
querySelectorよりもgetElementByIdを使う方が良い
関数名や変数名は短い方が良い
改行やスペースはない方が良い

とりあえず思いつく限りのものを挙げてみました。JavaScriptについても圧縮ツールがあるので使ってみてください。

https://www.toptal.com/developers/javascript-minifier

このツールを使えば、基本的に影響のない範囲で変数名を自動的に短くしたりtrueを0!に変換してなるべくコード量を減らしてくれたりします。　とても圧縮できて良いのですが、こちらについてもコードの可視性が非常に悪くなるので、オリジナルのものもとっておきましょう。

また、要素を指定するときですが、最近のJSではquerySelectorというCSSセレクタで要素を指定することができるメソッドがあるのですが、IDが分かっているときはgetElementByIdの方が圧倒的に速く動作するのでお勧めです。

また、基本的なDOM操作やPOST通信なら生のJavaScriptでできると思うので、よっぽど複雑な処理を行おうとする時以外は基本的にjQueryなどの外部ライブラリは使わない方が良いです。

【爆速化】脱jQueryしたかったらこれを見なさい。【JavaScript】

上でjQueryの必要性、不必要性、脱jQueryの方法について語っているので是非お読みください。

いや、俺はjQuery使うんだ！という方は以下の記事を参考に、正しくjQueryを読み込むようにしましょう。

【WordPress】間違ったjQueryの読み込み方【みんなやってる】

JavaScript遅延読み込み

重要度：★★★☆☆

CSSの時と同様に、JavaScriptについてもファーストビューに関係ないものについては基本的に遅延読み込みするべきです。

といってもJavaScriptの遅延読み込みには大きく分けて3種類あります。

JavaScript遅延読み込み方法

async属性を使う：HTML解析を邪魔せずにJSファイルをダウンロード。ダウンロード完了次第HTML解析を中断させて実行
defer属性を使う：HTML解析を邪魔せずにJSファイルをダウンロード。HTML解析が終わったら実行
ページ読み込み後にJSによって動的に読み込み、逐次実行

asyncやdeferについては以下のページで丁寧に解説されていたので、ぜひご覧ください。

https://takayamato.com/defer_async/

<html>
<head>

    <script defer src="1.js"></script>

</head>
<body>
    <script async src="2.js"></script>
    
    <script src="3.js"></script>

    <script>
        window.addEventListener("load",()=>{
            var sc = document.createElement('script');
            sc.type = 'text/javascript';
            sc.async = true;
            sc.src = '4.js';
            document.head.appendChild(sc);
        });
    </script>
</body>
</html>

上のHTML上では1.js～4.jsまでの4つのスクリプトを読み込んでいます。　HTMLパーサーになりきって、上からコードを読んでみましょう。

1.js

HTMLパーサーはheadタグの中から読みます。そのため、まず最初に見つけるのは1.jsです。deferタグが付いているので、スクリプトのダウンロード自体は非同期で行いますが、実行自体は後回しです。

2.js

続いてbodyタグを読みますが、その中に2.jsがあります。asyncタグが付いているのでスクリプトのダウンロードを非同期で行い、ダウンロードでき次第HTML解析を中断してスクリプトを実行します。

3.js

続いて3.jsです。こちらにはasyncもdeferもついていないので、HTML解析を中断してスクリプトをダウンロードし、そのまま実行します。

4.js

そのあとに直接コードが書かれているscriptタグがあります。直接書かれている場合はそのままHTML解析を中断して実行することになります。　しかしwindow.addEventListener(“load”,()=>{});という、ページ読み込みが完了した後に実行する関数によって構成されているため、中のコード自体を実行するのはHTML解析が終わった後（deferの実行タイミングよりもさらに後）ということになります。

そしてコードの内容についてですが、新しくheadタグの中に4.jsを読み込むようなscriptタグを挿入するというものなので、4.jsをページ読み込み完了後に読み込み＆実行することができます。

あまり見にくいものではないですが、まとめると上の図のようになります。実行順番は

3.js ➡ 2.js ➡ 1.js ➡ 4.js

ということになりますね。そして3.jsが最もHTML解析を邪魔していて、表示速度に影響が出てしまうでしょう。

asyncを使っている2.jsに関しても、ダウンロード時は邪魔しないものの実行ではがっつりHTML解析を中断してしまっています。

deferを使っている1.jsに関してはHTML解析の邪魔は一切していませんが、厳密にはページ表示がまだ完了していない段階で実行をしているので、体感では表示速度は向上するものの厳密には表示速度はそこまで改善されないです。

そしてページ表示完了後にDL&実行をしている4.jsに関してはHTML解析の邪魔をほとんどしていない上に表示処理が完全に完了した後に実行しているため、ページの表示速度を短縮することができます。なお、実行するタイミングが遅いというデメリットがあります。

そのため、実行が多少遅くなっても良いなら基本的に4.jsのように読み込むことをお勧めします。

【99点】Google広告とアナリティクスのJSを遅延読み込みする方法【WordPress】

多くのWebサイトでGoogleアドセンスやアナリティクスを導入していると思いますが、これらのスクリプトは非常に重たいので、BableTechでは4.jsのように読み込むことにしています。方法については上の記事で解説しました。

というかこれらのスクリプト以外にも、ほとんどすべてのスクリプトをこのように読み込んでいます。

4.jsのように読み込みたくない場合は基本的にdeferをつけ、よっぽどの理由がない限りasyncや属性無し方式をとらないようにしましょう。

ちなみにGoogle Chromeを使っている人だったら、開発者ツールの「Network」というタブを確認することでどのタイミングでどのファイルがロードされているかわかるのでお勧めです。ここで不要なスクリプトを発見することもあります。

画像最適化

重要度：★★☆☆☆

画像最適化

画像は少ない方が良い
画像サイズは小さい方が良い
遅延読み込みした方が良い
png/jpegよりもwebpなどの形式の方が良い

Webサイトの読み込み処理で、なんだかんだで一番データサイズが大きくなるのは画像でしょう。そのため、画像を最適化するのは非常に大切なことです。

【え、2つだけ!?】本当に必要だと思うプラグイン【WordPress】

上の記事でも解説している通りEWWW Image Optimizerというプラグインが非常にお勧めなのですが、これを使いたくない場合は

https://tinypng.com/

上のようなツールを使って画像を圧縮し、

https://cloudconvert.com/

上のようなツールを使ってWebP形式に変換して使用すれば画像自体の最適化は結構文句なしでしょう。

また、画像のタグにloding=”lazy”をつけることで遅延読み込みを行うこともできます。

私の使っているXserverではXPageSpeedという機能があり、こちらを使うことでこれらの最適化を簡単ン行うことができます。　非常にお手軽ですね。CSS遅延読み込みやJS遅延読み込みは自分である程度実装したのでここだけOFFにしています。

実際Xserverはページ表示速度を改善したいならお勧めのサーバーなので迷っている方はぜひどうぞ。

Xserverの詳細

head整理

重要度：★☆☆☆☆

WordPressにおいては、HTMLのheadタグの中に自動的にいくつかタグが挿入されます。その中で必要のないものも混入していたりするので、少しでも速くするために整理しましょう。

詳しくは以下のページで丁寧に解説されていました。

https://wpqw.jp/wordpress/themes/head-clean/

function mytheme_enqueue() {
    wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'classic-theme-styles' );
	wp_dequeue_style('global-styles');
}
//使わないscriptsを消す
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );

//REST APIを消す
remove_action( 'wp_head', 'rest_output_link_wp_head' );

//EditURIを消す
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );

//WordPressのバージョンがわからないようにする
remove_action('wp_head','wp_generator');

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

 //絵文字なんぞ使わん
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

テンプレートからは編集できない部分なので、function.phpから専用のコードを使ってタグを消していきます。

一番上でwp-block-libraryというCSSを消しています。ブロックエディタを使っている人だったら表示が崩れてしまう恐れがあるので注意してください。私はブロックエディタ使っていますがなんか大丈夫でした。

その次のclassic-theme-stylesも基本的には削除して問題なさそうです。すべて1つずつ試してみてダメそうだったら戻すようにしましょう。

WordPressのバージョンがわからないようにする処理についてはセキュリティ対策にもなるのでお勧めです。

余分なタグが読み込まれていないか確認する方法として、ページ上で右クリックをして「ソースを表示」を選択してページのHTMLコードの全貌を確認するのをお勧めします。

スコア測ってみた

このようにして最適化しまくって、スコアを測ってみました。Googleが作ったWebサイト分析ツールの一つである「Page Speed Insight」を使いました。

上のように、モバイル表示で100点をとることができました。このツールはモバイル表示に結構厳しいので、100点なのはかなりすごいです。

これで、少なくともページの表示速度が原因でSEOのスコアを下げられることはないでしょう。

阿部寛のホームページのスコア

とにかく表示速度が速くて有名な阿部寛のホームページですが、FCPという、画面に文字等の要素が表示されるまでの時間は0.9秒となっていて非常に速いです。

しかしBableTechの記事で試してみたら0.7秒となっていて、0.2秒勝てました！　この数値が1秒以下だと表示速度は完璧といえるでしょう。