今回はウェブサイトの読み込み速度を劇的に改善するための具体的な方法についてご紹介します。特にWordPressサイトでの実装コードを交えながら、なぜこれらの最適化が重要なのか、そしてどのように実装すればよいのかを詳しく解説します。
目次
Google Fontsの最適化
ウェブフォントは美しいデザインに欠かせませんが、読み込みが遅いとユーザー体験を損なう原因になります。以下の最適化テクニックを使うことで、Google Fontsの読み込み速度を大幅に向上させることができます。
////////////////////////////////////
// [functions.php]
// Google Fonts 速度改善（preconnect + preload）
////////////////////////////////////
function my_add_google_fonts()
{
?>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap" onload="this.onload=null;this.rel='stylesheet'">
<?php
}
add_action('wp_head', 'my_add_google_fonts');このコードでは三つの重要な最適化を行っています：
- preconnect – ブラウザに対してGoogle Fontsのドメインへの接続を事前に確立するよう指示します。これにより、実際にフォントが必要になったときの接続時間を短縮できます。
- preload – フォントのスタイルシートを先読みします。
as="style"属性により、ブラウザはこのリソースがCSSであることを理解し、適切な優先度で読み込みます。 - 遅延読み込み –
onload="this.onload=null;this.rel='stylesheet'"の記述により、ページの他のコンテンツの読み込みをブロックせずに、フォントを非同期で読み込むことができます。
この方法を使うことで、ページのレンダリングを妨げることなくGoogle Fontsを効率的に読み込むことができます。
Swiper CSSの最適化
スライダーライブラリなどの外部CSSも、適切に最適化することで読み込み速度を向上させることができます。
////////////////////////////////////
// [functions.php]
// Swiper CSS の最適化（preload + stylesheet）
////////////////////////////////////
function my_add_swiper_css()
{
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css', [], null, 'all');
wp_style_add_data('swiper-css', 'preload', 'true');
}
add_action('wp_enqueue_scripts', 'my_add_swiper_css');このコードでは、WordPress標準の関数を使用してSwiperのCSSを適切にキューに追加しています：
- wp_enqueue_style – WordPressの推奨方法でCSSを登録します。
- wp_style_add_data –
preloadパラメータを追加することで、このスタイルシートを先読みするようブラウザに指示します。これにより、ページの他の部分を読み込む前にSwiperのスタイルを準備できます。
LCP（Largest Contentful Paint）画像の最適化
重要なLCPの改善には、「メインビジュアル画像」の読み込み速度向上が不可欠です。
<picture>
<source media="(max-width: 768px)" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/mv/mv-sp.webp" width='345' height='420' type="image/webp">
<source media="(max-width: 768px)" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/mv/mv-sp.png">
<source srcset="<?php echo get_template_directory_uri(); ?>/assets/img/mv-pc.webp" type="image/webp">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/mv-pc.png" alt='' width='960' height='710' fetchpriority="high" loading="eager">
</picture>このPicture要素には、複数の最適化テクニックが含まれています：
- レスポンシブ画像 –
media属性を使用して、デバイスの画面サイズに応じて適切な画像を表示します。768px以下のデバイスにはSP用の小さい画像を提供します。 - WebP対応 – 新しい高圧縮フォーマットであるWebPをサポートするブラウザには、WebP画像を提供します。非対応ブラウザには自動的にPNGがフォールバックとして使用されます。
- 画像サイズの明示 –
widthとheight属性を明示的に指定することで、ブラウザが画像のスペースを事前に確保でき、レイアウトシフトを防止できます。 - 優先度の設定 –
fetchpriority="high"属性により、この画像を最優先で読み込むようブラウザに指示しています。 - 遅延読み込みの無効化 – LCP画像には
loading="eager"を使用して、遅延読み込みを無効化しています。これにより、画面上部の重要な画像を即座に読み込みます。
////////////////////////////////////
// [functions.php]
// 画像速度改善（LCP画像のpreload）
////////////////////////////////////
function add_lcp_preload() {
?>
<link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/assets/img/mv-sp.webp">
<link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/assets/img/mv-sp.png">
<link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/assets/img/mv-pc.webp">
<link rel="preload" as="image" href="<?php echo get_template_directory_uri(); ?>/assets/img/mv-pc.png">
<?php
}
add_action('wp_head', 'add_lcp_preload');このコードでは、LCPとなる可能性の高いメインビジュアル画像をpreloadすることで、ブラウザに優先的に読み込むよう指示しています：
- 複数フォーマットの事前読み込み – WebPとPNGの両方をpreloadすることで、どのブラウザでも高速に表示できるようにしています。
- レスポンシブ対応 – PC用とSP（スマートフォン）用の両方の画像を事前に読み込み、デバイスに応じて適切な画像をすぐに表示できるようにしています。
LCP（Largest Contentful Paint）画像以外の最適化
<picture>
<source media="(max-width: 768px)" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/sample-sp.webp" width='345' height='420' type="image/webp">
<source media="(max-width: 768px)" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/sample-sp.png">
<source srcset="<?php echo get_template_directory_uri(); ?>/assets/img/sample.webp" type="image/webp">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/sample.png" alt='' width='960' height='710' loading="lazy">
</picture>LCP以外の画像には遅延読み込みを適用することで、初期ページ読み込み時間を短縮できます。
まとめ
ウェブサイトの速度最適化は、ユーザー体験向上だけでなく、SEO面でも重要です。本記事で紹介した以下の方法を実装することで、サイトのパフォーマンスを大幅に向上させることができます！
試してみてくださいね！
