WordPressウェブサイトでのページ読み込み時間の改善

公開: 2019-04-12

WordPressでの開発に時間を費やしたことがある場合は、明らかな理由もなく大量のファイルをロードする遅いテーマに遭遇した可能性があり、Webサイトが遅くなり大きな頭痛の種になります。ゆっくりと動作する素晴らしいデザインのウェブサイトを構築することは、無限にイライラする可能性があります。この遅さは、あなた自身、あなたのビジネス、そしてあなたの評判を含め、関係するすべてのものとすべての人に影響を及ぼします。

Go Fish Digitalでは、ページの読み込み時間の問題を解決するために頻繁に呼び出され、いくつかの方法で解決します。では、WordPressのテーマやウェブサイトの読み込み時間をどのように短縮できますか？この問題の解決に役立ついくつかのヒントを以下に概説します。

問題を検出する

最初に行うことは、WordPressWebサイトの読み込みが遅くなる原因を特定することです。それは大きな画像、大量のHTTPリクエスト、Javascriptファイル、または上記のすべてですか？見つけるのはあなたの仕事です。

この情報を見つける最も簡単な方法は、ブラウザの内部ツールを使用することです。 Chromeを使用している場合は、問題のあるページに移動し、 Macの場合はCommand + Alt / Option + J、Windowsの場合はCtrl + Shift + CまたはF12を押すか、ページを右クリックして[検査]を選択します。 これにより、「検査官」が表示されます。次のようなものが表示されます。

あなたのものは小さくなるかもしれません-それは正常です。より多くの情報に合うようにウィンドウを拡大する必要があります。インスペクターをウィンドウのさまざまな部分にドッキングしたり、必要に応じて独自のウィンドウとしてポップアウトしたりすることもできます。次に、上部中央の[ネットワーク]タブに移動する必要があります。 次のようなものが表示されます。

この時点では、このセクションには何も表示されない可能性があります。これが発生した場合は、単にページを更新してください。 ページデータが読み込まれると、このウィンドウにさまざまなエントリが表示されるようになります。これらは、ロード時間を短縮するために微調整できるさまざまなファイルおよびネットワーク関連の呼び出しになります。

ファイル/呼び出しの読み込みに最も時間がかかるエントリを並べ替えると、画像、Javascript、CSSファイルなどのアイテムが表示されるようになります。これは正常であり、これが最初に焦点を当てる内容です。

注：場合によっては、さまざまなWebサイト（Facebook / Twitterウィジェット、広告など）からアセットを収集することが問題になります。 このような場合、ロード時間を短縮するための独自の方法を見つけるために、使用しているサードパーティに相談する必要があります。

すべてのものを縮小する

ミニファイとは、ブラウザによるすべての処理方法に影響を与えることなく、冗長または不要なデータを削除するプロセスです。ここでは、サイトに関するほとんどの問題から始めます。多くの場合、[ネットワーク]タブを見ると、大量のCSSファイルが表示されます。ブラウザがCSSファイルやJavascriptなどを取得するためにサーバーにアクセスする必要があるたびに、読み込み時間が長くなります。 1つのファイルが複数のファイルよりも個別に大きい場合でも、サーバーリクエストが少ないため、1つのファイルの読み込みが速くなります。これらのCSSファイルとJavascriptファイルを訪問者が管理しやすい単一のダウンロードに圧縮するのに役立つプラグインの小さなリストを次に示します。

最適化
マージ+縮小+更新
Fast Velocity Minify
ミンキュー（ちょっと時代遅れですが、それでもかなりうまく機能します！）

Autoptimizeは、ページの読み込み時間を短縮する非常にシンプルで便利なプラグインの良い例です。私たちのウェブ開発チームはいくつかのウェブサイトでそれを使用しており、素晴らしい結果が得られています。

覚えておくべきことの1つは、サイト上のすべてのJavascriptを圧縮すると、WooCommerceなどの他のプラグインで問題が発生する可能性があるため、注意が必要です。

画像圧縮とレイジーローダー

遅いウェブサイトを作成するもう1つの一般的な問題は、デスクトップとモバイルの両方での大きな画像の読み込みです。以前から[ネットワーク]タブを見て、大量の画像が読み込まれていることを確認した場合、この部分はあなたにぴったりです。幸いなことに、画像を圧縮するのに役立つプラグインがいくつかあります。私は次のことをお勧めします：

Smushit
TinyPNG
ShortPixel Image Optimizer

ただし、テーマ内の画像を手動で圧縮するには、TinyPNGに移動します。このツールは、新しく圧縮されたすべての画像を含むzipファイルを生成します。次に、それらのファイルをテーマにアップロードして、既存の画像を上書きできます。

レイジーローダーについて聞いたことがありますか？遅延読み込みは、ユーザーが実際に画像を表示したときにのみページに画像を読み込むJavascriptの手法です。これは非常に便利な機能であり、それを実現できるプラグインがいくつかあります。

BJレイジーロード
WPロケットによる遅延ロード

プラグインのインストールが完了したら、ページを更新し、変更については[ネットワーク]タブを確認してください。

注：サイト上のすべての画像を定期的に再最適化して更新することをお勧めします。 そのためのかっこいい小さなプラグインがここにあります。

キャッシュプラグイン

ページのキャッシュは、Web開発とWeb最適化の非常に重要な部分です。キャッシングは基本的に、後ですばやく再利用できるように、さまざまな応答、ファイル、およびその他の情報を保存します。ここでそれについてもう少し読むことができます。簡単に言うと、アプリケーション/ Webサイト全体にさまざまなレベルのキャッシュがあり、サーバーからアクセスされる実際のWebページまですべてに影響を与えます。

WordPressは、以下のプラグインを使用して、データをレンダリングし、後で別の訪問者がサイトにアクセスしたときに使用できるように保存できます。これはあなたのサイトを非常にスピードアップするのに役立ちます。私は次のキャッシュプラグインをお勧めします（それらが好むホスティングソリューションに必ず相談してください）：

W3トータルキャッシュ
WPスーパーキャッシュ
SucuriSecurityおよびその他のSucuriサービス
ホスティングプロバイダーからの組み込みキャッシュ（WPエンジンはこの良い例です）

コンテンツ配信ネットワーク（CDN）

あなたが隣人に手紙をもらおうとしていると想像してみてください。あなたはおそらくあなたの家から出て、他の人の郵便受けに手紙を貼り付けるでしょう、それはあなたの側で全く時間も労力もかかりません。さて、あなたの手紙が他の国の誰かに行く必要があるかどうか想像してみてください。郵便局に行き、郵便料金を購入し、受取人がそれを確実に受け取れるように数日待つなど、はるかに長く困難なプロセスを経る必要があります。それは基本的に、誰かのWebサイトを要求したときに起こることです。

コンテンツ配信ネットワーク（CDN）は、他の国の誰かがあなたの隣からあなたのWebサイトにアクセスしているように機能します。あなたよりも近くにいる人々にあなたのウェブサイトの資産を届けるコンピュータが世界中にたくさん設置されています。これにより、ページの読み込み時間が大幅に短縮され、サーバーの最適化が向上します。この記事で読むことができるCDNの他の利点もあります。 CDNには、次のような優れたサービスがいくつかあります。

CloudFlare
AWSによるCloudfront
CDN77
StackPath
等

それで、あなたが開発者であり、これらのさまざまなオプションをすべて試したとしましょう。さらに微調整が可能ですか？いくつかのウェブサイトで使用した方法を提出したいと思います。

コードですべての出力を制御する

注：記事の次の部分は、開発に不慣れな場合、Webサイトのフロントエンドで問題を引き起こす可能性があります。 このアイデアの背後にあるプロセスと理論に自信が持てるようになるまで、本番サーバーではこれを行わないことをお勧めします。 これは、JavascriptとCSSに関してフロントエンドで何が必要かを正確に理解している場合にのみ行ってください。

コードの圧縮と最適化をさらに始める前に、ページにロードするCSSファイルとJavascriptファイルを正確に知っておく必要があります。今のところ、lは、ヘッダーとフッターに、独自の圧縮のJavaScriptファイルとCSSファイルをOADとWordPressの出力ことをすべてのJavaScriptとCSSファイルを無効にします。 次の2つのフックでそれを行うことができます。

上記のコードスニペットは通常、テーマのフォルダー内のheader.phpファイルにあり、Javascript、CSSなどを含めることができるすべてのヘッダーコードを出力します。 詳細については、WordPressのCodexをご覧ください。 WordPressがコードを挿入するもう1つの場所は、フッターです。これは、テーマのfooter.phpファイルで確認できます。 これについてはコーデックスでも読むことができます。フックは次のコードスニペットになります。

次に、テーマからすべてのJavascriptとすべてのCSSを制御する必要があります。そのためには、JavascriptファイルとCSSファイルの出力を許可しないようにWordPressに包括的に指示する必要があります。テーマは通常、これらのファイルをそれぞれのfunctions.phpファイルに登録しますが、ヘッダーまたはフッターのファイルをfunctions.phpファイルに登録しないようにWordPressに指示する必要があります。 各テーマにはそのfunctions.phpファイルが必要なので、自分のテーマを見つけて（またはテーマのルートに作成して）、functions.phpファイルに次のコードを追加します。

ページを更新すると、ほとんどの場合、JavaScriptファイルがロードされていないことがわかります。

ヒント：CSSはウェブサイトのヘッダーに読み込まれますが、すべてのJavascriptはフッターに読み込まれる必要があります。 これにより、ブラウザはJavascriptで開始する前に、最初にWebサイトの構造をレンダリングできます。 通常、これはユーザーにとって最高のエクスペリエンスをもたらします。

ここでページを更新すると、CSSファイルが出力されないため、サイトがめちゃくちゃになっていることがわかります。それはあなたが望むものです。次に、これらすべてのJavascriptファイルとCSSファイルの代わりにファイルを配置することで、すべてを制御します。

したがって、ロードするスタイルシートがわかっているとしましょう。これは、 （theme）/assets/build/CSS/main.cssなどのフォルダーにあるGulpまたはGruntからの圧縮出力にすることができます。テーマフォルダのルートにあるstyle.cssファイルにすることもできます。 いずれにせよ、メインのスタイルシートを出力したいと思います。コードは次のとおりです（ファイルの場所と名前に一致するように編集してください）。

それで、CSSを圧縮したのと同じ方法でJavascriptファイルを圧縮したとしましょう。これで、次のようにJavascriptをサイトのフッターにロードできます。

ページをリロードすると、ソースコードで各ファイルを見つけることができるはずです。これにより、functions.phpファイルにあるPHPコードが機能していることが保証されます。これで、[ネットワーク]タブをチェックして、全体的な負荷サイズと時間が改善されたかどうかを確認できます。

結論

覚えておくべき最も重要なことは、ページの読み込みの問題を修正することは絶対に可能であるということですが、創造的な問題解決といくつかの調査が必要です。問題を見つけるのに役立つように、ブラウザにネイティブなツールをよく見てください。次に、前述のプラグインと、一般消費者向けのきちんとした整形式のWebサイトを作成するための戦略を検討します。あなたはそれを行うことができます！

以下のコメントで、私のヒントがWebサイトの読み込み時間を改善するのに役立ったかどうかを教えてください。