簡単なウェブサイトの最適化でページの読み込み時間を短縮する方法

公開: 2022-07-02

ページの速度は、インターネット上であなたを成功させたり、壊したりする可能性があります。

通常、ページの読み込みが速いということは、サイトの速度全体としてより良い結果が得られることを意味します。ウェブサイトの成功のあらゆる側面は、SEOからコンバージョン、ユーザーエクスペリエンスなど、ページの速度に関連しています。

選択したホスティングプロバイダーから、使用することを決定したアプリケーションまで、最適化できる領域はたくさんあります。考慮すべき領域が非常に多いため、ページ速度の向上は複雑なプロセスになる可能性があります。実装が簡単な方法でWebページの読み込み時間を最適化する方法を学ぶことは、成功するために非常に重要です。

では、最適化されていることを確認するために何ができるでしょうか。 Webページを高速化するいくつかの方法、ページの読み込み時間を短縮する方法、およびページの読み込み時間と速度を上げるためのその他のベストプラクティスを見てみましょう。

ページの読み込み時間が重要な理由

ページの読み込み時間を短縮する方法に入る前に、それがなぜそれほど重要なのかを最初に理解しましょう。

Googleは、サイトの速度が2010年にランキングに影響を与えることを最初に発表し、その重要性を示し続けています。 2018年、Googleはモバイルサイトの速度のランキング要素としてページ速度を導入しました。

SEOスペシャリストはすぐにページ上の要素を最適化し、検索エンジンを削減しようと試み始めました。遅れなかったもの。そして今、最近発表されたコアWebバイタルでは、速度がこれまで以上に重要になっています。

ページの読み込み速度を改善する方法についてもっと知りたいですか？考慮すべきいくつかの重要な領域があります。

ページ速度の重要性

ページの読み込み時間は、コンバージョンという非常に明白な理由から常に重要です。簡単に言えば、高速サイトはコンバージョンを増やし、低速サイトはコンバージョンを減らします。

実際、モバイルWebサイトの速度が0.1秒向上すると、小売業のコンバージョン率が8.4％向上する、とGoogleは2020年の調査で発見しました。

サイトの速度もバウンス率に影響します。ユーザーが遅いサイトに遭遇すると、彼らは去ります。 Akamal Technologiesのレポートによると、ページの読み込み時間が2秒遅れると、ウェブサイトのバウンス率が103％増加する可能性があります。

ページの読み込み時間をテストする

Webサイトのスナップショットを取得し、最適化プロセスのベンチマークの前後に作成するには、最初に実行するのは、現在のページ速度をテストすることです。開始できるツールは、GoogleのPageSpeedInsightsとWebpagetest.orgです。

必ず複数のテストを実行し、結果を平均してください。 Webページテストでは、設定メニューでこれを自動的に行うことができます。最も正確な結果を確実に得るために、サイトがホストされている場所に近いテスト場所を選択することは常に賢明です。

これは、基本的な速度チェックのために通常webpagetest.orgを設定する方法です。

以下に、Magentoデモサイトでの平均ページ速度テストの結果を示します。サイトを最適化するために使用したい最も重要で重要な統計を3つ選びました。

読み込み時間	最初のバイトまでの時間	バイトイン
2.264秒	0.318秒	927 KB

最初の統計はロード時間です。これは、ページの読み込みにかかる完全な時間を示しています。ページの読み込みに3秒以上かかる場合は、潜在的なトラフィックの半分が失われる可能性があることに注意してください。この数は、私たちが変更するために最も重要です。

2番目の統計はTimeToFirst Byte（TTFB）です。ガイダンスを提供するのに役立ちますが、TTFBは比較的簡単に操作でき、その重要性はさまざまです。 Google Lighthouseを使用している場合は、ページがコンテンツの要素で画面を「ペイント」する速度を報告するFirstContentfulPaintとFirstMeaningfulPaintを追跡することもできます。

レシピを読み込んだことがありますが、すべての広告と物語を乗り越えようとしているため、その半分がスクロールの速さに追いついていないのでしょうか。これは、FCP/FMPの時間が非常に遅いためです。

3番目の統計は、ページにダウンロードされる情報のサイズです。この数が非常に多い場合は、さまざまなページ要素にかかる時間を詳しく調べると役立つ場合があります。

ページスピードウォーターフォール

ページの読み込み時間を短縮する方法を知りたい場合は、ページの速度を低下させている要素を特定し、ウォーターフォールを確認してください。滝がどのように見えるかの例を以下に見ることができます。

滝を見たら、何を改善できるかについてより良いアイデアが得られるはずです。上記のように、フロントエンドの.jsファイルの一部がわずかに高速化される可能性が高いことがわかります。

ウォーターフォールを下に移動すると（ページ外）、ロードに時間がかかり、最適化する必要のある画像ファイルもあります。ページの読み込み時間が速い場合は、どの要素がページの遅延を引き起こすのかを理解することが重要です。

Webコンテンツを介してページの読み込み時間を短縮する方法

画像の圧縮と最適化

ページの読み込み時間を短縮する方法を検討する場合、画像圧縮から始めるのが最適です。 Webデザイナーは、無駄に高い解像度を採用した画像を作成することがよくあります。高解像度の画像はサーバー上のより多くのストレージスペースを占有し、ロード時間を大幅に増加させる可能性があります。

画像を適切に拡大縮小することを強くお勧めします。画像がサイトで100x100ピクセルのスペースしか占有しない場合は、1000 x 1000にする必要はありません。WordPressサイトを実行している場合は、SmushやEWWWImageOptimizerなどのプラグインをお勧めします。

WordPressでWebP画像に変換する方法>>

画像タイプの拡張

画像を保存するときは、使用する拡張子を知ることが重要です。 .jpgまたは.pngにする必要がありますか？誰かが.svgであなたにロゴを送ったのですか？何が最善かについては、相反する情報がたくさんあります。

多くの人が.png（Portable Network Graphics）は、品質を損なうことなく可能な限り画像を圧縮するように設計されているため、より良いオプションであると言います。それは部分的に真実です。そうは言っても、規則には例外があります。たとえば、写真を使用する場合、.JPEGファイルは実際にははるかにうまく機能します。

ページのプレビューに表示するときに、ファイルをいくつかの異なる方法で保存すると、サイズと品質にどのように影響するかを確認することをお勧めします。明らかな違いに気付いた場合は、より良い拡張機能を選択してください。

サイトコンテンツを圧縮する

スクイーズが必要なページ要素は画像だけではありません。また、サイトのCSS、HTML、およびJavaScript要素を圧縮する必要があります。 GZipは、本番環境に実装する前にテストすることをGoogleが提案する強く推奨される圧縮ツールです。これを計画している場合は、独自の本番環境を模倣した開発サイト環境を利用することをお勧めします。

サイトのコンテンツを圧縮することについてのことは、それが最初のバイトまでの時間をわずかに増やすことができるといういくつかの証拠があるということです。ただし、全体的なページ速度の読み込み時間も劇的に増加します。一部のSEO専門家は、Googleが実際に優先する可能性があると示唆しています。サイト全体を切り替えるのではなく、個々のページで圧縮をテストすることをお勧めします。

Webデザインを簡素化する

ページの読み込み時間を短縮したい場合は、ほとんどの場合、少ないほど多くなります。コアページに機能を追加する代わりに、もっとシンプルで速いものに落ち着くのはどうですか？ページのHTTPリクエストが少ないほど、通常は読み込みが速くなります。

ページ速度の向上に加えて、シンプルなWebデザインは、多くの場合、ユーザーエクスペリエンスを向上させることも示されています。 Googleが実施したUX調査では、ユーザーはWebサイトの美学を1/50〜1 / 20秒以内に判断する傾向があり、視覚的に複雑なサイトは、ほとんどの場合、単純なサイトよりも美しくないと判断されることがわかりました。

ウェブサイトがより美しく認識されるほど、UXとSEOが向上し、より多くのコンバージョンが増加します。よりシンプルなウェブサイトのデザインは、短期間でページ速度を向上させるための最も迅速な方法の1つです。ただし、100％の変更をすぐに行うのではなく、変更が実際にどのように実行されるかを確認するために、A/Bテストを実行することをお勧めします。

ホスト経由でページの読み込み時間を短縮する方法

ホストは、ページの読み込み時間にも大きな役割を果たします。ホストでページの読み込み時間を短縮する方法をいくつか紹介します。

キャッシュを有効にする

キャッシュは、ページ要素がキャッシュまたは一時ストレージのハードドライブに保存されているため、リピーターがサイトをはるかに高速にロードできる場所です。 WordPressおよびWooCommerceサイトでは、RedisObjectCacheを使用してキャッシュ機能を管理します。これは、Nexcessを通じてWordPressに最適化されたホスティングプランを購入すると、プリインストールおよび事前構成されます。

ページ速度をさらに最適化するために、NexcessCloudではCloudAcceleratorを使用できます。これは、クライアントポータルのパフォーマンスセクションの下にあるボタンをクリックするだけで簡単にオンとオフを切り替えることができます。

VarnishとNGINXのどちらをオンにする必要があるかわからない場合は、 VarnishとNGINXの違いについて詳しくは、Magento2を最適化するための決定的なガイドをご覧ください。

キャッシングとCDN

CDN（Content Delivery Network）を適切に配置してキャッシュすることは、より複雑なプロセスであり、高度なセットアップが必要になる場合があります。ただし、CDNを使用した適切なキャッシュ構成は、ローカルホストを使用しているかのように、そのグローバルオーディエンスにリーチするのに役立ちます。

WordPressCDNが必要な理由>>

WordPressとWooCommerceについては、WordPressとCDNイネーブラーを使用してNexcessCDNを構成する方法に関するガイドを確認してください。

考慮すべきその他の領域

どのページを最適化していますか？

あなたのサイト構造は、最適化に関しては世界に違いをもたらします。最適化するページと、それがサイト全体の構造にどのように関連しているかを考えることが重要です。 1つのページを更新する場合は、それが相互作用するページも考慮する必要があります。

たとえば、単にNexcess.netを最適化するだけでは役に立ちません。また、Nexcess.net / magento/hostingとNexcess.net/cloud/hostingも最適化する必要があります。

このプロセスを開始する前に、どの主要ページが最も多くのコンバージョンを獲得し、最も多くのROIを引き付けているかについて計画を立ててください。最大の影響を得るには、ここから始めてください。

ページ速度とSEO

ページ速度とSEOは本質的に関連していますが、ページランクを決定する決定的な要因ではないことは間違いありません。グーグル自身は、コンテンツがより関連性があり、人々がそれがロードされるのを喜んで待つならば、彼らはそのサイトにペナルティを課さないと言っています。

最終的に、ページ速度は最適化の重要な部分ですが、コンテンツ、品質、およびユーザーエクスペリエンスを常に最優先する必要があります。

適切なホストでロード時間を短縮

画像が行ごとに読み込まれるのを待つことから、私たちは長い道のりを歩んできました。ページ速度は、消費者が不満を言うだけでなく、コンバージョンやランキングなどを作成または中断する可能性もあります。ページ速度を上げるためにできる限りのことをすることは常に良い考えです。

ページの読み込み時間を改善するために時間と労力を費やしているのであれば、デジタルビジネスを保護していることになります。あなたのスウェットエクイティをスマートな投資と一致させてください。 Nexcessのように、スケーラビリティ、セキュリティ、速度、およびサポートが証明されているホストを選択して、次のステップに進みます。

Nexcessは、以下を含むフルマネージドのWordPressホスティングを提供します。

自動的にアップデート。
セキュリティのためのSSL。
組み込みのCDN。
画像圧縮。
キャッシング。
もっと！

2週間の無料トライアルで自分の目で確かめてください。

無料トライアルを開始