SEO対策・高速化機能について

機能詳細
一部有料機能あり
せりぽよ
SEO対策・高速化について

Add functions PHPでご利用いただけるSEO対策・高速化機能について解説しています。

目次
  1. jQuery Migrateを読み込まない
  2. JQueryの<script>タグにdeferを付与する
  3. JQueryの<script>タグにasyncを付与する
  4. WordPress純正jQueryをGoogle CDNに変更して<head>内部で読み込む
  5. WordPress純正jQueryをGoogle CDNに変更して</body>直前で読み込む
  6. imgにloading=”lazy”を追加して画像の読み込みを遅らせる(以下と併用は非推奨)
  7. lazysizes.jsでimg, video, iframeを遅延読み込み
  8. 【PRO版】Enable Keep-Alive を設定する
  9. 【PRO版】画像とフォントをキャッシュする
  10. 【PRO版】ブラウザのキャッシュを設定する
  11. 【PRO版】同じファイル名でも.webpを優先的に配信する
  12. 【PRO版】ETags(Configure entity tags) を無視する
  13. 【PRO版】HTML, CSS, JavaScript, Text, XMLを圧縮する
WordPressプラグインAdd functions PHPで利用できるSEO対策・高速化機能について

jQuery Migrateを読み込まない

jQuery Migrate は、jQuery のバージョンアップに伴う非推奨機能や変更点に対応するためのライブラリです。具体的には、jQuery の新しいバージョンにアップグレードする際に、古いコードが動作しなくなる問題を防ぐために使用したり、非推奨となったメソッドや機能を引き続き使用できるようにするためのものです。

jQuery Migrateを読み込まずに削除して問題ない場合としては、以下のようなパターンがあります。

  • コードの互換性が確認されている場合
    • サイト上のjQuery コードが最新の jQuery バージョンと互換性がある場合。
    • 非推奨のメソッドや機能が使用されていないことを確認した場合。
  • プラグインやテーマの互換性が確認されている場合
    • 使用しているすべてのプラグインやテーマが最新の jQuery バージョンと互換性がある場合。
    • プラグインやテーマの開発者が jQuery Migrate に依存していない場合。
  • パフォーマンスの最適化が必要な場合
    • ページの読み込み速度やパフォーマンスが向上したい場合。
    • 不要なスクリプトを削減することで、サイトのパフォーマンスを最適化したい場合。

JQueryの<script>タグにdeferを付与する

jQueryの<script>タグにdeferを付与するとページの初期読み込みが速くなり表示速度が向上しやすくなります。

ただし、defer属性は、古いブラウザではサポートされていない場合があります。そのため、古いブラウザをサポートする必要がある場合は注意が必要です。また、初期表示に必要なスクリプトは、<head>タグ内に配置するか、async属性を使用することが推奨されます。

もしdeferを付与して挙動がおかしくなった場合はasync属性を使用するか、使用自体を断念することをおすすめします。

JQueryの<script>タグにasyncを付与する

deferとasyncは、JavaScriptファイルの読み込みと実行のタイミングを制御するための属性です。これらを使うことで、ページの読み込み速度を改善することができますが、それぞれの動作には違いがあります。

defer属性

  • 読み込み: HTMLのパース（解析）と並行してJavaScriptファイルをバックグラウンドで読み込みます。
  • 実行: HTMLの解析が完了し、DOMが完全に構築された後に実行されます。DOMContentLoadedイベントの直前に実行されます。
  • 順序: 複数のdeferスクリプトは、HTMLに記述された順序で実行されます。

async属性

  • 読み込み: defer と同じく、HTMLの解析と並行してJavaScriptファイルをバックグラウンドで読み込みます。
  • 実行: JavaScriptファイルの読み込みが完了した時点で即座に実行されます。HTMLのパースは一時停止します。
  • 順序: 複数のasyncスクリプトは、読み込みが完了した順に実行されます。HTMLに記述された順序は関係ありません。

async属性を持つスクリプトは、読み込みが完了した順に実行されるため、スクリプト間の依存関係がある場合には注意が必要です。依存関係があるスクリプトにはdefer属性を使用する方が適していることもあります。

また、asyncスクリプトは、DOMの準備が整う前に実行されることがあるため、DOM操作を行うスクリプトには適していません。DOM操作を行うスクリプトにはdefer属性を使用する方が安全です。

なお、サードパーティのスクリプトやページ全体に影響を与えるスクリプトにはasync属性が適している場合がありますが、全てのスクリプトに適用できるわけではありません。

WordPress純正jQueryをGoogle CDNに変更して<head>内部で読み込む

CDNを使用することで、ユーザーに最も近いサーバーからjQueryが配信されるため、読み込み速度が向上します。また、GoogleのCDNは非常に信頼性が高く、ダウンタイムがほとんどありません。

<head>で読み込む際の特徴としては、以下の通りです。

  • ページの読み込みが始まるとすぐにjQueryが読み込まれるため、ページの初期段階でjQueryを使用するスクリプトが実行可能です。
  • 他のスクリプトがjQueryに依存している場合、<head>で読み込むことで、依存関係のあるスクリプトが確実に動作します。
  • <head>でスクリプトを読み込むと、ブラウザはスクリプトのダウンロードと実行を優先するため、HTMLのパース（解析）が一時停止し、ページのレンダリングが遅れる可能性があります。
  • ページの初期表示が遅くなる可能性があります。

ただし、他のプラグインやテーマがWordPressの純正jQueryに依存している場合、GoogleのCDNから読み込むことで互換性の問題が発生する可能性があります。特に、バージョンの違いによる問題に注意が必要です。

この機能を実行して挙動がおかしくなった時は、テーマやプラグインの利用を停止したり、</body>直前での読み込みに切り替えたり、機能自体を無効化したりしてください。

WordPress純正jQueryをGoogle CDNに変更して</body>直前で読み込む

</body>直前で読み込む際の特徴としては、以下の通りです。

  • HTMLのパースが完了した後にスクリプトが読み込まれるため、ページのレンダリングが遅延しません。これにより、ページの初期表示が速くなります。
  • ページの主要なコンテンツが迅速に表示されるため、表示速度が短くやすいです。
  • ページの読み込みが完了するまでjQueryが利用できないため、ページの初期段階でjQueryを使用するスクリプトが実行できません
  • 他のスクリプトがjQueryに依存している場合、これらのスクリプトが正しく動作しない可能性があります。依存関係のあるスクリプトは、jQueryの読み込み後に配置する必要があります。

この機能を実行して挙動がおかしくなった時は、テーマやプラグインの利用を停止したり、<head>での読み込みに切り替えたり、機能自体を無効化したりしてください。

imgにloading=”lazy”を追加して画像の読み込みを遅らせる(以下と併用は非推奨)

<img src="example.jpg" alt="Example Image" loading="lazy">

loading="lazy"は、画像の読み込みを遅延させるためのHTML属性のことであり、これを使用すべきパターンとしては、追加のライブラリを導入せずに、簡単に遅延読み込みを実装したい場合や<img>や<iframe>タグの遅延読み込みだけで十分な場合、最新ブラウザのみの対応だけで問題無い場合などです。

loading="lazy"を追加するメリットとしては以下のようなものがあります。

  • ページの読み込み速度が向上：ページの最初に表示される部分（ファーストビュー）に必要な画像だけが最初に読み込まれます。このため、ユーザーがページを開いたときに、すぐにコンテンツが表示されるため、ページの読み込み速度が速く感じられます。
  • 無駄なデータを減らす：ユーザーが実際にスクロールして表示する画像だけが読み込まれるため、無駄なデータのダウンロードが減り、データ使用量が削減されるため通信コストが抑えられます。
  • サーバーの負担が減る：一度に大量の画像を読み込む必要がなくなるため、サーバーへの負荷が軽減されてサーバーのパフォーマンスが向上し、他のユーザーへのレスポンスも速くなります。
  • スムーズな操作感：ページの読み込みが速くなることで、ユーザーはスムーズにコンテンツを閲覧可能です。特に、長いページや画像が多いページでは、スクロールするたびに画像が遅延読み込みされるため、操作感が向上します。

lazysizes.jsでimg, video, iframeを遅延読み込み

<img data-src="image.jpg" class="lazyload" alt="Sample Image">
<iframe data-src="https://www.youtube.com/embed/example" class="lazyload"></iframe>

lazysizes.jsは、画像（img）、ビデオ（video）、iframeの遅延読み込みを簡単に実装できるJavaScriptライブラリです。

lazysizes.jsはloading="lazy"とは違い、

  • 遅延読み込みのタイミングや方法を細かくカスタマイズしたい場合や
  • 多くの画像や動画を含むページのパフォーマンスを最大限に最適化したい場合のほか
  • <img>や<iframe>以外の要素にも遅延読み込みを適用したい場合、
  • 多くの画像や動画を含むページのパフォーマンスを最大限に最適化したい場合

このような場合に利用をおすすめします。loading="lazy"と併用すること自体は可能ですが、二重になってしまいパフォーマンス低下に繋がる可能性が高いためおすすめはしていません。

lazysizes.jsを使用するメリットとしては、以下のようなものがあります。

  • ページの読み込み速度が向上：ページの最初に表示される部分（ファーストビュー）に必要な画像だけが最初に読み込まれます。このため、ユーザーがページを開いたときに、すぐにコンテンツが表示されるため、ページの読み込み速度が速く感じられます。
  • 無駄なデータを減らす：ユーザーが実際にスクロールして表示する画像だけが読み込まれるため、無駄なデータのダウンロードが減り、データ使用量が削減されるため通信コストが抑えられます。
  • サーバーの負担が減る：一度に大量の画像を読み込む必要がなくなるため、サーバーへの負荷が軽減されてサーバーのパフォーマンスが向上し、他のユーザーへのレスポンスも速くなります。
  • スムーズな操作感：ページの読み込みが速くなることで、ユーザーはスムーズにコンテンツを閲覧可能です。特に、長いページや画像が多いページでは、スクロールするたびに画像が遅延読み込みされるため、操作感が向上します。
  • SEOの改善：Googleなどの検索エンジンは、ページの読み込み速度をランキング要因の一つとして考慮しています。遅延読み込みを使用することで、ページのパフォーマンスが向上し、SEOの改善につながる可能性があります。

【PRO版】Enable Keep-Alive を設定する

Keep-Alive（キープアライブ）は、HTTP接続を持続させるための機能で、以下のようなコードを.htaccessに追加することで有効にできます。ほとんどのモダンなウェブサーバー（Apache、Nginxなど）はKeep-Aliveをサポートしていますが、有効化しても追加されない場合はサーバーの設定を確認してください。

<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

通常、ブラウザがサーバーにリクエストを送信すると、サーバーはレスポンスを返してから接続を閉じます。Keep-Aliveを有効にしている時は、同じ接続を使って複数のリクエストとレスポンスをやり取り可能です。

このため、Keep-Aliveを有効にすると以下のようなメリットが発生します。

  • 接続の再利用：Keep-Aliveを有効にするとブラウザとサーバーの間の接続が切れずに続くため、同じ接続を使って、複数のリクエスト（要求）を処理可能です。そのため、接続を閉じずに続けるので、新しい接続を作る時間が省けるためページの読み込みが速くなります。
  • 接続の効率化：接続を作ったり切ったりするのは、サーバーにとって負担がかかる作業です。Keep-Aliveを使うと、同じ接続を再利用できるので、サーバーが新しい接続を作る必要が減ります。これにより、サーバーのリソース（力や時間）が節約され、他のリクエスト（要求）を処理するのがスムーズになります。
  • 高速なページ表示：ページが速く表示されるので、ユーザーはスムーズにコンテンツを閲覧できるようになり、特に、画像やスクリプト、CSSなどのリソースが多いページでは、Keep-Aliveの効果が大きく現れやすいです。

【PRO版】画像とフォントをキャッシュする

キャッシュとは、一度読み込んだデータを一時的に保存しておく仕組みです。キャッシュを保存しておくと次に同じデータを読み込む際に、もう一度サーバーからダウンロードする必要がなくなります。画像とフォントをキャッシュ保存を手動で実行するには、以下のようなコードを.htaccessに追加しましょう。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/eot "access plus 1 year"
</IfModule>

このため、Keep-Aliveを有効にすると以下のようなメリットが発生します。

  • キャッシュの利用：画像やフォントをキャッシュすることで、ブラウザは一度ダウンロードしたデータを保存します。次回同じページを訪れたとき、ブラウザは保存されたデータを使うため、再度ダウンロードする必要がなくなるため、ページの読み込みが速くなります。
  • サーバーの効率化：キャッシュを利用することで、サーバーへのリクエスト（要求）が減り、サーバーは新しいリクエストを処理する必要が少なくなるため、負荷が軽減されます。このため、サーバーのリソース（力や時間）が節約され、他のリクエストの処理がスムーズになります。
  • スムーズな閲覧：ページが速く表示されるため、ユーザーはスムーズにコンテンツを閲覧できます。特に画像やフォントが多いページでは、キャッシュの効果が大きく現れやすく、ユーザーがより早い表示速度で閲覧しやすくなります。

【PRO版】ブラウザのキャッシュを設定する

ブラウザのキャッシュも先程の説明と同じように、ウェブページを表示するために必要なデータ（画像、CSS、JavaScriptなど）を一時的に保存しておく仕組みです。

ブラウザのキャッシュ保存を手動で実行するには、以下のようなコードを.htaccessに追加しましょう。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/font-woff2 "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/eot "access plus 1 year"
</IfModule>

ブラウザのキャッシュを設定するメリットとしては、以下のようなものがあります。

  • キャッシュの利用：ブラウザは一度ダウンロードしたデータを保存されるため、ページの読み込みが速くなります。
  • サーバーの効率化：キャッシュを利用することで、サーバーへのリクエスト（要求）が減り、他の表示リクエストの処理がスムーズになります。
  • スムーズな閲覧：ページが速く表示されるため、ユーザーはスムーズにコンテンツを閲覧できます。

【PRO版】同じファイル名でも.webpを優先的に配信する

WebP（ウェッピー）は、Googleが開発した画像フォーマットで、JPEGやPNGに比べてファイルサイズが小さく、同等かそれ以上の画質を提供するフォーマットです。このため、ページの読み込み速度が向上し、データ使用量が削減されます。

.webpを優先的に手動で配信するには、以下のようなコードを.htaccessに追加しましょう。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

.htaccessで.webpを優先的に配信するメリットとしては、以下のようなものがあります。

  • 軽量な画像：WebPは、JPEGやPNGに比べてファイルサイズが小さく、像の読み込みが速くなるため、ページ全体の読み込み速度が向上し、ユーザーは素早く画像を閲覧できます。
  • 効率的なデータ転送:WebPは、同じ画質であればJPEGやPNGよりもファイルサイズが小さいため、データ転送量が減ります。そのため、特にスマホユーザーにおいて少ないデータ転送量で画像を閲覧できます。
  • 効率的なコンテンツ配信：軽量なWebP画像を配信することでサーバーの帯域幅の使用量が減るため、サーバーの負荷が軽減され、他のリクエストの処理がスムーズになります。

【PRO版】ETags(Configure entity tags) を無視する

ETags（エンティティタグ）は、ウェブサーバーがファイルのバージョンを識別するために使うタグ（識別子）のことです。

.webpを優先的に手動で配信するには、以下のようなコードを.htaccessに追加しましょう。

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

ブラウザがサーバーにリクエストを送信すると、サーバーはリソースのETagを返します。次回、同じリソースをリクエストする際に、ブラウザはこのETagをサーバーに送信し、サーバーはリソースが変更されていない場合にキャッシュされたバージョンを使用するよう指示します。

  • キャッシュの効率化：ETagsを無視すると、ブラウザはファイルが変更されていないかどうかを確認するための追加のリクエストを送る必要がなくなるため、ページの読み込みが速くなります。
  • サーバーの負荷軽減：ETagsを無視することでサーバーへのリクエストが減り、サーバーはファイルが変更されていないかどうかを確認するための処理を行う必要がなくなるため、負荷が軽減されます。これにより、サーバーのリソース（力や時間）が節約され、他のリクエストの処理がスムーズになります。
  • キャッシュの一貫性：ETagsはサーバーごとに異なるため、同じファイルでも異なるETagが生成されることがあります。ETagsを無視することで、キャッシュの一貫性が保たれ、異なるサーバー間でのキャッシュの問題が解消されます。

【PRO版】HTML, CSS, JavaScript, Text, XMLを圧縮する

HTML, CSS, JavaScript, Text, XMLを圧縮すると、データの転送が速くなり、ページの読み込み速度が向上します。

HTML, CSS, JavaScript, Text, XMLを圧縮するには、以下のようなコードを.htaccessに追加しましょう。

<IfModule mod_deflate.c>
    # HTML, CSS, JavaScript, Text, XMLファイルを圧縮
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
</IfModule>
  • データ量の削減：HTML、CSS、JavaScript、Text、XMLファイルを圧縮することで、ファイルサイズが小さくなります。そのため、小さくなったファイルは、ブラウザに速くダウンロードされるため、ページの読み込みが速くなります。
  • 効率的なデータ転送：ファイルを圧縮するとデータ送信量が削減されるため、転送にかかる時間が短くなります。そのため、特にモバイルユーザーにとっては、データ使用量が削減され、通信コストが抑えられます。
  • 効率的なコンテンツ配信：圧縮されたファイルは、サーバーからブラウザに速く送信されるため、サーバーの帯域幅の使用量が減ります。特に、HTML、CSS、JavaScript、Text、XMLファイルが多いページでは、圧縮の効果が大きく現れます。これにより、サーバーの負荷が軽減され、他のリクエストの処理がスムーズになります。

今なら無料会員登録いただいた方へ

Add functions PHP
無料版をプレゼント

plugin
  • 各ユーザーごとのサイドメニュー表示切り替え
  • 投稿一覧にアイキャッチや最終更新日を追加
  • 一覧や編集画面のタグ選択をチェックボックス形式に変更
  • 各投稿を複製するボタンの追加
無料機能は他にも沢山！無料版をダウンロードする