PageSpeed 計測で WordPress の表示を速くする方法

スピード感 SEO
スピード感

WordPress の表示を速くする方法があります。

ページが表示されるのが遅いと閲覧者が離れてしまいます。わずか1秒の差でもガマンできないのが人間の心理というもの。

では、どうすれば表示速度が速くなるのでしょうか? それが問題ですよね。とりあえずは表示速度を突破口にして事態のもつれを解きほぐしていくしかありません。

きょうはあなたと、WordPress の表示を速くする方法を学習します。

1.PageSpeed Insights 計測でスピードを測る

スピードランナー
スピードランナー

ページの読み込みに時間がかかるとイライラしますね?昔に比べたらずいぶん速くなったものですが、それでも時々遅い場合があります。表示速度が遅いと、せっかく訪れてきたユーザーが他のサイトに流れてしまいます。なんとか引き止めたいですよね?

「速くする方法あるの?」

「あります」

まず、「「PageSpeed Insights」でパワーポイント(PowerPoint)で何ができるの?」を計測してみます。

「28」でした。これは低い!

PageSpeed Insights
PageSpeed Insights

3段階では最低のレベルです。

どうしてこんなに低いのでしょか?

改善できる項目として5つあげられています。

改善できる項目
改善できる項目

▲ 使用していない JavaScript の削除 1秒35

■ 次世代フォーマットでの画像の配信  0.75秒

■ レンダリングを妨げるソースの除外   0.63秒

■ 効果的な画像フォーマット       0.45秒

■ 使用していない CSS を削除してください 0.3秒

とりあえず、テーマの高速化設定をしてみます。Cocoon で、「高速化の設定」全部チェック入れました。

最小化
最小化

☑ HTML を最小化する

☑ CSS を最小化する

☑ JavaScript を最小化する

この3つにチェックを入れたあと、あらためてスピードチェックしてみました。

データ
データ

これだけで、14もあがりました。

ではいよいよ1番目の課題にチャレンジしてみます。

1.使用していない JavaScript の削除

「使用していない JavaScript の削除」、これがいちばん時間を浪費しているので、なんとかしないといけません。つまり JavaScript を読み飛ばすモノが必要だということです。

Flying Scripts by WP Speed Matters というプラグインがありました。★5つの優れものです。

async (非同期化)や defer (遅延)とは違って、ユーザが何かするまで JavaScript が実行されません。

説明書きには、「defer は見つかったときにスクリプトをダウンロードし、HTML 解析が完了したときにスクリプトを実行するようにブラウザに指示します」。「Flying Scripts にスクリプトを含めると、ユーザーの操作が行われるまで、それらのスクリプトは実行されません」とあります。

「使用していない JavaScript の削除」をクリックします。

改善できる項目
改善できる項目

すると、6項目でてきました。「減らせるデータ量」を見るとかなりありますね。Settings から設定します。「Include Keywords」に 「使用していない JavaScript の削除」をクリックし、JavaScript (「js」とつくもの)を書き出してみます。

setting
setting

Save Charges をクリックします。

もういちど、PageSpeed Insights で計測してみます。

計測
計測

50まであがりましたが、それほどの効果がありません。Twitter や Instagram の埋め込みは第三者コード(Googleアナリティクスなどの外部サイトと連携する時に接続されるリンク先)に該当するので、PageSpeed Insights はガクッと落ちてしまいます。

効果がないので Flying Scripts by WP Speed Matters を削除しました。なるべくプラグインを増やさないことがトラブルをさける手段だからです。

2.WordPress で記事にフィルター

削除せよとあるのですが、2つの方法があります。

  • JavaScript を削除する
  • JavaScript の読み込み属性を defer にする

削除するのは簡単ですが、「動きのあるページ」もとりいれたいので、とりあえず JS を「遅読み」する後者のようにします。ページをロードするときじゃなくて、ユーザーが動作するとき読み込みできるようにするのです。

そこで以下の部分をウィジェットから削除します。

ショートコード
ショートコード
<script async src=”https://platform.twitter
.com/widgets.js” charset=”utf-8″></script>

続いて以下の部分も削除します。
右の「head- insert-php」から (amp-head-insert-phpではありません!)

head- insert-php
head- insert-php

以下の部分を削除します。

「73」までアップしました。
「73」までアップしました。

これで Adsense 広告が見れなくなります。

「73」までアップしました。あと一息です。

あとは、Twitter や Instagram の Javascript 部分と置き換えます。記事のひとつ1つを手作業で Javascript を削除するのは大変。WordPress では記事にフィルターがかけられるので、それを使う方がいいです。

3.次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。WebP で配信するとおよそ半分でできます。プラグイン EWWW Image Optimizer を導入しました。インストール及び有効化して設定します。無料の設定です。

「Wep 変換」をチェック入れましょう。

「Wep 変換」をチェック
「Wep 変換」をチェック

4.使用していない CSS を削除してください

Webォント Noto+Sans+JP 、その CSS の読み込みでスコアに影響受けました。他のフォント変更する方法もありますけど、フォントが綺麗なので。必要な Styles だけを読み込むように修正。

はい、GoogleのPageSpeed Insightsは、ウェブページのパフォーマンスを評価し、改善のための指示を提供する非常に有用なツールです。PageSpeed Insightsは、ページの読み込み速度やユーザーエクスペリエンスに関連するさまざまな要素を分析し、最適化のためのヒントや推奨事項を提供します。

5.PageSpeed Insightsの利点

  1. パフォーマンスの評価: PageSpeed Insightsは、ページの読み込み速度を評価し、スコアを付けて表示します。これにより、ウェブページのパフォーマンスの改善が必要かどうかを判断することができます。
  2. 最適化のヒント: PageSpeed Insightsは、パフォーマンスを向上させるための具体的なアドバイスを提供します。例えば、画像の最適化、キャッシュの有効化、ブラウザキャッシュの活用、JavaScriptやCSSの最適化など、さまざまな改善点を指摘します。
  3. モバイルフレンドリーの評価: モバイルデバイスでのユーザーエクスペリエンスも重要です。PageSpeed Insightsは、モバイルフレンドリー性に関する評価も提供し、モバイル利用者の体験向上のための指示を与えます。

PageSpeed Insightsのアドバイスに従うことで、ウェブページの読み込み速度やユーザーエクスペリエンスを改善することができます。ただし、すべての指示を完全に実装することは難しい場合もあります。ウェブサイトの要件や複雑さに応じて、適切な最適化策を選択することが重要です。

ウェブページの表示速度を向上させるためには、いくつかの方法があります。以下は、効果的な手法のいくつかです:

  1. 画像の最適化: 画像はページの読み込み速度に大きな影響を与えます。画像を適切に最適化し、必要な解像度にリサイズしてファイルサイズを減らすことで、ページの読み込み速度を向上させることができます。
  2. CSS、JavaScript、HTMLの最適化: コードを最小化し、不要なスペースや改行を取り除くことで、ファイルサイズを削減し、ページの読み込み速度を向上させることができます。また、ページの先読みや非同期読み込みを活用することで、必要なリソースだけを読み込むようにすることも重要です。
  3. ブラウザキャッシュの活用: ブラウザキャッシュを有効にすることで、ユーザーがページを再訪問した際に再度すべてのリソースをダウンロードする必要がなくなり、ページの読み込み速度が向上します。
  4. コンテンツデリバリーネットワーク (CDN) の利用: CDNを使用することで、コンテンツがユーザーに近い場所から提供され、レイテンシが低減し、ページの読み込み速度が向上します。
  5. 遅延読み込み (Lazy Loading) の導入: 画像やスクリプトなどのリソースをページが読み込まれる際にすべて一度に読み込むのではなく、必要な時点で読み込むようにすることで、初期表示速度を向上させることができます。
  6. サーバーの最適化: サーバーの応答時間を短縮するために、適切なホスティングプランを選択し、サーバーの設定を最適化します。
  7. AMP (Accelerated Mobile Pages) の活用: モバイルデバイス向けにページを高速に表示するためのAMPを導入することで、モバイルユーザー向けの体験を向上させることができます。

これらの手法を組み合わせることで、ウェブページの表示速度を向上させることができます。性能のモニタリングと最適化は継続的なプロセスであり、ユーザーエクスペリエンス向上のために重要です。

2.プラグイン「Flying Scripts by WP Speed Matters」を導入したら!

Flying Scripts by WP Speed Matters
Flying Scripts by WP Speed Matters

驚くような結果がでました。

しかし、他のサイトでは際立った変化は見られません。なぜなのでしょう?

1.WordPressの表示速度を向上させるためには

  1. キャッシュを有効化する: キャッシュは、ウェブページの表示速度を向上させるために使用される重要なツールです。WordPressプラグインを使用してキャッシュを有効にし、ページの再読み込み回数を減らすことができます。代表的なキャッシュプラグインとしては、「WP Super Cache 」があります。私も取り入れています。無料です。
  2. 画像の最適化: 大きな画像ファイルはページの読み込み時間を遅くする原因になります。画像のサイズを適切に最適化し、必要最小限の解像度に調整することで、ページの読み込み速度を改善することができます。また、画像圧縮プラグインやCDN(コンテンツデリバリーネットワーク)を使用することも効果的です。
  3. 不要なプラグインやテーマを削除する: 使用していないプラグインやテーマは、WordPressのパフォーマンスに悪影響を及ぼす可能性があります。不要なプラグインやテーマを削除し、サイトの軽量化を図りましょう。
  4. CDNを使用する: CDNは、コンテンツを世界中のサーバーに配置し、ユーザーに最も近い場所からコンテンツを提供する仕組みです。CDNを使うとサイトの読み込み速度が向上します。代表的なCDNサービスには、「Cloudflare」や「Amazon CloudFront」があります。
  5. ホスティングサーバーを最適化する: 高速で信頼性の高いホスティングサーバーを選ぶことも重要です。WordPressに特化したホスティングサービスを利用するか、最適なパフォーマンスを提供するホスティングプランを選ぶようにしましょう。

これらの方法を組み合わせることで、WordPressサイトの表示速度を向上させることができます。ただし、変更を行う前にバックアップを取ることをおすすめします。また、特に技術的な変更には慎重に取り組むか、専門家の助けを借りることをお勧めします。

※CDN(Content Delivery Network)は、ウェブコンテンツを高速かつ効率的に配信するためのグローバルなネットワークインフラストラクチャです。CDNは、世界中に分散配置されたサーバーのネットワークを利用し、コンテンツのキャッシュや最適な配信経路の選択を行います。

一般的なウェブサイトでは、ユーザーがサイトにアクセスする際に、サーバーからコンテンツ(画像、動画、スクリプト、スタイルシートなど)をダウンロードします。しかし、サーバーが地理的に遠くにある場合や、同時に多くのリクエストがある場合、コンテンツの配信に時間がかかることがあります。

2.ここでCDNが登場します

CDNは、コンテンツをキャッシュとして保存し、世界中に配置されたエッジサーバー(またはポップ:Point of Presence)にコンテンツを配信します。ユーザーがコンテンツにアクセスする際には、最も近いエッジサーバーからコンテンツを提供することで、高速で応答性のある配信が可能となります。

  1. パフォーマンスの向上: ユーザーに近い場所に配置されたエッジサーバーからコンテンツを提供することで、アクセス速度が向上します。遅延やボトルネックを軽減し、快適なユーザーエクスペリエンスを提供します。
  2. 負荷分散: CDNは、トラフィックやリクエストを分散させるため、オリジンサーバーへの負荷を軽減します。大量のリクエストに対しても高い可用性を保つことができます。
  3. 高い信頼性と可用性: CDNは冗長性の高いネットワークを持ち、障害が発生しても他のエッジサーバーがコンテンツを提供できるため、サイトの可用性を向上させます。
  4. セキュリティ強化: CDNは、DDoS攻撃やコンテンツのホットリンク防止などのセキュリティ機能を提供することがあります。

CDNの主な利点は

2.ウェブページの表示速度を向上させる他の方法

  1. CSSとJavaScriptの最適化: 不要なCSSやJavaScriptのコードを削除することで、ファイルサイズを減らし、ページの読み込み速度を向上させることができます。また、CSSやJavaScriptの外部ファイルの結合や圧縮も効果的な手法です。
  2. レスポンシブデザインの採用: レスポンシブデザインを使用すると、異なるデバイスや画面サイズに対応することができます。これにより、必要のないコンテンツやリソースの読み込みを避け、ユーザーに最適化されたページを提供することができます。
  3. サーバーの最適化: サーバーの設定や構成を最適化することで、ウェブページのパフォーマンスを向上させることができます。キャッシュの設定、コンテンツの圧縮、データベースの最適化などが含まれます。

これらは一般的な手法ですが、ウェブページの表示速度を向上させるためには、具体的な状況や要件に合わせて最適な手法を選択する必要があります。ページのパフォーマンスを測定し、ボトルネックとなっている要素を特定することも重要です。

あとがき

ページの表示がたとえ1秒遅れると、つい別のページへクリックしてしまうのが現代人の特徴ではあります。

  • なるべく画像を小さくする、精密さを少し抑える
  • 使用していない JavaScript を削除する
  • JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用

この3点が特にポイントです。

これらを改善してなるべく表示のスピードアップを図りたいですね。

コメント

何なりとお申し付けください。