WordPressテーマのパフォーマンスを改善する方法

WordPressテーマのパフォーマンスを改善するための実用的なガイド

コアポイント

• WordPressテーマのパフォーマンスは、HTTPリクエストの数、リソースサイズのダウンロード、およびページの効率の影響を受けます。これらの要因を減らすと、パフォーマンスが大幅に向上する可能性があります。
• WordPressのパフォーマンスを迅速に改善する方法には、ホストのコンサルティング、GZIP圧縮の有効化、WordPressとブラウザのキャッシュの有効化、未使用のプラグインの無効化、不要なリソースの削除、ソーシャルメディアボタンの交換などがあります。
• 写真は、ウェブサイトが肥大化した主な理由です。不要な画像を削除または交換し、正しい形式を使用して、大きなビットマップ画像サイズを調整し、画像圧縮を最大化し、怠zyな負荷を達成することで、ページの重量を大幅に削減し、パフォーマンスを改善できます。
より徹底的なソリューションには、ビルドプロセスの採用、プログレッシブWebアプリケーションテクノロジー、サードパーティのコードの避け、WordPressテーマの慎重な評価、Webサイトの簡素化、最初からのパフォーマンスの検討などがあります。

この記事は、Sitegroundとのコラボレーションで作成された一連の記事の一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

2017年5月、平均ページの重量は2884kbに達しました。 Google Doubleclickの調査レポートによると、モバイルデバイスの平均積載時間は19秒です。ただし、パフォーマンスはこれまで以上に重要です：

• ユーザーのフラストレーション：ユーザーは待ちません。 Aberdeen Groupの調査は、2秒の遅延が次のようにつながる可能性があることを示しています。 ページビューは11％
  減少しました
  • ユーザーの満足度は16％
  に減少します
  • 変換率は7％
  に減少しました
モバイルターミナル：
• モバイルアクセスは、すべてのネットワークトラフィックの55％を占めています。デバイスと帯域幅の両方の機能が増加していますが、速度はページ重量の成長率に追いついていません。ユーザーは通常、バイトで支払います。
検索エンジンのランキング：
• Googleは、負荷が遅い、ヘビー級のウェブサイトを罰します。
ホストコスト：
• Sitegroundなどの企業と協力してホストするのは合理的ですが、ヘビー級のウェブサイトは、合理化された代替品よりも多くのリソースとコストをかけます。
メンテナンス：
• ウェブサイトが必要とするリソースが多いほど、メンテナンスコストが高くなります。最終的に、遅いWebサイトはあなたとあなたのユーザーのお金の費用がかかります。 次回、上司が不必要な機能を追加するように頼むときは、この単純な真実を思い出させてください！
理想的には、コードの最初の行を書く前にパフォーマンスを検討する必要があります。ただし、トピックにパフォーマンスの問題があるため、この記事を読んでいる可能性があります。幸いなことに、この問題に対する費用対効果の高いソリューションがいくつかありません。ミリ秒ごとに節約するごとに、ユーザーの満足度、エンゲージメント、収益を増やしながら、コストが削減されます。

パフォーマンスに影響を与える

要因

パフォーマンスは、次の要因の影響を受けます

1. httpリクエストの数
2. リソースサイズをダウンロード
3. ページの効率

HTTP要求の数は、ページを機能させるために必要なファイルとAjax呼び出しの数に依存します：HTML、CSS、JavaScript、画像、フォント、データ、およびその他のすべてのリソース。 HTTP/2はこの問題を解決しますが、サポートを有効にするためにサーバーとユーザーのブラウザの両方を構成する必要があります。 HTTP/2であっても、20のファイルリクエストは10ほど効果的ではありません。主な要因は、各ファイルのサイズです。

これを説明するために、2884kbはIDソフトウェアのDoomの元のバージョンよりも20％大きいです。確かに、私たちは25年前の最新のWebページをゲームと比較していますが、ほとんどのページはいくつかの段落のみを示していますが、Doomは3Dエンジン、複数のレベル、グラフィック、音楽、音響効果を実装しています。比較的軽量のページでさえ非効率的です。たとえば、3ページのWebサイトが500kbのJavaScriptフレームワークに依存している場合、最初の文字を見る前にコードをダウンロード、解析、実行する必要があります。合計リソースサイズが500kbを超えたとしても、サーバーレンダリングされたHTMLファイルは完全にロードされる前に表示され始めます。最後に、サーバーの速度、圧縮、およびキャッシュも他の重要な考慮事項です。

測定パフォーマンス

ボトルネックを特定し、更新がページが改善されたことを確認するには、パフォーマンスの測定が重要です。次のツールは、リクエストと応答時間の内訳を提供し、提案を更新します。

pingdom

• Google PagesSpeed Insights
• gtmetrix
• webpageTest
ブラウザの開発者ツールネットワークタブは、レイアウトと、ページがユーザーイベントに対応する準備が整うまでにかかる時間に関する情報も提供します。

速い勝利

次の更新には数分以上かかるべきではありません。

Webホストに連絡してください

優れたWebホストは、使用法を分析し、サービス、ハードウェア、ソフトウェアのアップグレードに関するアドバイスを提供します。これにより、最小限の労力で費用対効果の高いパフォーマンスの改善が可能になります。パートナーのSitegroundには、この問題の解決を喜んで喜んでいる積極的で知識豊富なWordPressの専門家のチームがあります。 SitegroundはさまざまなWordPressプランを提供しており、SitePointユーザーは最大65％オフを楽しむことができます。

gzip圧縮を有効にします

Webサイトのほぼ30％がGZIP圧縮を有効にしていません。これは通常、Webサーバー設定またはWP HTTP圧縮やW3合計キャッシュなどのWordPressプラグインで有効にできます。

WordPressキャッシュを有効にします

ページをレンダリングし、最初のリクエストのキャッシュに保存するWordPressプラグインがいくつかあります。後続のリクエストは、テンプレート内のデータベースコンテンツを再生する代わりに、キャッシュからこれらのページを取得します。キャッシュプラグインには、W3合計キャッシュ、WPスーパーキャッシュ、ハイパーキャッシュ、WP最速キャッシュ、キャッシュイネーブラーが含まれます。ホスティングプロバイダーは、キャッシュを有効にすることができる場合があります。パートナーのSitegroundには、ウェブサイトを大幅に高速化できるカスタムキャッシュツールがあります。

ブラウザキャッシュを有効にします

ユーザーがブラウザを介してリソースをキャッシュする場合、ユーザーはリソースを再度ダウンロードする必要はありません。シンプルなソリューションには、適切な有効期限がヘッダーの設定、ラスト修飾日、またはHTTPヘッダーのETAGSの設定が含まれます。次の.htaccessの例では、ブラウザが1か月間画像をキャッシュする必要があります。

未使用のプラグインを無効にします

<code><ifmodule mod_expires.c="">
ExpiresActive On

<filesmatch>
ExpiresDefault "access plus 1 month"
</filesmatch></ifmodule></code>

ほとんどのプラグインは、たとえそれを使用していなくても、追加のCSSやJavaScriptなど、ウェブサイトにコードを追加します。 WordPress管理者は、WordPressコントロールパネルからプラグインを無効にするか、プラグインが使用されないと確信している場合、プラグインコードを完全に削除できます。

不要なリソースを削除します

あなたのテンプレートは本当に15個のフォントが必要ですか？ 7つの分析システムを追加しましたか？そのサードパーティウィジェットは必要ですか？ 50の広告ネットワークから広告を表示する必要がありますか？複数のJavaScriptライブラリが必要ですか？ JavaScriptアニメーションをCSS3エフェクトに置き換えることはできますか？それをきれいにして、必要のないものを削除します。

ソーシャルネットワークボタンを交換します

Facebook、Twitter、Google、LinkedInは、ページでボタンを共有していますか？彼らは無害に見えますが、彼らはあなたのページに何百KBのサードパーティのJavaScriptを追加するかもしれません。これは、パフォーマンスに悪影響を与える可能性のある肥大化したセキュリティリスクです。サードパーティのコードは不要です。数行のHTMLを使用して、ページに無脂肪のソーシャルボタンを追加できます。少量のJavaScriptは、Googleアナリティクスでポップアップを使用したり、イベントトラッキングログの使用を使用したりするエクスペリエンスを高めることができます。

JavaScriptとCSSのマージと圧縮

JavaScriptとCSSファイルを開発中に個別のモジュールに溶解することは実現可能です。ただし、本番サーバーで個々のファイルをホストする前に、これらのファイルをマージして圧縮してコメントやスペースを削除する必要があります。

（WordPress style.cssファイルが上部にトピックの詳細を保持する必要があることに注意してください。そうでなければ壊れます！）

画像の処理 画像は、ウェブサイトが肥大化した最大の理由です。 500kbの単一の高解像度画像を削除すると、重量を短縮し、時間を25％以上ダウンロードできます。

不要な画像を削除または交換します

ヒーローは美しく、ブランドのイメージに合っていると確信していますが、顧客を失う原因となっていますか？画像のすべてまたは一部は、CSS3勾配、境界、フィルター、またはその他の効果に置き換えることができます。

正しい画像形式

を使用します

常に適切な画像形式を使用してください。一般的に言えば：

写真にjpgを使用します

他のすべてにpngを使用します
しかし、より小さく、限られた色またはアニメーションを使用した画像の場合は、GIFの使用を検討してください。
• WebPなどの他の形式がありますが、ブラウザのサポートは限られています。疑わしい場合は、適切なオプションをすべて試して、最適なオプションを選択してください。ただし、注意してください：
• JPGは、より高い圧縮速度で詳細を削除する損失のある形式です。各画像の品質とファイルサイズの間の最高のトレードオフを見つけます。
• PNGには、256および24ビットの色カテゴリがあります。 256カラーバージョンは通常、小さなファイルを生成します。
• PNGとGIFは両方とも透明性を提供します。より多くのバイトを節約するために、できる限り透明性をオフにします。

大きなビットマップ画像のサイズ

基本的なカメラまたは電話で撮影した画像は、あらゆるデバイスに表示されないほど大きすぎます。 WordPressはサイズを変更するためのオプションを提供しますが、最良の結果を得るには、編集者はアップロードする前にトリミングしてサイズを変更する必要があります。画像サイズは、コンテナの最大サイズを超えてはなりません。高密度/網膜ディスプレイを使用しているユーザーは、高解像度の画像を高く評価する場合がありますが、IMGタグ付きSRCSET属性を使用して代替案を提供できます。画像のサイズを変更すると、ページの重みに大きな影響を与える可能性があります。サイズを50％削減すると、総面積が75％減少し、それに応じてファイルサイズが改善されます。

画像圧縮を最大化する
メタデータを削除し、色の深さを減らし、圧縮係数を調整することにより、ビットマップ画像のサイズを大幅に削減できます。 WP Smush、EWWW Image Optimizer、Imagify、Kraken Image Optimizer、ShortPixel Image Optimizer、CW Image OptimizerなどのWordPressプラグインは、このプロセスを処理できます。最良の結果を得るには、アップロードする前に画像を処理する必要があります。ソフトウェアオプションには、Optipng、Pngout、JPegtran、JPegptimが含まれます。 Windowsユーザーは優れた暴動を使用してみることができます。または、Tinypng/tinyjpgなどのオンラインツールを使用できます。 SVG画像は、値をより少ない小数桁に丸め、パスを簡素化し、XMLから不必要なコメント、プロパティ、およびスペースを削除することで圧縮できます。 SVGエディターには、ファイルを圧縮するオプションがあるか、SVGエディターやSVGOなどのツールを使用できます。また、スタイルディレクティブをCSSに移動することもできます。
Lazy Loadingを実装
最後に、怠zyな読み込み手法により、画像を含むボックスがビューポートに表示されている場合にのみ、画像がダウンロードされることが保証されます。怠zyなロードを実装するWordPressプラグインには、怠zyな負荷、jQueryイメージの怠zyなロードWP、BJレイジーロード、ロケット怠zyな負荷、怠zyな負荷を発表し、ビデオの怠zyな負荷が含まれます。その他のリソース：
ウェブサイトのパフォーマンスを向上させるための5つの画像レイテンシロードテクニック
独自のプログレッシブイメージローダーを構築する方法
より徹底的な解決策
あなたの被験者がまだ太りすぎである場合、あなたはより激しいダイエットレジメンを考慮することができます…

建設プロセスの使用

ビルドプロセスは、画像を自動的に最適化し、CSSおよびJavaScriptファイルをマージおよび圧縮できます。 WordPressテーマにGulp Buildプロセスを採用することができます。これにより、仕事に時間を節約し、ページのパフォーマンスを向上させ、開発をより楽しくすることができます。
プログレッシブWebアプリケーションテクノロジーを検討してください
プログレッシブWebアプリケーションテクノロジーにより、Webアプリケーションは基本的なリソースと共通リソースをキャッシュすることでオフラインで動作できます。これはアプリケーションに使用されることがよくありますが、ウェブサイトをプログレッシブウェブアプリケーションに変換し、迅速な読み込みとオフライン操作の利点を享受できます。

サードパーティのコードを避けてください

未知の開発者にウェブサイトコードにアクセスするための無制限の許可を付与しますか？しませんか？それでは、なぜソーシャルメディア共有ボタンやディスカッションフォーラムなどのサードパーティウィジェットを信頼するのでしょうか？これらのウィジェットはめったにセキュリティを妥協することはありませんが、どの隠しリソースがロードされているかを確認し、パフォーマンスへの影響を評価する必要があります。

WordPressのテーマをCAREYに評価します

無料で商業的なWordPressテーマは経済的に意味があります。既製のテーマがすべてのニーズを数ドルで満たしているのに、なぜ開発者を雇うのですか？しかし、隠されたコストには注意してください。開発の取り組みを回復する前に、ユニバーサルテンプレートを数千枚販売する必要があります。バイヤーを引き付けるために、開発者は決して必要ないかもしれない多くの機能を束ねます。 1つを確認してください：テーマはよく見えますか？ チェック2：テーマはさまざまなデバイスやネットワークでどのように機能しますか？ 参照：高度なWordPressテーマの10の機能。

Webサイトを簡素化します
1つの傾向は、よりシンプルで、合理化された、より顧客中心のオンラインエクスペリエンスに向かって移動することです。これは思ったよりも難しいかもしれませんが、すべてのユーザーに想像できるすべての機能を与える昔は終わりました。上司/顧客を納得させることができるかどうかは別の問題です！
開発ライフスタイルを変更します
2.8MBに達するWebページに対して誰が責任を負うべきですか？それは私たちです。理由とウェブサイトが肥大化する方法は重要ではありません。開発者はそれを実現します。迅速な発展とコスト削減は依然として重要ですが、誰も使用したくない遅くて不器用なウェブサイトにつながると、プロセス全体が無駄になります。クライアント/ボスは技術的な問題を理解していないかもしれませんが、結果を説明する必要があります。パフォーマンスは最初から考慮されます。コンテンツ、SEO、使いやすさ、アクセシビリティのように、パフォーマンスは決して無視されないでください！速いWordPressテーマを作成することは困難ですが、後でパフォーマンスを「追加」することははるかに困難でコストがかかります。
その他の提案：
高速200Mbps接続で開発すると、帯域幅を忘れがちです。接続を制限するか、信号が不十分なエリアにWebサイトをロードしてみてください。イライラしていると感じると、ユーザーもイライラします！
ページの重みを検討し、トピックに追加されたすべてのリソースに疑問を投げかけます。たとえば、「評価」戦略を考慮してください。たとえば、20kbのフォントを追加する場合は、他の場所から20kbを節約する必要があります。
不安定なパフォーマンスサイトは流行になっていますが、それについて心配している開発者がほとんどいないことは明らかです。気になる人は、より多くの訪問者を獲得し、より高い転換率とより高い給与を得るでしょう！
WordPressテーマのパフォーマンスの改善に関するよくある質問

ワードプレスのテーマを最適化してパフォーマンスを向上させるにはどうすればよいですか？

パフォーマンスを向上させるためのWordPressテーマの最適化には、複数のステップが含まれます。まず、速度向けに設計された軽量テーマを選択します。これらの機能がウェブサイトを遅くするため、必要ない機能をロードするトピックを使用しないでください。次に、優れたキャッシュプラグインを使用します。これにより、ウェブサイトのバージョンをサーバーに保存し、訪問者に提供し、サーバーが実行する必要がある作業量を減らします。第三に、画像を最適化します。大規模で高解像度の画像はウェブサイトを遅くする可能性があるため、画像最適化プラグインを使用して、品質を失うことなく画像サイズを縮小します。
どのFAQが私のWordPressのWebサイトを遅くすることができますか？
WordPressのWebサイトを遅くする可能性のあるいくつかの一般的な問題があります。これらの問題には、ホスティングプロバイダーの遅い、コンテンツ配信ネットワーク（CDN）の使用、過剰なプラグイン、大きな画像、およびキャッシュプラグインの使用が含まれます。ウェブサイトのパフォーマンスを定期的に監視し、発生する問題を解決することが重要です。
高速のWordPressテーマを選択する方法は？
WordPressテーマを選択するときは、軽量でスピード用に設計されています。これらがウェブサイトを遅くするため、必要のない多くの機能を備えたテーマを使用しないでください。また、トピックの評価とコメントを確認して、他のユーザーが速度で問題に遭遇したかどうかを確認してください。
CDN WordPress Webサイトのパフォーマンスを改善する方法は？
CDN（コンテンツ配信ネットワーク）は、WordPress Webサイトのパフォーマンスを大幅に改善できます。 Webサイトのコピーを世界中のサーバーに保存することで機能します。ユーザーがあなたのウェブサイトにアクセスすると、CDNは彼らに最も近いサーバーからコンテンツを提供し、コンテンツのロードにかかる時間を短縮します。
WordPress Webサイトで画像を最適化する方法は？
Image Optimization Pluginを使用して、WordPress Webサイトの画像を最適化できます。これらのプラグインは、品質を失うことなく画像のサイズを削減し、ウェブサイトの読み込み時間を大幅に改善できます。また、解像度を減らしたり圧縮したりすることで、画像をアップロードする前に手動で最適化することもできます。
WordPress Webサイトのパフォーマンスに多くのプラグインがどのように影響しますか？
プラグインはWordPressのWebサイトに有用な機能を追加できますが、あまりにも多くのプラグインがウェブサイトを遅くすることができます。各プラグインは、ウェブサイトがロードする必要があるコードを追加し、読み込み時間を増やします。本当に必要なプラグインのみを使用し、不要になったプラグインを定期的にチェックして削除することが重要です。
WordPress Webサイトのパフォーマンスを監視する方法は？
さまざまなツールを使用して、WordPress Webサイトのパフォーマンスを監視できます。これらのツールには、Google PageSpeed Insights、Gtmetrix、Pingdomが含まれます。これらのツールは、ウェブサイトのパフォーマンスに関する貴重な洞察を提供し、対処する必要がある問題を特定できます。

遅いホスティングプロバイダーは、WordPressサイトのパフォーマンスにどのように影響しますか？

ホスティングプロバイダーは、WordPress Webサイトのパフォーマンスにおいて重要な役割を果たします。ホスティングプロバイダーにサーバーが遅い場合、ウェブサイトも遅くなります。高速で信頼できるサービスを提供するホスティングプロバイダーを選択することが重要です。

WordPress WebサイトでHTTPリクエストの数を減らす方法は？

WordPress WebサイトでHTTP要求の数を減らすと、読み込み時間が長くなる可能性があります。これは、CSSとJavaScriptファイルを組み合わせて、Sprite画像を使用して、ページに表示される投稿の数を減らすことで実行できます。
ブラウザキャッシュを使用してWordPress Webサイトのパフォーマンスを向上させる方法は？
ブラウザキャッシュは、ユーザーのブラウザにWebサイトのバージョンを保存することにより、WordPress Webサイトのパフォーマンスを大幅に改善できます。これは、ユーザーがウェブサイトを再訪すると、ブラウザがすべてを再度ダウンロードする必要がないため、より速く読み込まれることを意味します。キャッシュプラグインを使用するか、.htaccessファイルにコードを追加することにより、ブラウザキャッシュを有効にできます。

以上がWordPressテーマのパフォーマンスを改善する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。