WordPress最適化チェックリスト

WordPressの最適化は、Webサイトを可能な限り高速に実行し、ユーザーエクスペリエンスを向上させ、サーバーコストを削減し、SEOのメリットをもたらす技術です。

多くの調査によると、訪問者はWebサイトの読み込みを待ちたくないため、読み込みに時間がかかりすぎるとWebサイトから離れる傾向があります。

あなたがウェブショップを持っていて、あなたのコンバージョン率を改善したいならば、速い読み込みのウ​​ェブサイトはあなたにとって特に重要です。

Amazonでのテストでも、同様の結果が明らかになりました。Amazon.comの読み込み時間が100ミリ秒増えるごとに、売り上げが1％減少しました（Kohavi and Longbotham 2007）

出典：https：//www.websiteoptimization.com/speed/tweak/psychology-web-performance/

ウェブサイトの読み込み速度もGoogleでのランキングにとって非常に重要であり、ウェブサイトの最適化をSEO戦略の一部にしています。

しかし、私のウェブサイトは本当に速くロードされます！

確かにそうです。 少なくともあなたにとっては。 しかし、久しぶりに自分のWebサイトにアクセスしてみましたか？

Webサイトをナビゲートすると、そのほとんどがブラウザにキャッシュされます。 初めて体験したい場合は、キャッシュをクリアするか、まったく別のブラウザを使用してください。

WordPressウェブサイトの速度を向上させるためにやるべきことはたくさんあります。始めましょう。

スクリプトの縮小

WordPress Webサイトは、HTML、CSS、JavaScript、および画像を組み合わせたものです。 最初にHTMLコードが読み込まれ、次にCSSスタイルシートの他のファイル、JavaScriptファイル、および画像に関する情報が含まれます。

各ファイルが順番にロードされます。 ブラウザには通常2〜4個の「パイプ」の制限があります。つまり、ブラウザは、ファイルがホストされているサーバーから同時に最大2〜4個のファイルのみをロードします。

WordPress WebサイトのHTMLコードを見ると、さまざまな.cssファイルと.jsファイルに気付くでしょう。 これらは通常、異なるプラグインからのものであり、それぞれが.jsまたは.cssファイルのいずれかをミックスに追加します。

場合によっては、プラグインはJavaScriptまたはCSSスタイルをHTMLに直接挿入することさえあります。ほとんどのWordPressプラグイン開発者またはテーマ作成者は、これを行わないほど賢いです。

これは通常のWordPressWebサイトからのサンプルです。 HTMLコードには、他のいくつかのファイルへのリンクがあります。 この簡単な例では、4つのJavaScriptファイルが1つずつ読み込まれます。

<script type =” text / javascript” src =” https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2”> </ script>

<script type =” text / javascript” src =” https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″> </ script>

<script type =” text / javascript” src =” https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″> </ script>

<script type =” text / javascript” src =” https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″> </ script >>

WordPressには、プラグインとテーマの作成者が必要なJavaScriptファイルとCSSファイルを埋め込むことができる内部機能があります。

wp_enqueue_script（）およびwp_enqueue_style（）。 関数の名前は、それらが何をするかについての確かな手がかりを与えます。 これらのいずれかを使用して必要なファイルを埋め込むことにより、プラグインとテーマの作成者は、他のすべてのプラグイン、さらにはWordPress自体と一緒にファイルをキューに入れます。

他のライブラリの依存関係の関数を指示することも可能です。通常、JavaScriptインクルードファイルは、最初にロードされるjQueryに依存します。

私は通常、縮小プラグインを見つけてインストールし、アクティブ化してから、サイトで何かが壊れていないかどうかを確認します。 そこから、何が失敗しているのかを正確に特定し、それを修正するためにいくつかの設定を変更する必要がある場合に進みます。

ミニファイプラグインは、ドキュメントのヘッダーまたはフッターで、他のファイルと一緒にロードされたときにうまく再生されない特定のファイル、またはファイルがロードされる場所を変更するための除外設定を持つ傾向があります。

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

注：コードサンプルでは、​​テーマのURLを変数に格納し、それをwp_enqueue_script関数に解析します。 これにより、必要なPHPやデータベースの呼び出し回数が減り、速度が向上します。

極端な読み込み速度を求めて、絶対URLパスをハードコーディングすることを選択できましたが、これによりテーマが1つのドメインに制限され、別のサイトでコードを再利用することが難しくなります。

ミニファイプラグインをインストールした後、JavaScriptとCSSスタイルシートがより少ないHTTP呼び出しに結合されるようになりました。

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

これにより、4つのファイルがブラウザの単一の「ファイル」/リクエストに結合されます。

22個の.cssファイルと15個の.jsがロードされたWordPressベースのWebサイトに出くわしました。 すべてフロントページにあります。 外部ファイルの量を減らすことができれば、速度の変化は驚くべきものになる可能性があります。

スクリプトを縮小すると速度が大幅に向上する傾向がありますが、これは私が使用する手法の1つでもあり、セットアップでほとんどの問題が発生する傾向があります。

header.phpを最適化する

テーマのheader.phpは、WordPressWebサイトのすべてのページで呼び出されます。 このファイルには通常、最適化できる要素がたくさんあります。

典型的な例はbloginfo（'template_directory'）で、これは通常、外部ファイルを含めるためにテーマのURLを返すためにヘッダーで数回呼び出されます。

より効率的な方法は、URLに対して単一のリクエストを作成し、それを変数として保存することです。

$template_directory = get_bloginfo('template_directory'); 

テーマディレクトリのURLが変数$template_directoryに保存されるようになりました。

header.phpの効率を改善する方法のその他の例は、ブログ投稿WordPressheader.php最適化のヒントで読むことができます。

プラグインの数を減らす

WordPressの最適化におけるもう1つの重要な部分は、アクティブ化されるプラグインの数をできるだけ少なくすることです。 多くのユーザーがさまざまなプラグインをテストして実験することは魅力的です。これは確かにWordPressの利点の1つです。

ただし、多くのプラグインをアクティブにすると、WordPressWebサイトの速度が低下する可能性があります。 多くのプラグインには単一の関数があり、functions.phpに配置されたコードで簡単に処理できます。

多くの場合、必要な関数は1つだけですが、使用するプラグインには、使用しないオプションが他にもいくつかあります。

サイトの各プラグインを分析し、それらが必要であることを確認します。 それらが不要な場合、または機能をfunctions.phpコードに置き換えることができる場合は、プラグインを非アクティブ化して削除します。

画像を使用しない–CSS3を使用する

Webサイトのデザインでは、画像を使用してユーザーインターフェイスを作成します。

CSS、特にCSS3の導入後、CSSおよびHTMLコードを使用することで、Webインターフェイスに使用される多くの効果を模倣できます。

[ボックス]注：これらの効果のほとんどは、すべてのブラウザー、特に古いInternet Explorerで互換性があるわけではありません（はい、Web開発者にとって常に問題の子です）。 Webサイトの速度を最適化したい場合、CSS効果を使用することは迅速かつ迅速な解決策ですが、クライアントの主要なオーディエンスが古いブラウザーを使用している場合は適切な選択ではありません。[/ box]

B2C（企業から消費者）をターゲットにしているクライアントで働いている場合は、Google Analyticsを確認するか、どの種類のクライアントを持っているか（またはターゲットにしたいか）を尋ねる必要があります。 これは、顧客の聴衆が一般的に古いブラウザを使用している場合にCSS3効果を使用できるかどうかに影響を与える可能性があります。

Elegantthemes.comがショートコードプラグインの新しいバージョンをリリースしたとき、CSS3効果と複数の画像を単一のスプライトに入れるため、顧客の読み込み時間に大きな影響を与えました。

以前は90枚の画像が含まれていたshortcodes/imagesフォルダーに、単一のPNGスプライトが追加され、全体のサイズが140kbから15kbに縮小されました。
（これは、サイズが約90％縮小されます。）

スプライトへの画像

既存のテーマのスプライトの最適化には少し時間がかかる場合がありますが、Webサイトの速度を大幅に向上させることもできます。

スプライトは単一の画像であり、通常は.PNG形式であり、ビジュアルデザイン/レイアウトのいくつかの要素が含まれています。 各グラフィック要素を個別にロードする代わりに、すべての画像が1つまたはできるだけ少ないスプライトに結合されます。

この手法は、デザインのレイアウトに使用される画像にのみ使用する必要があり、個々の投稿の注目画像、サムネイルなどには使用しないでください。スプライトに配置する必要がある画像は、すべてのページのWebサイト全体で使用される画像のみです。

個々の画像をロードする代わりに（異なるhttpリクエスト）、すべての画像が1つのファイルにグループ化され、各画像を表示するCSSが変更されて、スプライト内の必要な部分がどこにあるかを背景に微調整します。

SpriteMe.orgは、スプライトを作成するための優れたリソースです。 最善の方法は、事前に計画を立ててスプライトを最初に構築することですが、既存のWebサイトを修正する必要がある場合は、spriteme.orgサイトにブックマークレットがあり、プロセスが非常に簡単になります。

スプライトと組み合わせたCSSスタイルの例：

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

各cssスタイルは同じファイルを参照しますが、背景の位置が異なり、画像のさまざまな部分が表示されます。

配布–CDNを使用する

テーマファイルとWordPressの要素をホストするためにCDN（コンテンツ配信ネットワーク）を使用することには、2つの主な利点があります。

別のドメインにあるため、ファイルの読み込みが速くなります。 ファイルの同時ダウンロードのブラウザ制限は、ドメインごとです。

したがって、ファイルが別のドメインでホストされている場合、ブラウザはこれらのファイルを自動的にロードします。実際、Webサイトのロードが速くなり、ドメインとホストの負荷ストレスが軽減されます。

もう1つの利点は、主要なCDNを使用している場合、サーバーが世界中に分散され、訪問者がどこから来たのかを検出し、ネットワーク内の最も近いサーバーからファイルを提供することです。

あなたのウェブサイトに適したサーバー

Webサイトをホストするサーバーは、ターゲットオーディエンスの近くに配置する必要があります。 したがって、Webサイトがドイツ市場をターゲットにしている場合は、ドイツ、または少なくとも中央ヨーロッパでホスティング会社のあるサーバーを見つけるのが最善です。

これは、訪問者が配置されている場所にはるかに近いサーバーからロードする訪問者に大きな影響を与え、Webサイトの閲覧を大幅に高速化します。

これは、サイトの読み込みが速くなるだけでなく、ドイツのオーディエンスにとってWebサイトの重要性が増すため、SEOの影響も受けます。したがって、ランキングも高くなるはずです。

SEOの観点からの本当の効果は議論の余地がありますが、Webサイトのパフォーマンスを向上させようとしている場合は、検討する価値があります。

これはSEOでよく知られていますが、サイトが設定されると、純粋にSEOの理由で別のサーバーに移動することはめったにありません。 ただし、次のプロジェクトでは覚えておく価値があります。

404エラーを修正

404がないことを確認するために、定期的にWebサイトのチェックを実行する必要があります–とにかくページが見つかりません。 Webサイトの不正なリンクを減らすと、サーバーの負荷が減り、ユーザーエクスペリエンスが向上します。 リンクやページが失われるだけでなく、タイプミスやその他の種類の間違いにより、Webサイトにコンテンツが見つからない場合があります。

ヒント：このコードをチェックして、見つからないページを自動的に301リダイレクトします。

[箱]
このページはまだ完成しておらず、WordPressの最適化の詳細をすべて網羅しているわけではありません。 目標は、WordPressサイトを最大限に活用するためのヒントとコツのリソースを作成することです。

開発者でない限り、いくつかまたはほとんどのトリックを実装するのは困難ですが、それらのすべてがWordPressサイトの実行を高速化します。
[/箱]

チェックリスト

これはチェックリストです。各Webサイトとプロジェクトは異なることに注意してください。 すべてのステップをすべてのWebサイトで使用できるわけではありません。