みなさんは、Googleが提供している無料の診断ツール「PageSpeed Insights」をご存知ですか？自分のサイトがどれくらいの速さで表示されているか、一度はチェックしたことがある方も多いかもしれません。
実は先日、自社サイトのいくつかのページをリニューアルしたので、軽い気持ちで診断をしてみたのですが……モバイル表示の結果を見て、驚愕することになりました。
リニューアルによってデザインは洗練され、機能も充実したのですが、その裏側で「読み込みの重さ」という大きな代償を払っていたのです。
衝撃の「削減時間 7,950ミリ秒」
診断結果を開くと、そこには「推定される削減時間 7,950ミリ秒」という絶望的な数字が並んでいました。
「えっ、8秒も画面が固まってるの？」と焦りますが、実際にはそこまでではありません。 これはあくまで「ブラウザが裏側で処理を頑張りすぎて、描画が100%完了するまでにこれだけの無駄があるよ」という理論上の警告です。
しかし、「なんとなく重いな」という体感は、この数字の積み重ねから生まれます。
原因は、リッチな演出のためのJavaScriptや、全ページで一律に読み込まれていた重いプラグインのリソース。まさに「重い鎧をまとって走っている」ような状態でした。これではせっかくのコンテンツも、読者に届く前に離脱されてしまいます。
エンジニアとしてこのボトルネックを放置するわけにはいきません。今回は、子テーマのカスタマイズ用ファイルである functions.php にコードを書いて、ストイックに改善していきます。
注意事項
WordPressエンジニアが実践した「トップページ狙い撃ち」の最適化
今回、私が実施したのは、子テーマから「後出しジャンケン」で制御する最適化術です。 特にこだわったのは、
「トップページだけを爆速にしつつ、他のページの機能を壊さない」
という設計です。
トップページ限定：不要なリソースを徹底排除
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'wp_enqueue_scripts', function() { // フロントページ以外は何もしない（安全策） if ( !is_front_page() ) return; // トップでは不要なスクリプトを解除 wp_dequeue_script( 'google-recaptcha' ); wp_dequeue_style( 'all-min-css' ); // FontAwesome等 }, 100 ); |
特定のプラグイン（Syntax Highlighter等）をトップページで解除
|
1 2 3 4 5 6 7 8 9 10 |
add_action('wp_enqueue_scripts', function() { if ( !is_front_page() ) return; // 記事詳細以外では不要なスタイルとスクリプトを解除 wp_dequeue_style('urvanov_syntax_highlighter'); wp_dequeue_style('crayon-theme-classic'); wp_dequeue_script('urvanov_syntax_highlighter_js'); }, 100 ); |
メインCSSを非同期読み込み（preload）に変更してレンダリングブロックを回避
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter( 'style_loader_tag', function ( $html, $handle ) { if ( !is_front_page() ) return $html; // テーマのメインCSSなどを対象にpreload化 if ( $handle === 'digipress' || $handle === 'dp-visual' ) { $html = str_replace( "rel='stylesheet'", "rel='preload' as='style' onload=\"this.onload=null;this.rel='stylesheet'\"", $html ); } return $html; }, 10, 2 ); |
依存関係のある主要スクリプトを一括でdefer化
|
1 2 3 4 5 6 7 8 9 10 11 12 |
add_filter( 'script_loader_tag', function ( $tag, $handle ) { if ( !is_front_page() ) return $tag; // 遅延読み込みさせたいハンドルのリスト $defer_scripts = [ 'easing', 'anime', 'dp-main-js', 'edel-faq-navigator-front-js', 'rank-math-js' ]; if ( in_array( $handle, $defer_scripts ) ) { return str_replace( ' src', ' defer src', $tag ); } return $tag; }, 10, 2 ); |
このように、is_front_page() でガードを固めることで、お問い合わせフォームなどの大切な機能を維持したまま、トップページの軽量化に成功しました。
Udemy講座で伝えている「推奨されるストラテジー指定」
実は、こうした「現場で使えるWordPress開発のテクニック」は、私が公開しているUdemyのオンライン講座でも詳しく解説しています。
講座のスライドでも説明していますが、最近のWordPress開発において、JavaScriptのエンキュー（読み込み登録）時には、以下の形式で推奨されるストラテジー指定を行うよう伝えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Udemy講座で推奨しているエンキュー時の設定例 $strategy = array( 'in_footer' => true, 'strategy' => 'defer' ); wp_register_script( /* または、wp_enqueue_script */ 'handle-name', 'path/to/script.js', array('jquery'), '1.0.0', $strategy ); |
ただ読み込ませるのではなく、「defer（遅延読み込み）」を活用してブラウザの描画を邪魔しないようにすること。そして何より、プラグインを作るときは「なるべく関係のないページにはenqueueされないように気を配る」こと。これが、プロの現場で求められるパフォーマンスへの配慮です。
驚異の「96%」への返り咲き
こうした「読み込みタイミングの制御」と「不要なリクエストのカット」を積み重ねた結果……デスクトップスコアは96%という驚異的な数値まで回復！
他の項目は元々スコアが高かったのですが、この機会に細部まで徹底的な見直しを行い、アクセシビリティやベストプラクティスも再点検した結果、なんと……
パフォーマンス以外の3項目でも「100・100・100」という、これ以上ない最高評価を獲得することができました！
単に「速い」だけでなく、検索エンジン（SEO）からも、そして何より実際にサイトを訪れるユーザー（ユーザー補助）からも、「最高に使いやすいサイト」としての公認をいただけたような気がして、エンジニア冥利に尽きる瞬間です。
まとめ：技術でサイトの価値を最大化する
「リニューアルしたのに遅くなった」という驚きの結果から始まった今回の挑戦。正しい知識とフックの活用で、機能性と速度は両立できることを改めて実感しました。
講座で解説しているような「一歩踏み込んだ開発テクニック」を身につけることで、サイトの価値は大きく変わります。
「自分のサイトも90%超えを目指したい！」「現場で通用するプラグイン開発手法を学びたい！」という方は、ぜひUdemyの講座もチェックしてみてくださいね。実戦で役立つフックの活用術なども、余すことなくお伝えしています。
私たちエーデルハーツは、こうした技術を活かして、お客様のWordPressサイトをより魅力的に、そして「速く」するお手伝いをしています。
WordPressのカスタマイズや、本格的なプラグイン開発でお困りの際は、お気軽にご相談ください。
今回紹介した「ストイックな最適化」が、みなさんのサイト運営のヒントになれば幸いです！
