使用していない JavaScript と CSS の最適化方法 - 勝てるホームページ作成会社ぞろ屋

サイトの表示速度が遅い原因のひとつに、不要な”Java Script”や”CSS”の記述がたまっているケースがあります。「画像は軽量化しているのにおかしいな…」と思ったら、それが原因かもしれません。だったら、今すぐ最適化しましょう。サイトの速度が上がれば、検索順位も上がり、ユーザーも笑顔になる。まさに一石二鳥、いや、三鳥くらいの効果があります。

僕はココナラでWEB制作ランキング1位を100回以上獲得してきた戦略的WEBクリエイターですが、これまで、数多くのWEBサイトで、”Java Script”や”CSS”を最適化して、ページ速度を向上させてきました。

まして、タイパ（タイムパフォーマンス）が重視される今。ページ読み込み遅いサイトは閉じたくなるのは当然でしょう。実際、ユーザーが3秒以上待つと、50％以上が離脱してしまうというデータもあるくらいですから、表示速度は戦略的にも重要な要素です。

不要な”JavaScript”や”CSS”の最適化は、たとえるなら、ホームページのダイエット。余分なぜい肉は落とせば、身体の動きも機敏になるのと一緒で、ホームページも必要ないコードをスッキリさせれば、表示速度が速くなります。

それでは、ホームページを「スリム化」させる方法を、解説しましょう！

なぜWordPressサイトの最適化が必要なのか

「どうして最適化がそこまで重要なんだ？」と思われた方がいるかもしれません。見た目がキレイでコンテンツもしっかりしているなら、それで十分だろう…と思われる気持ちも分かります。でも、ここに大きな落とし穴があるんです。

まず、ユーザーは待つのが嫌い。特に今のスマホ時代、サクサク次のページに進まないと「もう別のサイト行こうかな…」となります。実はこれ、僕もよく感じるところでして…。デスクトップやノートPCに比べると、モバイルの性能はまだそこまで高くないので、スマホに合わせて軽量化すべきだと思います。

表示速度は検索エンジンの評価にも影響する

さらに、検索エンジンもサイトの速度をしっかり見てるんですよ。実際にGoogleは、ページ読み込み速度が遅い場合、評価を下げるといわれています。早いからといって、中身が薄ければ評価されませんが、せっかく良い内容のコンテンツを作っても、ページ速度でマイナス点をもらってしまえば、もったいないですよね。

なお、サイト表示が速くなるとサーバーへの負荷も軽くなります。不要なコードをどんどん削っていくと、同時にアクセスしてくるユーザーが増えても耐えられるんですよ。断捨離したら部屋が広くなるのと同じ理屈です。アクセスの少ないWEBサイトはそこまで影響しないですが、部屋がきれいであることに越したことはないですよね。

まとめると、WordPressサイトの最適化は「サイトのパフォーマンス向上」「ユーザー体験の改善」「SEO効果の強化」という3つの大きなメリットをもたらします。

使用していないJavaScriptとCSSを見つける方法

それでは、ホームページのダイエットを始めていきましょう！不要な”JavaScript”や”CSS”を見つけて、WEBサイトの軽量化を図るための方法を紹介します。初心でもできるか心配…？大丈夫です。多少の事前知識は必要ですが、ワードプレスでブログ更新できるなら、順を追っていけば、出来ると思いますよ。

1. プラグインを使う方法

WordPressには便利なプラグインがたくさんありますが、今回は特に、不要な”CSS”や”JavaScript”を見つけて無効化するプラグインをご紹介します。たとえば、「Asset CleanUp」や「Perfmatters」。これらを使えば、どのページにどんなコードが読み込まれているのかリスト化されて、一目瞭然。

Asset CleanUp:
ページ単位で不要なCSSやJavaScriptを選んで無効にできます。たとえば「トップページでは使わないけど、ブログ記事だけで読み込んでほしい」といった調整もラクラク。
Perfmatters:
こちらは、さらに高度なパフォーマンス最適化が可能で、ページ単位で必要なスクリプトを選別できます。UIもわかりやすく、初心者にも使いやすいのがポイント。

2. ブラウザのデベロッパーツールを使う方法

プラグインを使わず、もう少しプロフェッショナルな方法を試したい方には、ブラウザの「デベロッパーツール」から見てみましょう。Chromeであれば、右クリックで「検証」を選択し、「Coverage」タブを開きます。すると、ページに読み込まれた”CSS”や”JavaScript”がどれだけ実際に使われているのかがわかります。未使用のコードが赤く表示されるので、どこを削れば良いのか分かります。

ページを開いて右クリック、「検証」からデベロッパーツールを開きます。
Networkタブでページをリロードすると、どのファイルがどれくらいのサイズで読み込まれているかが表示されます。
Coverageタブでは、使われていない部分が赤くなるので、その記述を削除します。（※除外・削除の仕方は後述。）

3. 自動最適化ツールの利用

もっと簡単に最適化したい方には、「Autoptimize」や「WP Rocket」といった自動最適化ツールもあります。これらのプラグインは、”CSS”や”JavaScript”の結合や圧縮を自動的に行ってくれる優れものですが、WEBサイトによっては、必要のない機能や動作もあるので一長一短。また、他のプラグインとの干渉などで、かえって、パフォーマンスが落ちる場合があるので、注意してください。

4. Google Tag Managerを使う方法

もしマーケティングや解析用のスクリプトが多くて、サイトが重くなっているなら、「Google Tag Manager」にまとめてしまうのも一つの解決策です。これを使えば、スクリプトをタグで管理し、必要なページだけで読み込むよう設定ができます。マーケティング用のタグを一か所で管理できるので、サイトがスッキリして軽くなるわけです。

不要なJavaScriptとCSSの除外方法

さて、使用していない”JavaScript”や”CSS”が見つかったら、いよいよ実際に「除外する」作業に入ります。ここで大切なのは「本当に不要なものだけを削る」という点です。必要なコードまで削除してしまうと、サイトの表示が崩れたり、思わぬ不具合が出たりすることがあるので慎重に進めましょう。僕も、うっかり必要なコードまで消してしまって、慌てた経験があります。

functions.phpで手動除外するコードを書く

まず、WordPressのfunctions.phpファイルに直接コードを書いて、不要な”CSS”や”JavaScript”を除外する方法です。この方法は少しコードを書ける方に向いていますが、慣れれば自由度が高く、カスタマイズも自在です。

たとえば、以下のように書けば特定のページでのみ、特定のCSSやJavaScriptを読み込まないように設定できます。

function remove_unused_scripts() {
    if (is_page('contact')) { // 「contact」ページでのみ
        wp_dequeue_style('plugin-style-handle'); // 使わないCSSを除外
        wp_dequeue_script('plugin-script-handle'); // 使わないJavaScriptを除外
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_scripts');

このコードでは、is_page()関数を使って「contact」というページのみで、指定したCSSとJavaScriptを読み込まないようにしています。

ページ単位での読み込み制御

特定のページや投稿タイプでのみスクリプトやスタイルを無効化したい場合、上記のようなコードを応用して、必要に応じて読み込みをコントロールします。たとえば、トップページやお問い合わせページなどで「このコードは使わないな」と感じたら、そのページだけを指定にして除外できます。

【重要】不要なコードを除外するときの注意点

注意点として、コードを削除する前には、必ずバックアップを取っておきましょう。僕も経験がありますが、つい面倒になって、バックアップを取らず後悔した経験が僕も少なからずあります。functions.phpを編集すると、ちょっとしたミスでもサイト全体に影響を及ぼしかねません。最適化がうまくいったかを確認するために、削除後はページの見た目や機能がきちんと動いているかを必ずテストしてくださいね。

また、変更後はキャッシュをクリアして、ユーザーが最新の状態を確認できるようにしておくと良いでしょう。

最適化のメリットを最大化するための追加テクニック

ここまで、不要な”JavaScript”や”CSS”を見つけて除外する方法を解説しましたが、さらに一歩進んで、最適化の効果を最大化するための追加テクニックもご紹介します。このひと手間で、サイトのパフォーマンスがもうワンランク上がるかもしれませんよ。

こちらの実装は中級者以上向けです。

遅延読み込み（Lazy Load）の導入

まずおすすめしたいのが、JavaScriptの「遅延読み込み（Lazy Load）」です。これは、ページ全体を読み込むのではなく、ユーザーがスクロールしたときに必要なコンテンツだけを読み込む方法。特に画像やJavaScriptファイルは、全てを一度に読み込むと表示が遅くなりますが、遅延読み込みを使えばページの見た目もキビキビして快適になります。

方法としては、WP RocketやAutoptimizeといったプラグインを使うのが一般的ですが、ベストを目指すなら、やはり、手動で設定することでしょう。プラグインは、遅延読み込みの設定が簡単にできる優れたツールである一方、他のプラグインと干渉する可能性は捨てきれません。もともとのプラグイン使用数が少なく、シンプルな構造であれば問題ありませんが、ここでは手動で設定するケースもご紹介しておきます。

プラグインを使わずにJavaScriptで遅延読み込み（Lazy Load）を実装する方法

プラグインを使わずにJavaScriptで遅延読み込み（Lazy Load）を実装する方法を紹介します。特に画像や動画の遅延読み込みに便利で、JavaScriptを少しだけ追加するだけで簡単に導入できます。

まず、HTMLで遅延読み込みしたい画像にdata-src属性を追加し、src属性をプレースホルダー（仮の画像パス）に置き換えます。

<img class="lazyload" data-src="real-image.jpg" src="placeholder.jpg" alt="画像の説明">

次に、JavaScriptで画像の遅延読み込みを行います。ユーザーが画像の位置までスクロールしてきたら、data-srcの値をsrcに設定することで、本来の画像が読み込まれるようにします。

以下のコードを追加することで、遅延読み込みを実現できます。Intersection Observer APIを使うと、要素がビューポートに入ったときに処理を実行できます。

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img.lazyload");

    // Intersection Observerのオプション設定
    const observerOptions = {
        root: null,
        rootMargin: "0px",
        threshold: 0.1
    };

    // 画像がビューポートに入ったときに実行する関数
    const lazyLoad = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src; // data-srcの値をsrcに設定
                img.classList.remove("lazyload");
                observer.unobserve(img); // 観察を解除
            }
        });
    };

    const observer = new IntersectionObserver(lazyLoad, observerOptions);
    lazyImages.forEach(img => observer.observe(img)); // 各画像を観察
});

この方法は、画像だけでなく、動画やiframe要素（YouTubeの埋め込み動画など）にも応用できます。たとえば、<iframe>にdata-srcを追加し、ユーザーがビューポートに到達した際にsrcを設定することで、動画の遅延読み込みも可能です。

定期的なキャッシュのクリアと最適化のチェック

最適化は一度やったら終わりではなく、定期的に見直すことが大切です。特にプラグインやテーマがアップデートされた後は、余計なスクリプトが追加されている場合があるので、その都度チェックしましょう。また、キャッシュのクリアも重要です。最適化の変更がユーザーに反映されるように、キャッシュプラグインを使って定期的にキャッシュをクリアするようにしましょう。

このような＋αのテクニックを駆使することで、サイトの最適化効果をさらに高めることができます。最適化の完成度が高まれば高まるほど、ユーザーもサイトの表示速度に驚き、再訪率がアップするかもしれませんよ。

まとめ

ここまで、WordPressサイトの最適化がなぜ重要なのか、そしてその具体的な方法についてお伝えしました。振り返ってみると、最適化の目的はただ「軽くする」だけではなく、ユーザー体験の向上とSEOの強化、さらにはサーバー負荷の軽減といった多面的なメリットがあることがわかりますよね。

不要なJavaScriptやCSSを見つけ出して削減し、遅延読み込みや画像の最適化を駆使すれば、サイトはかなり身軽になっているのではないかと思います。人もホームページも無駄なぜい肉はそぎ落とした方が、健康ですし、身動きも軽快になります。

とはいえ、やりすぎず、適度に行うことも、心しておいた方が良いかもしれません。なんでもかんでも削りすぎると、かえってデザインや、表示に問題が出てしまうこともあるので、バランスを意識してください。また、最適化は一度やれば終わりというわけではなく、サイトの成長や更新に応じて、定期的にチェックしていくことが大切です。

この記事がお役に立てたらうれしいです。

「良いな」と思ったらシェアしてください！損はさせません

URLをコピーしました！

URLをコピーしました！