E コマースビジネス

ウェブサイトの速度を最適化する方法: トップ 12 のヒントとガイド

すべてのウェブサイトの所有者は、現在および将来の訪問者のための満足のいくオンライン体験を作成し、維持することを目指しています。最後にそんなにゆっくりと読み込まれたウェブサイトに行ったのはいつですか?タブがまだ読み込み中にすぐに閉じられましたか? これは、非常にゆっくりと読み込まれるウェブサイトを所有することの欠点の1つです。注目のスパンが短くなっているこのペースの速い世界では、サイトが読み込まれるのに多くの時間がかかると、ウェブサイトの訪問者にとってはイライラします。これを見ながら、私はあなたのウェブサイトの読み込み速度を速く保つことが不可欠である理由でこのガイドをまとめると考えました。私はあなたのウェブサイトの速度を向上させる

Alejandro Rioja

2020年11月20日

Open Table of contents

なぜスピードのためにあなたのウェブサイトを最適化するのですか?
ウェブサイトの速度を確認する方法
- エゾイックとは何ですか?
- エゾイックのビッグデータ分析の特徴
ウェブサイトをスピードアップする方法に関するヒント

なぜスピードのためにあなたのウェブサイトを最適化するのですか?

Web サイトの読み込み速度 (ページ読み込み時間とも呼ばれます) は、ページがユーザー画面に表示される時間を示すパフォーマンスメトリックです。

Web サイトを成功させるには、コンバージョン、可視性、ユーザビリティという 3 つの要素を満たす必要がありま

す。これら3つの要因を見てみましょう。

変換

この要因は、ウェブサイトの訪問者を顧客に変える機能です。これは、ユーザーが製品を購入したり、ニュースレターキャンペーンを購読したり、ウェビナーに登録したり、ガイドをダウンロードしたりできる場合に発生します。

Hubspotはレポートの中で、ページ読み込み速度の毎秒の遅延がコンバージョンの7%削減に寄与すると宣言しました。アマゾンは、ページの減速に失われた毎秒の売上高が16億ドルを失うことを知りました。

私は、ウェブサイトの読み込みに時間がかかる場合、より多くの人々が不幸になるだろうと述べ、Kissmetricsはこれを詳細に研究しました。訪問者の47%がサイトを最大2秒で読み込みたいと考えており、この金額を超えると40%が放棄し、訪問者の79%が少なくとも3秒を読み込むウェブサイトに戻らないことがわかりました。

ウェブサイトの読み込みを速く保つために動機づけるために、買い物客の52%は、より速く読み込まれるサイトに忠実であると言い、そのほぼ半分は貧しいサイト体験について友人に中継します。

ウェブサイトのパフォーマンスを向上させることに関しては、実際のストーリーはウォルマートです。彼らは、毎秒サイトの読み込み時間を削減すると、コンバージョン率が2%増加し、100ミリ秒ごとに収益が最大1%に増加することを学びました。それは一つのことを明らかにする

:ユーザーがあなたのウェブサイトの読み込みを待つ気がない場合は、ウェブサイトを改善する必要性を無視することは、彼らがすぐにそれを残すことを意味します。

可視性

ウェブサイトの読み込みが速いほど、検索エンジンの数が増え、検索ページのランクが上がったようです。Googleはウェブサイトをランク付けするために積極的に行っています。

この成功要因は、検索結果の最初の数ページにウェブサイトが表示される頻度を中心に展開します。

それとは別に、Googleは2017年12月以来、モバイルバージョンに基づいてウェブサイトをランク付けしています。これは、ユーザーが使用しているデバイスに関係なく正しく動作しないウェブサイトを避けるために彼らの評価に含まれていました。

彼らは、モバイル検索が2015年以来初めてデスクトップ検索を上回り、そこから数が増加し続けていることに気付き、評価を変更しました。彼らはトレンドが逆転する方法に適応することができました。

その後、ウェブサイトの速度を削ると、検索結果のランクが同時に高まる可能性があると結論付けることができます。

関連: また、ここでトップ9検索エンジンのレビューとランキングをお読みください

ユーザビリティ

ユーザーが十分に速く読み込まれないウェブサイトから目をそらす方法について話したことを覚えていますか?

ユーザーはまた、同様に使用するのが難しいウェブサイトから目をそらすでしょう。

たとえば、背景画像が大きすぎると、画面の読み込みに時間がかかるため、プロセスでのページ読み込み時間が長くなります。

あなたの読み込み時間を量る要素を持つウェブサイトを持つことは、あなたのバウンス率を増加させ、それらを維持する可能性を減らします。

この考え方は、訪問者の中にページの読み込みが遅いページが 1 つでも読み込みに苦労している場合にも機能します。彼らは、他のページは、それが遅いように読み込まれると考えます, したがって、長期的に聴衆を保持するあなたのチャンスを減少させます.私は常

にあなたのウェブサイトを軽量に保つことをお勧めします, モバイル応答性, そして、それが起きて、より多くの訪問者を得るのを助けるために.

ウェブサイトの速度を確認する方法

ウェブサイトの読み込み速度を知るためのより良い方法を学ぶことが重要です。最もスマートな方法の1つは、ロード速度のメトリックを表示するだけでなく、改善する必要がある部品を特定するツールを使用することです。

このチュートリアルでは、私は自分のサイトを改善するために使用する多くのツールの1つであるEzoicを利用する方法を紹介します。その前に、それが何であり、どのように機能するかを紹介します。

エゾイックとは何ですか?

Ezoicは、ウェブサイトのユーザビリティやコンテンツ発見を改善することを目的としたソフトウェアスイートです。カリフォルニア州サンディエゴのテクノロジー企業が設立しました。

これは、Facebookの最初の広告ネットワーク、キュービックを設立したインターネット起業家のドウェイン・ラフルールによって90年代に設立されました。

この記事では、ビッグデータ分析モジュールを強調表示します。

エゾイックビッグデータ分析

上記のGIFは、あなたのウェブサイト上のこのソフトウェアスイートの機能の一部を示しています。

ページやトラフィックソースによる訪問者のエンゲージメントなど、ウェブサイトの訪問者の振る舞いに関する詳細な情報を取得できます。それ以外にも、推奨されるページ、ソーシャルシェア、スクロールのパーセンテージの組み合わせが、他の多くの人の中で見つかります。

また、あなたのウェブサイトがどのような訪問者を魅了するかも知ることができます。たとえば、言語、場所、地域の時間、ローカルタイムゾーン、および気象を確認できます。

最後に、どのウェブサイトの成功要因が売上数に影響を与えているかを確認できます。ページの速度、記事の長さ、トラフィックソースが広告の収益を増減するかどうかをリンクできるレポートを生成するのに役立ちます。

エゾイックのウェブサイト要件

Ezoic を入手するには、ウェブサイトが以下のいずれかに準拠しているかどうかを確認してください。

最低1ヶ月あたりの訪問数は10,000回
無効なクリックやインプレッションがない
誤ってクリックを奨励しない
著作権で保護された資料またはダウンロードを提供しない
偽造品を提供しない
ユーザーを望ましくないページ、サイト、ポップアップ、またはポップアンダーにリダイレクトしません。
ギャンブルコンテンツを含む
無効なコンテンツが含まれています
自動生成されたコンテンツを含まない
他のページからコピーされたコンテンツを使用しない
元のコンテンツのない空のページがない
キーワード詰め物がない
成人、危険、または軽蔑的なコンテンツを使用しない
アルコール、タバコ、ヘルスケア関連のコンテンツを提供していません
攻撃的または脅迫的なコンテンツを持っていない

あなたのウェブサイトにEzoicを統合する方法

あなたのウェブサイトが上記のすべての要件に従っていることを確認した後、Ezoicを統合するには、次の手順に従います。

Ezoic でアカウントを作成し、アカウント作成ウィザードに従います。
ソフトウェアスイートでアカウントを作成するために使用したメールの指示に従って、ウェブサイトのネームサーバーをEzoicに入力します。この手順を実行する必要がある理由については、こちらを参照してください。
Ezoicは、その統合プロセスの一環として、舞台裏であなたのウェブサイトをチェックします。
緑色のチェックマークや「統合」がテキストに設定された緑色のラベルが表示されない場合は、ポップアップの最後にある緑色のテキストをクリックして指示に従ってください。
緑色のチェックマークまたは「統合」がテキストの緑色のラベルが表示された場合は、次の操作を行うことができます。
- デバイスを使用してシステムの電源を入れます。
- ソフトウェアスイートに機械学習を適用するトラフィックの割合を選択します。

ステップ5を過ぎると、Ezoicがあなたのウェブサイトからデータを取得することができ、必要なレポートの生成に進みます。

これらのレポートは、ログイン後に Ezoic アプリケーションに入ると表示できます。次に、セクションに移動します。

エゾイックのビッグデータ分析の特徴

これは、適切な Ezoic アカウントにサインアップするときに取得できるレポートの完全な一覧のスクリーンショットです。

レポートごとに、1 つのサイトのチェック、2 つ以上のサイトの比較、スイートに接続されているすべてのサイトの表示を選択することもできます。それ以外にも、Ezoic 統合の前後のデータを比較することもできます。各モジュー

ルの詳細と期待される内容については、こちらのヘルプ記事を参照してください。

ウェブサイトをスピードアップする方法に関するヒント

Ezoicを使ってウェブサイトの状況を監視する方法を学んだ後、改善方法についてのヒントを紹介しましょう。

ヒント #1. コンテンツ配信ネットワークを使用する

コンテンツ配信ネットワーク (CDN) を使用すると、サイトのコンテンツを訪問者に近い世界中のサーバーに分散させることで、サイトの読み込み速度を向上できます。

毎日10,000人の訪問者を得るDIYブログを所有しており、そのすべてのコンテンツは1つのサーバーに保存されています。10,000人の訪問者全員が一度にアクセスすると、一度にアクセスするすべての人の読み込み速度が向上します。

それ以外に、1 つのサーバーが同時に 10,000 件の要求を処理すると、同時に読み込み速度が向上します。

ヒント#2。ウェブサイトをより良いホストに移動する

これがあなたのウェブサイトを改善する方法であることを説明する前に、私はウェブホスティングとは何かを定義しましょう。

Web ホスティングは、インターネット上でウェブサイトを公開し、他の誰もが見ることができるサービスです。

共有、仮想プライベートサーバー (VPS)、専用、およびサーバーレスの 4 種類があります。

共有ホスティングサービスを利用することは、読み込み速度が遅いと引き換えに、インターネット上でウェブサイトを取得するための最も安価で最速の方法です。この方法を使用すると、サーバー内の他のサイトと CPU、ディスク領域、RAM を共有できます。

一方、他の2つのオプションを選択する方が高速です。VPSは他のユーザーとサーバーを共有することを含みますが、専用のユーザーは、独自のWebサイトのサーバー設定を管理するためにシステム管理者を雇うことを含む一方で、あなた自身の仮想共有を持っています。

最後に、サーバーレスオプションには、AWS、Microsoft、Google などの利用可能なパブリッククラウドプロバイダーから専用のクラウドリソースをレンタルする必要があります。これにより、無制限のスケーラビリティを同時に追加しながら、必要なすべてのリソースを柔軟に取得できます。

あらゆる種類のサーバーに投資する前に、ウェブサイトを収益性の高い方法で、必要な限り移動して維持する方法を調査してください。

あなたがそれをしている間、ここでGoDaddyの私のレビューをチェックしてください

ヒント#3。ImageOptim を使用してウェブサイト上の画像のサイズを最適化します。

訪問者を維持し、あなたのバウンス率を減らすための一般的な戦略の1つは、目を引く画像を追加することです。ウェブサイトに追加すると、ニュースレターの購読や製品の購入などのエンゲージメントを向上させます。

ただし、追加するすべての画像が大きすぎないようにしてください。それを放っておくと、サイトの速度がマイナスの影響を受ける可能性が大きくなります。

画質を損なうことなく、画像のサイズを縮小する方法は多数あります。このヒントでは、ImageOptim の使用方法と、イメージ圧縮のしくみを説明します。

イメージ圧縮について

簡単に言えば、画質やサイズを犠牲にすることなく、画像のファイルサイズの合計を小さくする行為は、イメージ圧縮と呼ばれます。

品質を犠牲にしながらそれを実行すると、それは損失圧縮と呼ばれます。保存することは、画像最適化と呼ばれます。

画像の最適化を説明する簡単な方法は、画像内のすべての冗長ピクセルを排除し、繰り返し行またはピクセルのチャンクに対応するアーティファクトに置き換えるということです。

これは簡単です:画像の読み込み速度が向上し、結果としてウェブサイトの速度が向上します。

イメージオプティミティの使用

ImageOptim は、Mac デバイスで使用でき、JPEG、PNG、および GIF ファイルを圧縮できるフリーソフトウェアツールです。

このソフトウェアを使用する前に、プログラムで作業する元の写真のコピーを作成してください。これを行うと、緊急時のバックアップを作成するのに役立ちます。

次に、ツールの使用方法に関する私の手順を次に示します。

イメージを開きます。
ドラッグアンドドロップまたは+記号をクリックして圧縮する写真をアップロードして、ファイルを参照して選択します。
プログラムが終了するのを待ちます。
ファイルの横に緑色のチェックマークが表示されている場合、ファイルが正常に最適化され、新しいファイルサイズとシェークオフが可能になった量を確認できます。
それ以外の場合は、問題を確認し、手順 2 からもう一度実行してください。

このツールを使用する以外に、このガイドを読んで、プログラムをカスタマイズしてアルゴリズムを最適化する必要がある程度に変更する方法を学ぶことができます。

ヒント #4. Jetpackを使用してプラグインを管理する(ワードプレスのウェブサイトのみ)

あなたがプラグインのトンを使用して自分のウェブサイトを作った多くのWordpressユーザーの一人であれば、それは自分でそれを維持するために時間がかかるかもしれません。

それ以外にも、プラグインの数が多いほど、サイトのロード時間が長くなります。今後、新しい訪問者を取得して過去の訪問者を返すことからあなたを防ぐので、ライブ中に、あなたのウェブサイトに適したものを追加、削除、編集してください。

コンテンツプラグインを管理する方法を含むオールインワンツールであるJetpackをご紹介します。

ジェットパックの使い方

まず、Jetpack プラグインをインストールして、サイトに接続する際に、 > に移動します。次に、Jetpack を検索し、 をクリックして簡単に追加します。

次に、正常にインストールされたら、Jetpack の設定 > 外観 > ウィジェットの可視性に移動して、ウィジェットの可視性機能を有効にする必要があります。

有効にした後、カスタマイザー > ウィジェットを訪問してウィジェットを追加*、編集、削除できます*。

ウィジェットごとに作成できるオプションは 2 つあります。最初の 1 つは、ウィジェットを非表示にするか、表示するかを尋ねる一方で、2 番目のオプションでは、ウィジェットの表示方法または非表示の方法に関する条件を設定できます。

ヒント#5。JavaScript およびカスケードスタイルシートの表示 (CSS) の内容を変更する

イメージ圧縮について説明した後、このヒントは JavaScript ファイルと CSS ファイルのファイルサイズを減らすことを含みます。それぞれについて個別に話し合いましょう。

Javascript

このファイルの種類は.jsの拡張子を持ち、Webサイトでより多くの機能を可能にするために使用されます。このファイルを追加すると、フォームの送信から同じページ内の特定の要素の非表示まで、あらゆる種類の処理を行うことができます。

このファイルの種類が存在する場合は、不要なコード行と行間のスペースが多すぎないようにしてください。これにより、ウェブサイトの読み込み時間が長くなります。

これを行うには、.jsファイルを自分で編集する方法、Web開発者を雇う方法、または修正ツールを使用する方法の 3 つがあります。

最初の 2 つのオプションは簡単です。基本的には、上記のコード行を削除し、不要なスペースを削除するためにファイルを編集しています。

3番目のオプションは、無料かどうかにかかわらず、自動的にツールを取得することです。クロージャコンパイラやJavascriptミニエフィヤなど、多くのツールが利用できます。

カスケードスタイルシート (CSS)

このファイルタイプは、あなたのウェブサイトがきれいに見える理由です。

.css で終わる場合、要素の配置や背景色の変更など、さまざまな方法でページに影響を与える可能性があります。

不要なスペースや行を減らすことで、ウェブサイトのテーマは読み込み時間を削りながら、そのまま見栄えがよく保たれるでしょう。

これを行う場合は、自分で編集したり、他の人を雇ったり、修正ツールを使用したりすることもできます。

自分で編集するか、他の誰かによって編集するには、メモ帳や他の同様のアプリを開いて、削除する行を個別に確認します。

一方、最後のオプションは、あなたのウェブサイトを更新する時間を節約するだけでなく、誤って重要な行を誤って削除するのを防ぐのに役立ちます。

このファイルタイプに使用できるツールには、cssminifier.com、csscompressor.net、およびminifycode.comがあります。

ヒント#6。Gzip 圧縮の実装

ウェブサイトの個々のファイルサイズを小さくするとウェブサイトの読み込み時間が短縮されることを示した後、このヒントは圧縮をさらに一歩進めます。

これは、ファイル形式としてgzipを備えています。これは、結果として Web サイトの読み込み時間を短縮するサーバーの応答時間を増加させるためにファイルを圧縮する方法として知られています。

その仕組みは、訪問者がブラウザを使用してウェブサイトを読み込んだ後、Gzipはすべてのコンテンツを1つのファイルに入れ、圧縮して訪問者のブラウザに送信することです。次に、訪問者のブラウザはファイルを解凍し、すべてをロードしてから表示します。

ウェブサイトでこの機能を有効にするには、ここでチェックして、特定の設定のコードスニペットを確認する必要があります。

ヒント#7。Web サイトのキャッシュを使用する

このヒントでは、訪問者の読み込み時間を短縮するためにキャッシュを使用する必要があります。

キャッシュは、ホスティングサービスに Web サイトの現在のバージョンを格納し、更新中にこのバージョンを提示するとして定義されます。

これは、訪問者が自分のデバイスのいずれかからゼロから読み込むのを防ぐので、時間を節約し、直帰率を下げるのに役立ちます。

この戦略は、背景画像やブログ記事などのアセットだけでなく、データベースからデータを取得する場合にも適用されます。

共有サーバーを使用して Web サイトを公開することを選択していない場合にのみ、このヒントを適用できることに注意してください。この機能はありません。

VPS または専用サーバーのいずれかを選択した場合は、設定を編集してこの機能を有効にすることで、これを有効にすることができます。

一方、あなたのウェブサイトがWordPressを使用して実装されている場合は、W3トータルキャッシュやW3スーパーキャッシュなどのプラグインに追加することができます。

ヒント#8。コンテンツ管理システム(CMS)を使用してデータベースを最適化する

以前のヒントでは、キャッシュはウェブサイトのデータベースからデータを読み込むときに読み込み時間を短縮する方法の1つであることを述べました。

このヒントは、特に CMS を使用してデータを取得するウェブサイトの機能を対象とします。

データベース容量を増やして、コメント、ブログ投稿、その他の訪問者が追加したコンテンツを保存できる、ウェブサイトに添付できるモジュールです。

このようなアプリケーションの例は、ワードプレス製のウェブサイトのWP-最適化です。

CMSアプリケーションを利用したい場合は、ストレージ容量の利点と引き換えにウェブサイトの読み込み時間を増やす可能性があることに注意してください。このリストを見て、ニーズに合ったリストを探し始めることができます。

ヒント#9。Web フォントの使用を減らす

ウェブフォントは、タイポグラフィや Google フォントなどの別のサーバーでホストされているフォントとして定義され、ウェブサイトは次の項目に対処するために、そのコードでアクセスできます。

一貫性: これは、モバイルまたはPCのどちらでも、ウェブサイトをどのデバイスでも同じように見えることに関係しています。
パフォーマンス: これは、ウェブサイトがすべてのアセットを訪問者に読み込む速度にリンクされています。
解決策: これは、訪問者がモバイルブラウザを使用してウェブサイトにズームインしたり、幅と高さが小さいブラウザで表示したりする際のウェブサイトの外観に関係しています。
可用性: すべてのデザイン要素を適切に読み込んで、ウェブサイトの一貫した外観を維持するだけでなく、バウンス率の上昇を防ぐために、それが実現します。
検索エンジンのランク: 上記のすべてのポイントに従うと、ウェブサイトの検索エンジンランクが増加し、今後の訪問者数が増加します。

ウェブサイトでこれを使用する場合、または今すぐ使用する場合は、Web フォントに関する次のヒントを使用してサイトを最適化できます。

最新のブラウザー用の WOFF2 などの最新の形式を使用する
サイトで使用しない文字セットを使用しないようにする
サイトで使用しないフォントスタイルを追加しないようにする

ヒント#10。404 エラーを検出する

存在しないページにリダイレクトされた場合、Web サイトで 404 エラーが発生します。あなたがこれらに乗ってあなたのウェブサイトを放っておくと、それはあなたの跳ね返り率を増加させ、より多くの訪問者を得る可能性を減らします。