WordPress の表示を速くする方法があります。
ページが表示されるのが遅いと閲覧者が離れてしまいます。わずか1秒の差でもガマンできないのが人間の心理というもの。
では、どうすれば表示速度が速くなるのでしょうか？ それが問題ですよね。とりあえずは表示速度を突破口にして事態のもつれを解きほぐしていくしかありません。
きょうはあなたと、WordPress の表示を速くする方法を学習します。
１．PageSpeed Insights 計測でスピードを測る
PageSpeed Insightsは、あんたのウェブサイトの読み込み速度を診断してくれるんや。これでページがどれくらいの速さで表示されるかを知ることができるんや。サイトのパフォーマンスをスコアで評価してくれるんや。このスコアは0から100まであって、高ければ高いほど良いサイトってことや。
１．PageSpeed Insightsはどこを改善すればもっと速くなるか教えてくれる
例えば、画像の圧縮とか、JavaScriptやCSSの最適化とかをアドバイスしてくれるんや。サイトのモバイル版とデスクトップ版、両方のパフォーマンスをチェックできるんや。スマホで見たときとパソコンで見たときの両方の速度や使い勝手を診断してくれるで。
実際にサイトを訪れたユーザーのデータも基にして、サイトのパフォーマンスを評価してくれるんや。これによって、実際の利用状況に基づいた正確なフィードバックがもらえるんやで。具体的な改善方法も提案してくれるから、あんたのサイトをどうやって速くするかが分かるんや。そのアドバイスに従って修正すれば、ページの読み込み速度が上がって、ユーザーも喜んでくれるはずや。
これでPageSpeed Insightsが何をしてくれるか分かったやろ。これを使えば、あんたのサイトがもっと速く、もっと使いやすくなるで！
ページの読み込みに時間がかかるとイライラしますね？
昔に比べたらずいぶん速くなったものですが、それでも時々遅い場合があります。表示速度が遅いと、せっかく訪れてきたユーザーが他のサイトに流れてしまいます。なんとか引き止めたいですよね？
「速くする方法あるの？」
「あります」
まず、「「PageSpeed Insights」でパワーポイント（PowerPoint）で何ができるの？」を計測してみます。
「２８」でした。これは低い！
3段階では最低のレベルです。
どうしてこんなに低いのでしょか？
改善できる項目として５つあげられています。
▲ 使用していない JavaScript の削除 1秒35
■ 次世代フォーマットでの画像の配信 0.75秒
■ レンダリングを妨げるソースの除外 0.63秒
■ 効果的な画像フォーマット 0.45秒
■ 使用していない CSS を削除してください 0.3秒
とりあえず、テーマの高速化設定をしてみます。Cocoon で、「高速化の設定」全部チェック入れました。
☑ HTML を最小化する
☑ CSS を最小化する
☑ JavaScript を最小化する
この３つにチェックを入れたあと、あらためてスピードチェックしてみました。
これだけで、１４もあがりました。
ではいよいよ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」とつくもの）を書き出してみます。
Save Charges をクリックします。
もういちど、PageSpeed Insights で計測してみます。
５０まであがりましたが、それほどの効果がありません。Twitter や Instagram の埋め込みは第三者コード（Googleアナリティクスなどの外部サイトと連携する時に接続されるリンク先）に該当するので、PageSpeed Insights はガクッと落ちてしまいます。
効果がないので Flying Scripts by WP Speed Matters を削除しました。なるべくプラグインを増やさないことがトラブルをさける手段だからです。
３．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ではありません！）
以下の部分を削除します。
これで Adsense 広告が見れなくなります。
「73」までアップしました。あと一息です。
あとは、Twitter や Instagram の Javascript 部分と置き換えます。記事のひとつ1つを手作業で Javascript を削除するのは大変。WordPress では記事にフィルターがかけられるので、それを使う方がいいです。
４．次世代フォーマットでの画像の配信
次世代フォーマットの画像、例えばWebPとかAVIFとかを使うと、画像が軽くなるんや。その分、サイトの読み込み速度が速くなるねん。速いサイトはユーザーにとってもストレスが少ないし、満足度も上がるで。次世代フォーマットは圧縮効率が高いから、データ量が少なくなるんや。これによって、ユーザーのデータ通信量も節約できるし、サーバーの負担も軽減できるんや。
サイトの読み込み速度が速くなると、検索エンジンの評価も上がるんや。Googleは速いサイトを優先して表示する傾向があるから、次世代フォーマットの画像を使うことで、SEO効果も期待できるんやで。次世代フォーマットは高画質を保ちながらも、ファイルサイズを小さくできるんや。これで、綺麗な画像を見せつつ、サイトのパフォーマンスも向上するんや。
５．どうやって次世代フォーマットに変えるん？
オンラインの画像変換ツールや、Photoshop、GIMPなどの画像編集ソフトで簡単に次世代フォーマットに変換できるで。Cloudflareとか、画像を自動で次世代フォーマットに変換して配信してくれるCDNサービスもあるんや。これを使えば、手間をかけずに次世代フォーマットを利用できるんや。
WordPress使ってるなら、次世代フォーマットに対応したプラグインがあるから、それをインストールするだけで簡単に変換してくれるで。
次世代フォーマットの画像配信は、サイトの読み込み速度を速くして、データ量を節約して、SEO効果も期待できるから、やった方がええで！ほんで、ユーザーもあんたのサイトに満足してくれるようになるわ。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。WebP で配信するとおよそ半分でできます。プラグイン EWWW Image Optimizer を導入しました。インストール及び有効化して設定します。無料の設定です。
「Wep 変換」をチェック入れましょう。
６．使用していない CSS を削除してください
使ってへんCSSを削除するには、いくつかの方法がある。簡単に言うと、使ってへんスタイルを見つけて削除するっちゅうことや。
Chrome とか Firefox には開発者ツールがある。それ使えば、どのスタイルが使われてへんかチェックできる。例えば、Chrome やったら「Coverage」タブ使う。そこにどのCSSが使われてるか、どのくらいの割合で使われてるかが表示される。
PurifyCSS とか UnCSS みたいなツール
これらは自動的に使われてへんCSSを見つけて削除してくれる。これ使うと手間が省ける。
これはちょっと時間かかるけど、全てのページを見て、使われてへんCSSを手動で削除する方法やな。特に小規模なサイトやったら、これでもええかもしれん。
WebpackとかGulp使うと、自動的に使われてへんCSSを削除するプラグインがあるんや。例えば、Webpackならpurgecss-webpack-pluginとかがあるで。これらを設定しておくと、自動的に不要なCSSを削除してくれるわ。
どの方法も一長一短あるけど、自分に合った方法を見つけるのが大事やで。気をつけなあかんのは、削除するときにほんまに使われてへんCSSだけを削除することやな。間違って使ってるCSSを削除してもうたら、サイトが崩れるかもしれんからな。気ぃつけてや！
使われてへんCSSを手動で削除する方法
使われてへんCSSを手動で削除する方法な、ちょっと手間かかるけど、ちゃんとやればすっきりするで。やり方はこんな感じや。
１．まずブラウザの開発者ツールを開く
Chromeやったら、ページの上で右クリックして「検証」を選ぶんや。開発者ツールが開くから、「Elements」タブでHTML構造を確認できるで。
２．ページ内の要素を確認して、どのスタイルが適用されてるか見る
適用されてるスタイルは「Styles」パネルで見れるわ。
３．HTML内の要素に使われてるスタイルと、スタイルシート（CSSファイル）を照らし合わせる
スタイルシートにはいっぱいスタイルが書かれてるけど、ページ内の要素に適用されてへんスタイルが見つかるはずや。
開発者ツールで要素を全部チェックするのは大変やけど、ページ全体を見ながら、使われてへんスタイルをメモしとくとええで。メモした使われてへんスタイルを、スタイルシートから手動で削除するんや。直接CSSファイルを編集するか、テキストエディタ使って削除するんやけど、削除する前に必ずバックアップ取っとくんやで。間違ったときに戻せるようにな。
４．もしサイトに複数ページがある場合、各ページごとに同じ作業をせなあかん
ページごとに使われてるスタイルが違うかもしれんからな。CSSを削除したら、必ずサイト全体をテストすることや。表示が崩れてへんか、機能がちゃんと動くか確認せなあかん。
手動でやるのは時間かかるけど、一個一個確認しながらやれば確実や。
Webォント Noto+Sans+JP 、その CSS の読み込みでスコアに影響受けました。他のフォント変更する方法もありますけど、フォントが綺麗なので。必要な Styles だけを読み込むように修正。
はい、GoogleのPageSpeed Insightsは、ウェブページのパフォーマンスを評価し、改善のための指示を提供する非常に有用なツールです。PageSpeed Insightsは、ページの読み込み速度やユーザーエクスペリエンスに関連するさまざまな要素を分析し、最適化のためのヒントや推奨事項を提供します。
７．PageSpeed Insightsの利点
ページの読み込み速度を評価し、スコアを付けて表示します。これにより、ウェブページのパフォーマンスの改善が必要かどうかを判断することができます。また、パフォーマンスを向上させるための具体的なアドバイスを提供します。例えば、画像の最適化、キャッシュの有効化、ブラウザキャッシュの活用、JavaScriptやCSSの最適化など、さまざまな改善点を指摘します。
モバイルデバイスでのユーザーエクスペリエンスも重要
PageSpeed Insightsは、モバイルフレンドリー性に関する評価も提供し、モバイル利用者の体験向上のための指示を与えます。これらのアドバイスに従うことで、ウェブページの読み込み速度やユーザーエクスペリエンスを改善することができます。
ただし、すべての指示を完全に実装することは難しい場合もあります。ウェブサイトの要件や複雑さに応じて、適切な最適化策を選択することが重要です。ウェブページの表示速度を向上させるためには、いくつかの方法があります。以下は、効果的な手法のいくつかです：
画像はページの読み込み速度に大きな影響
画像を適切に最適化し、必要な解像度にリサイズしてファイルサイズを減らすことで、ページの読み込み速度を向上させることができます。コードを最小化し、不要なスペースや改行を取り除くことで、ファイルサイズを削減し、ページの読み込み速度を向上させることができます。また、ページの先読みや非同期読み込みを活用することで、必要なリソースだけを読み込むようにすることも重要です。
ブラウザキャッシュを有効にする
ユーザーがページを再訪問した際に再度すべてのリソースをダウンロードする必要がなくなり、ページの読み込み速度が向上します。CDNを使用することで、コンテンツがユーザーに近い場所から提供され、レイテンシが低減し、ページの読み込み速度が向上します。
画像やスクリプトなどのリソースをページが読み込まれる際にすべて一度に読み込むのではなく、必要な時点で読み込むようにすることで、初期表示速度を向上させることができます。サーバーの応答時間を短縮するために、適切なホスティングプランを選択し、サーバーの設定を最適化します。
モバイルデバイス向けにページを高速に表示するためのAMPを導入することで、モバイルユーザー向けの体験を向上させることができます。
これらの手法を組み合わせることで、ウェブページの表示速度を向上させることができます。性能のモニタリングと最適化は継続的なプロセスであり、ユーザーエクスペリエンス向上のために重要です。
２．プラグイン「Flying Scripts by WP Speed Matters」を導入したら！
驚くような結果がでました。
しかし、他のサイトでは際立った変化は見られません。なぜなのでしょう？
１．WordPress の表示速度を向上させるためには
キャッシュは、ウェブページの表示速度を向上させるために使用される重要なツールです。WordPressプラグインを使用してキャッシュを有効にし、ページの再読み込み回数を減らすことができます。代表的なキャッシュプラグインとしては、「WP Super Cache 」があります。私も取り入れています。無料です。
大きな画像ファイルはページの読み込み時間を遅くする原因
画像のサイズを適切に最適化し、必要最小限の解像度に調整することで、ページの読み込み速度を改善することができます。また、画像圧縮プラグインやCDN（コンテンツデリバリーネットワーク）を使用することも効果的です。
不要なプラグインやテーマを削除、サイトの軽量化
使用していないプラグインやテーマは、WordPressのパフォーマンスに悪影響を及ぼす可能性があります。
CDNは、コンテンツを世界中のサーバーに配置し、ユーザーに最も近い場所からコンテンツを提供する仕組みです。CDNを使うとサイトの読み込み速度が向上します。代表的なCDNサービスには、「Cloudflare」や「Amazon CloudFront」があります。
高速で信頼性の高いホスティングサーバーを選ぶ
WordPressに特化したホスティングサービスを利用するか、最適なパフォーマンスを提供するホスティングプランを選ぶようにしましょう。
これらの方法を組み合わせることで、WordPressサイトの表示速度を向上させることができます。ただし、変更を行う前にバックアップを取ることをおすすめします。また、特に技術的な変更には慎重に取り組むか、専門家の助けを借りることをお勧めします。
※CDN（Content Delivery Network）は、ウェブコンテンツを高速かつ効率的に配信するためのグローバルなネットワークインフラストラクチャです。CDNは、世界中に分散配置されたサーバーのネットワークを利用し、コンテンツのキャッシュや最適な配信経路の選択を行います。
一般的なウェブサイトでは、ユーザーがサイトにアクセスする際に、サーバーからコンテンツ（画像、動画、スクリプト、スタイルシートなど）をダウンロードします。しかし、サーバーが地理的に遠くにある場合や、同時に多くのリクエストがある場合、コンテンツの配信に時間がかかることがあります。
２．ここでCDNが登場します
CDNは、コンテンツをキャッシュとして保存し、世界中に配置されたエッジサーバー（またはポップ：Point of Presence）にコンテンツを配信します。ユーザーがコンテンツにアクセスする際には、最も近いエッジサーバーからコンテンツを提供することで、高速で応答性のある配信が可能となります。
ユーザーに近い場所に配置されたエッジサーバーからコンテンツを提供することで、アクセス速度が向上します。遅延やボトルネックを軽減し、快適なユーザーエクスペリエンスを提供します。CDNは、トラフィックやリクエストを分散させるため、オリジンサーバーへの負荷を軽減します。大量のリクエストに対しても高い可用性を保つことができます。
CDNは冗長性の高いネットワークを持ち、障害が発生しても他のエッジサーバーがコンテンツを提供できるため、サイトの可用性を向上させます。DDoS攻撃やコンテンツのホットリンク防止などのセキュリティ機能を提供することがあります。
２．ウェブページの表示速度を向上させる他の方法
不要なCSSやJavaScriptのコードを削除することで、ファイルサイズを減らし、ページの読み込み速度を向上させることができます。また、CSSやJavaScriptの外部ファイルの結合や圧縮も効果的な手法です。
レスポンシブデザインを使用すると、異なるデバイスや画面サイズに対応することができます。これにより、必要のないコンテンツやリソースの読み込みを避け、ユーザーに最適化されたページを提供することができます。
サーバーの設定や構成を最適化することで、ウェブページのパフォーマンスを向上させることができます。キャッシュの設定、コンテンツの圧縮、データベースの最適化などが含まれます。
これらは一般的な手法ですが、ウェブページの表示速度を向上させるためには、具体的な状況や要件に合わせて最適な手法を選択する必要があります。ページのパフォーマンスを測定し、ボトルネックとなっている要素を特定することも重要です。
あとがき
ページの表示がたとえ1秒遅れると、つい別のページへクリックしてしまうのが現代人の特徴ではあります。
- なるべく画像を小さくする、精密さを少し抑える
- 使用していない JavaScript を削除する
- JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用
この3点が特にポイントです。
これらを改善してなるべく表示のスピードアップを図りたいですね。
コメント