SWELLテーマの高速化：遅延読み込み、表示速度、ページ遷移、構造化マークアップの詳細解説

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

SWELLテーマとその高速化機能について

ウェブサイトの運営において、SEO対策は避けて通れない重要なテーマとなっています。

その中でも特に重要なのが、ウェブサイトの「表示速度」と「構造化マークアップ」です。

これらは、ウェブサイトのユーザビリティと検索エンジンの評価に大きな影響を与えるため、適切な設定と最適化が求められます。

表示速度は、ユーザーがウェブサイトを訪れた際の第一印象を左右します。

表示が遅いウェブサイトは、ユーザーの離脱を招き、結果的に検索エンジンの評価を下げる可能性があります。

一方、表示速度が速いウェブサイトは、ユーザーに快適な閲覧体験を提供し、長時間の滞在や再訪を促すことができます。

一方、構造化マークアップは、ウェブページの情報を検索エンジンが理解しやすい形に整理するためのマークアップ言語です。

これにより、検索結果ページでの表示が改善され、クリック率の向上に寄与します。また、構造化マークアップを適切に設定することで、検索エンジンにウェブサイトの内容をより正確に理解してもらうことが可能となります。

これらの表示速度と構造化マークアップは、それぞれ異なる側面からSEO対策を行うもので、それぞれがウェブサイトのパフォーマンスとユーザーエクスペリエンスに対して重要な役割を果たします。

そのため、ウェブサイトを運営する際には、これらの要素を適切に設定し、最大限に活用することが求められます。

この記事では、WordPressのテーマ「SWELL」を使用して、表示速度の最適化と構造化マークアップの設定を行う方法について詳しく解説します。

SWELLは、これらの機能を簡単に設定できるように設計されており、初心者でも簡単にSEO対策を行うことが可能です。

これらの設定を適切に行うことで、ウェブサイトの表示速度を向上させ、検索エンジンからの評価を高めることができます。

SWELLとは？

SWELLは、その高速化機能が標準搭載されていることで知られているWordPressの人気の有償テーマです。

このテーマを使用することで、サイトの表示速度を大幅に改善することが可能となります。

特に、モバイル環境での表示速度に優れており、適切な設定を行うことで、GoogleのPageSpeed Insights（PSI）スコアで99点を達成することが可能です。

フルチューンするとこんな数値も叩き出せます。

SWELLの高速化機能とは？

SWELLの高速化機能は多岐にわたりますが、その中でも特に重要なのがキャッシュ機能です。

キャッシュ機能とは、静的なCSSやヘッダーなどをキャッシュしておきこれにより、ページに訪れたユーザーに対して、高速なページ表示を提供することができます。

また、SWELL本体の高速化設定も含めて、不要なプラグインの削除、画像のWEBP化、PHPのバージョン更新など、さまざまな設定を行うことで、さらなる高速化が可能となります。これらの設定は、サイトの表示速度だけでなく、SEO対策にも寄与します。

SWELLの高速化設定の方法

SWELLの高速化設定は、テーマの設定画面から行うことができます。以下に、基本的な設定方法を説明します。

1. キャッシュ機能の設定：SWELLの設定画面からキャッシュ機能を有効にします。これによりcssやヘッダーなどがキャッシュされて高速化されます。
2. 不要なプラグインの削除：WordPressには多くのプラグインが存在しますが、使用していないプラグインがあると、それがサイトの表示速度を遅くする可能性があります。そのため、不要なプラグインは削除することを推奨します。
3. 画像のWEBP化：WEBPは、Googleが開発した画像フォーマットで、JPEGやPNGと比べて高い圧縮率を持ちながら、高品質な画像を提供することができます。SWELLでは、画像をWEBP化することで、ページの表示速度を向上させることができます。
4. PHPのバージョン更新：PHPの新しいバージョンは、古いバージョンと比べてパフォーマンスが向上しています。そのため、可能な限りお使いのレンタルサーバーの設定画面で最新のPHPバージョンを使用することを推奨します。

これらの設定を行うことで、SWELLを使用したサイトの表示速度を大幅に向上させることが可能です。設定は複雑に感じるかもしれませんが、一つ一つ丁寧に行うことで、ユーザー体験とSEO対策の両方を向上させることができます。

このBLOGの現在の設定（参考値としてご覧ください）

外部キャッシュを使わない場合の参考設定です。

普段はLitespeed cache環境なので全てオフです。

SWELLテーマにおける遅延読み込みの活用

ウェブサイトの運営において、ページの表示速度はユーザー体験だけでなく、SEO（検索エンジン最適化）にも大きな影響を与えます。

特に、Googleはページの表示速度を検索ランキングの重要な要素として考慮しています。

そのため、ページの表示速度を向上させることは、ウェブサイトの検索順位を上げるための重要な戦略となります。

その解決策の一つが「遅延読み込み」です。遅延読み込みとは、ページ全体を一度に読み込むのではなく、必要な部分だけを優先的に読み込み、その他の部分は後から読み込むという技術です。

特にJavaScriptの遅延読み込みは、ページの表示速度を大幅に向上させることが可能で、SEOの観点からも非常に有効です。

WordPressのテーマ「SWELL」では、このJavaScriptの遅延読み込みを簡単に設定できる機能が提供されています。

これにより、初心者でも簡単にページの表示速度を改善し、SEO対策を強化することが可能となります。

このセクションでは、SWELLテーマを使用したJavaScriptの遅延読み込みの設定方法とその効果について詳しく解説します。

これらの設定を適切に行うことで、ウェブサイトの表示速度を向上させ、SEOの観点からも有利な状態を作り出すことができます。

遅延読み込みとは？

遅延読み込みは、ページの表示速度を向上させるための一つの手法です。

具体的には、画面にすぐに表示されない要素（画像やスクリプトなど）の読み込みを、ページの他の部分が読み込まれた後に行うことで、初期のページ表示を高速化します。

SWELLテーマでは、この遅延読み込み機能が標準で搭載されており、適切に設定することでサイトの表示速度を向上させることが可能です。

遅延読み込みの設定方法

SWELLテーマでは、遅延読み込みの設定は設定画面から行うことができます。以下に、基本的な設定手順を示します。

1. SWELLの設定画面にアクセス：WordPressのダッシュボードからSWELLの設定画面に移動します。
2. 遅延読み込み機能の設定：設定画面で高速化タブの中にある「遅延読み込み」の項目を見つけ、有効にします。これにより、ページの表示速度が向上することが期待できます。

遅延読み込み現在設定値はこちら

一般的なアドセンス、サーチコンソール、site kit by Googleあたりを遅延対象に入れていますので自分の環境に合わせてください。

遅延時間は貴方の契約しているサーバーによって最適値は変化するのでちゃんと遅延できて高得点が取れる最短時間を探してください。いずれにしても自分のBLOGに合わせて調整してください。

私の契約サーバーのロリポップスタンダードプランは5秒が確実に遅延できて1番良いみたいね

じぴ子ちゃん

遅延対象キーワードは以下です！

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
clipboard.min.js,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,
pagead2.googlesyndication.com/pagead/managed/js/adsense/,
pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=,
google-site-kit/dist/assets/js/googlesitekit

遅延読み込みのメリットと注意点

遅延読み込みの最大のメリットは、サイトの表示速度を向上させることができる点です。特に、画像やスクリプトが多いページでは、この機能の効果を大いに発揮します。

しかし、一方で注意点もあります。遅延読み込みにより、一部のウィジェットの条件分岐が正常に機能しない可能性があります。これは、ウィジェットが読み込まれる前に条件分岐の処理が行われてしまうためです。そのため、設定を行う際には、これらの点を考慮する必要があります。

遅延読み込みは、表示速度の向上という大きなメリットを持つ一方で、設定には注意が必要です。サイトの内容や目的によっては、遅延読み込みを有効にすることが最適な場合もあれば、無効にすることが最適な場合もあります。そのため、自分のサイトの特性と目的をよく理解し、適切な設定を行うことが重要です。

画像の遅延読み込みは

スクリプト(lazysizes.js)を使って遅延読み込みさせる

を使用する方が良いです。

画面にもありますが　

スクリプトを使うと、img, video, iframeタグに遅延読み込みが適用できます。

SWELLテーマとその表示速度の特性

SWELLの表示速度とは？

SWELLテーマは、その表示速度の速さで知られています。

表示速度とは、ユーザーがWEBページを開いたときに、そのページが表示されるまでの時間のことを指します。

この表示速度は、ユーザー体験に大きく影響を与え、SEOの観点からも非常に重要です。SWELLテーマを使用することで、サイトの表示速度を大幅に改善することが可能となります。

SWELLの表示速度を向上させる方法

SWELLの表示速度を向上させるための方法はいくつかあります。以下に、主な方法をいくつか紹介します。

1. 不要なプラグインの削除：WordPressには多くのプラグインが存在しますが、使用していないプラグインがあると、それがサイトの表示速度を遅くする可能性があります。そのため、不要なプラグインは削除することを推奨します。
2. 画像の最適化：画像はページの表示速度に大きな影響を与えます。大きな画像は表示速度を遅くするため、画像のサイズを最適化することが重要です。また、SWELLでは、画像をWEBP形式に変換することで、画像の品質を保ちつつ、ファイルサイズを小さくすることが可能です。
3. キャッシュの活用：キャッシュは、一度読み込んだページのデータを一時的に保存することで、次回そのページを開く際の表示速度を向上させる機能です。SWELLでは、キャッシュ機能が標準で搭載されており、この機能を活用することで表示速度を向上させることが可能です。

画像の最適化は筆者はEWWWを愛用しているが

SWELLでは非推奨扱いですね笑　でも最近のEWWWのバージョンアップのおかげか検証していないのですが

非常にアップロード時のエラーは少なくなってます。

EWWWを私がなぜ使うのかは以下に記事にしております。

SWELLテーマにおけるページ遷移の高速化とその効果

ページ遷移の高速化とは？

ページ遷移の高速化は、ユーザーが一つのページから別のページへ移動する際の速度を向上させることを目指すものです。

具体的には、ユーザーがリンクをクリックしたとき、そのリンク先のページが表示されるまでの時間を短縮することを指します。

これは、ユーザー体験に大きく影響を与え、サイトの利便性を向上させる重要な要素です。SWELLテーマでは、この高速化を実現するための機能が提供されています。

ページ遷移の高速化の方法

ページ遷移の高速化を実現するための方法はいくつかあります。以下に、主な方法をいくつか紹介します。

1. ページ遷移高速化機能（Prefetch）の活用：SWELLテーマでは、ページ遷移高速化機能（Prefetch）が提供されています。Prefetchは、ウェブブラウザが未来のナビゲーションを予測し、必要なリソースを事前に取得するための技術です。これにより、ユーザーがリンクをクリックしたときのページの読み込み時間が短縮され、ウェブサイトのパフォーマンスが向上します。
2. 不要なリソースの削減：ページ遷移の速度は、ページに含まれるリソースの量にも影響されます。不要な画像やスクリプトを削減することで、ページ遷移の速度を向上させることが可能です。
3. キャッシュの活用：キャッシュは、一度読み込んだページのデータを一時的に保存することで、次回そのページを開く際の表示速度を向上させる機能です。SWELLでは、キャッシュ機能が標準で搭載されており、この機能を活用することで表示速度を向上させることが可能です。

その他 Pjaxによる遷移（非推奨）がありますが非推奨なのでやめておきましょう。

Pjaxの詳細説明（SWELLでは設定可能だが非推奨）

Pjax（PushState + Ajax）は、ウェブページの一部を効率的に更新するための技術です。これにより、全ページのリロードを避け、ウェブサイトのパフォーマンスを向上させることができます。

以上が、Pjaxの基本的な機能と動作です。ただし、Pjaxはすべてのブラウザで完全にサポートされているわけではないため、その点も考慮する必要があります。また、Pjaxを使用すると、ページの一部だけが更新されるため、ページ全体のデザインやレイアウトに影響を与える可能性があります。

Prefetchについて詳細説明

ただし、Prefetchはユーザーのデータ使用量を増加させる可能性があるため、適切に使用することが重要です。また、すべてのブラウザがPrefetchをサポートしているわけではないので、その点も考慮する必要があります。

SWELLテーマと構造化マークアップの活用

SWELLテーマは、その革新的な特徴と使いやすさにより、ウェブ開発者やブロガーから広範な支持を得ています。

その豊富な特徴の中でも、特に目を引くのが構造化マークアップ（構造化データ）の設定機能です。これは、ウェブページの情報を検索エンジンが理解しやすい形式に整理するためのマークアップ言語で、SEO対策にも有用です。

SWELLテーマでは、「SWELLブロック」を活用して、この構造化マークアップを容易に設定することができます。

この記事では、SWELLテーマの「SWELLブロック」の利用方法と、構造化マークアップの設定方法について詳細に解説します。

具体的には、商品レビューブロック、FAQブロック、author構造化データブロックの3つについて、それぞれのブロックの特性と設定方法を説明します。

これらのブロックを適切に利用することで、Googleのクローラーがサイトの構造をより容易に理解し、結果的にSEO対策に効果的となります。

さらに、これらの設定は非常に簡単なので、忙しいビジネスパーソンでもSEO対策を実施することが可能です。

SWELLの構造化マークアップとは？

SWELLテーマは、構造化マークアップ（構造化データ）の設定を手軽に行う機能を提供しています。構造化マークアップは、ウェブページの構造をGoogleなどの検索エンジンに明瞭に伝達するためのコードで、SEO戦略の一環として重要な位置を占めています。

SWELLの構造化マークアップ機能は、検索結果のリッチスニペット表示に要求される構造化データのマークアップを自動で実行することができます。

具体的には、「運営組織情報」や「よくある質問」「Q＆A」の構造化データを出力することが可能です。

SWELLテーマでは、構造化データの設定に関するいくつかの方法が提供されています。

その中で、「SWELLブロック」を利用した出力方法が特に簡単で推奨されています。この手法を使用することで、Googleのロボットがサイトの構造をより理解しやすくなり、結果としてSEO対策に寄与します。

「SWELLブロック」から出力する方法

SWELLブロックから構造化データを設定する場合、現時点で登録できるSWELLブロックは3つあります。

1. 商品レビュー ブロック
2. FAQ ブロック
3. author構造化データ ブロック

それぞれのブロックについて詳しく解説します。

商品レビュー ブロック

商品レビューブロックは、商品の評価に関する構造化データを記録する機能を持っています。

具体的な操作方法は、SWELLエディターを通じて行います。左上角の「ブロック追加ツール」を使用して商品レビューを検索すれば、該当のブロックを選択できます。

編集画面にて、「レビューボックスと構造化データの両方を出力」を選択しておけば、あとは必要な情報を入力するだけです。とても便利な機能です。

右上にあるプレビューのスイッチを作動させるとエディットしながら確認できます。

FAQ ブロック

FAQブロックは、Q＆A、すなわちFAQを作成する方々に特に便利です。

FAQの構造化データを手軽に設定することができます。

ブロック追加ツールからFAQブロックを選び、親ブロックを指定するだけでマークアップが自動で出力されます。

author構造化データ ブロック

author構造化データとは、「作者の詳細」を表す構造化データのことを指します。

「EEAT」の視点から見ると、著者情報の明記はSEOに有効であるとされています。

これらのブロックを活用することで、検索順位が安定し、ライバルとの差をつけることができます。また、忙しいサラリーマンでもSEO対策が可能となります。

author構造化データを詳しく解説

これらの項目を適切に入力することで、検索エンジンはあなたの情報を正確に理解し、それに基づいて検索結果を表示することができます。

私の例

SWELLテーマとモバイルユーザビリティの最適化

SWELLのモバイルユーザビリティとは？

SWELLテーマは、モバイルユーザビリティに優れていると評価されています。

モバイルユーザビリティとは、スマートフォンのような小さな画面からWebサイトを観覧した際の視認性や操作性が保証されているかを評価する基準のことを指します。

SWELLでのモバイルユーザビリティの向上方法

SWELLテーマでは、モバイルユーザビリティの向上に役立つ機能が多数提供されています。

以下に、主な方法をいくつか紹介します。

1. レスポンシブデザインの採用：レスポンシブデザインとは、画面の大きさに応じてレイアウトが自動的に調整されるデザインのことです。SWELLテーマは、このレスポンシブデザインを採用しているため、どのデバイスからアクセスしても適切な表示がされます。
2. 表示速度の最適化：モバイルデバイスでは、通信速度が遅い場合があります。そのため、表示速度の最適化は、モバイルユーザビリティを向上させる重要な要素です。SWELLテーマでは、キャッシュ機能や画像の最適化など、表示速度を向上させる機能が提供されています。

これらの機能を活用することで、SWELLを使用したサイトのモバイルユーザビリティを大幅に向上させることが可能です。設定は複雑に感じるかもしれませんが、一つ一つ丁寧に行うことで、ユーザー体験を向上させることができます。

あとがき

以上、WordPressのテーマ「SWELL」を使用した表示速度の最適化と構造化マークアップの設定方法について解説しました。

これらの設定は、ウェブサイトのパフォーマンス向上とSEO対策に直結する重要な要素です。

特に、表示速度の最適化はユーザー体験の向上に寄与し、構造化マークアップは検索エンジンによるウェブサイトの評価向上に繋がります。

しかし、これらの設定は一度行ったら終わり、というものではありません。

ウェブサイトの内容や構造、使用する技術が変わるたびに、設定の見直しや最適化が必要となります。

また、検索エンジンのアルゴリズムも常に更新されており、それに合わせてSEO対策も進化させていく必要があります。

この記事が、あなたのウェブサイト運営における一助となれば幸いです。

最後に、ウェブサイト運営は長期戦です。

一度の設定で結果が出なかったとしても、諦めずに試行錯誤を続けてください。

その積み重ねが、最終的には大きな成果に繋がることでしょう。

これからも、あなたのウェブサイト運営が成功することを心から願っています。

あわせて読みたい

cocoonからSWELLに移行してみよう！ 【SWELL: ブログ運営を劇的に改善するワードプレステーマ】 ブログのデザイン作成や記事作成、面倒くさいと考えていませんか？でも大丈夫！ SWELLはあなたのブログを一…