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

コアポイント

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

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

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

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

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

要因

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

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

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

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

測定パフォーマンス

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

pingdom

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

速い勝利

次の更新には數(shù)分以上かかるべきではありません。

Webホストに連絡(luò)してください

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

gzip圧縮を有効にします

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptとCSSのマージと圧縮

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

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

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

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

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

正しい畫像形式

を使用します

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

寫真にjpgを使用します

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

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

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

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

建設(shè)プロセスの使用

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

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

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

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

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

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

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

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

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

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

WordPress WebサイトでHTTPリクエストの數(shù)を減らす方法は？

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

以上がWordPressテーマのパフォーマンスを改善する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。