Jetpackは、WordPressの開発元であるAutomattic社が提供している信頼性の高いプラグインです。
SNSへの同時投稿、セキュリティ対策、サイトのパフォーマンス向上など、様々な機能を備えています。
中でも、遅延ロードの機能は、サイトのローディング時間短縮に大きく貢献できるのでお勧めです。
目次
なぜサイトのローディング時間を短縮すべきなのか？
2018年7月に実施されたGoogleのスピードアップデートにより、検索エンジン最大手のGoogleがウェブサイトを評価する基準として、サイトのローディング時間（表示にかかる時間）が一層重要になりました。
このことは、Googleがウェブマスター向けの公式情報としてブログに掲載しています。
サイトのローディングが遅くなる最大の原因は？
ウェブサイトのローディング時間が長くなる原因はたくさんありますが、主にブログとしてWordPressを利用されている場合、記事の中に掲載する画像や動画がローディングを遅くする最大の原因であるといっても過言ではありません。
画像はテキストに比べて非常にデータサイズが大きいので、ブログのアイキャッチ画像のように、記事の中に大きく掲載する画像は特にローディングに時間がかかります。
動画は画像よりもさらにデータサイズが大きいので、普通に記事に埋め込むと、データの読み込みが終わるまでの待ち時間が長くなります。
遅延ロードとは？
遅延ロードとは、ウェブページのコンテンツを最初から読み込まずに、コンテンツが見える位置までブラウザの画面をスクロールしたときはじめて読み込ませる手法です。
たとえば、PCやスマホでページを表示させたとき、スクロールしなくても最初から見える範囲にあるコンテンツは普通に読み込ませて、それよりも下にあるコンテンツ（特に画像や動画）は、スクロールさせるまで読み込まないようにします。
すると、セールスレターやランディングページのように、縦に何十画面分以上もある長いサイトでも、ローディングにかかる時間は、実質１画面分しかないサイトと同じ程度で済みます。
これにより、GoogleのPage Speed Insights や、GTmetrix などといったサービスを使ってページの表示速度を計測したとき、評価値（スコア）が改善します。
Jetpackで遅延ロードを有効化する方法
Jetpackの「設定 > パフォーマンス」に画像の遅延読み込みを有効にするかどうかを切り替えるスイッチがあります。スイッチを右にスライドすれば有効になります。
Jetpackのインストール方法は、こちらの記事がわかりやすいので、参考になさってください。
サイトのローディング時間を短縮するとこんなに変わる
こちらの画像をご覧ください。
とあるWordPresのサイトの表示速度を、GoogleのPage Speed Insights で計測した例です。上が改善前、下が改善後です。
もともと高速化に特化したテーマを下地にして構築したサイトだったので、パソコン版のスコアは悪くなかったのですが、遅延ロードを中心とした様々な改善を実施した結果、ほぼ満点に近いスコアまで跳ね上がりました。
モバイル版のスコアは赤点でしたが、こちらも90点台まで大幅に改善されました。
パソコン離れが進む中、モバイル版のスコアをよい状態に保っておくことはとても大切なことです。
遅延ロードを有効にしてもローディングが早くならない場合がある
最も改善効果の出やすい方法として遅延ロードを紹介しましたが、遅延ロードを有効にしてもローディングが早くならず、GoogleのPage Speed Insights 等のスコアもほとんど変わらない場合があります。
パターンとして多いのは、PRエリアやスライドショーなどが標準装備されたデザインテーマを使ったサイトのトップページです。
それは、トップページのテンプレートの実装（プログラムの作り方）が、一般的なブログ用のテーマとは異なるからです。
このような場合は、WordPressのプログラミングに詳しい専門家や制作業者に相談してアドバイスを受けることをお勧めします。多くの場合、遅延ロードが適用できるようにテンプレートのプログラムを変更する必要があるからです。
今、Webデザイナーに求められているスキル
PhotoShopを駆使してリッチな画像を贅沢に使った長いページを制作してきたWebデザイナーさん、お客様からこんな要望を言われたことはありませんか？
- スマホでの表示がとても遅いのでなんとかして欲しい。
- SEOのコンサルタントから表示速度を改善するように言われている。
- サイトを軽くしてユーザーの離脱を防いで欲しい。
遅延ロードを適用するだけで必ずしも全てのサイトが軽くなるとは限りませんが、近年はSEO対策の一環としてサイトの表示速度も重視するお客様が増えています。
ただ、残念ながらJetpackはWordPress用のプラグインなので、純粋なHTMLで作成したLPでは使えません。
代わりに、遅延ロードの機能を備えたJavascript（jQuery）製のライブラリを自分で探して、配布サイトなどに載っている使い方（英語の場合もあります）を読んで理解して、HTMLに正しく組み込む必要があります。
そのためには、divタグやimgタグといった断片的な知識だけでは足りません。
少なからず、Javascript（jQuery）がどういうもので、HTMLとどのようなつながりがあり、ブラウザはどのように解釈してどのような順番で実行するのか、といった、プログラミングに関する基礎的な知識を持っておくことが求められます。
CODEMYでは、見た目を満足させるデザインができるだけでなく、表示速度や修正のしやすさ（保守性）にも配慮した、目に見えない品質を提供できる信頼されるWebデザイナーへステップアップしたい方のために、Javascript（jQuery）の基礎が身に付くコースをご用意しています。
はじめての方は、スカイプやZOOMなどの通話アプリを使った30分の無料相談をご利用いただけます。