ウェブサイトの読み込み速度のベストプラクティスと改善のヒント

公開: 2019-01-30

今日のオンラインユーザーとなると、彼らは彼らが望むものを望んでおり、彼らは今それを望んでいます。私たちは皆、オンラインリソースのウェブサイトの読み込み速度が遅すぎるという状況にあり、クリックしただけです。ソーシャルメディア、テレビ、その他すべての最新テクノロジーのおかげで、今日の人間は忍耐力と集中力で正確に知られているわけではありません。

ウェブサイトの読み込み速度メイン画像

スピードはウェブサイトのサイレントキラーです。すべてのウェブサイトユーザーのほぼ半数が、ウェブサイトが2秒以内に読み込まれることを期待しています。それはおかしなことに聞こえるかもしれませんが、ロード時間が数秒でも遅いと、ユーザーは何も考えずに怖がってしまいます。現実には、Webサイトを適切かつ迅速にロードする必要があります。

ウェブサイトの読み込み速度のベストプラクティス

自分でテストしない限り、Webサイトが実際にどれほど遅いかわからない場合があります。幸いなことに、これはGooglePageSpeedで無料で行うことができます。これは、読み込み時間を正確に特定し、問題のある領域を見つけるためのWebベースのツールです。あなたのウェブサイトの読み込み時間はどのように積み重なっていますか？作業が必要な場合でも、心配する必要はありません。数回クリックするだけでウェブサイトの読み込み時間を改善することは、あなたが思っているよりも簡単です。ここにあなたが始めるためのいくつかの追加のヒントがあります。

グーグルページスピードインサイトツール

ウェブサイトの読み込み速度を向上させるためにGzip圧縮を使用する

Gzip圧縮は、応答サイズを約70％削減する強力なツールであり、印象的です。 Gzipはホストを介して行われるものであるため、サーバーでこの圧縮を使用しているかどうかをWebホストに確認する必要があります。 Gzipを使用すると、ビデオ、画像、またはその他の要素の品質を損なうことなく、応答時間を短縮できます。

テストを実行して、WebサイトがGZIPPEDであるかどうかを確認し、Zip圧縮テストを実行できます。 Gzippingがどのように機能するかは、HTTP応答のサイズを小さくすることです。最終的にはページの太さが変わります。

ファイルをキャッシュする

キャッシュとは、Webサイトのバージョンがユーザーのブラウザに保存されることです。このように、彼らが再びあなたのウェブサイトにアクセスしたとき、新しいバージョンが更新されるまでロードされる以前のバージョンがあります。キャッシングにより、ロード時間を2秒以上から1秒未満に短縮できます。これは大きなジャンプであり、注意する必要があります。幸いなことに、Webサイトでキャッシュを設定するのは簡単です。 WordPressを使用している場合は、無料のW3 TotalCacheプラグインを使用できます。キャッシングは、ウェブサイトの読み込みパフォーマンスをさらに向上させるために、今日必須です。

サーバー側のキャッシュに加えて、ブラウザのキャッシュも有効にする必要があります。これは基本的に、画像、CSS、JSファイルなどの静的ファイルのコピーをブラウザに保存するようにブラウザに指示する方法です。これにより、訪問者は、Webサイトに再度アクセスしたときに、これらのファイルが再度ダウンロードされるのを待つ必要がなくなります。 WordPressレバレッジブラウザキャッシングに関するこの情報コレクションで詳細を読むことができます。

あなたのウェブサイトのホストをアップグレードする

Webサイトに適切なホストを設定すると、ページのパフォーマンスに影響を与える可能性があります。あなたはあなたのウェブサイトに好きなだけ変更を加えることができます、しかしあなたがあまり改善を見ないならば、あなたのホストは責任があるかもしれません。あなたが最初にあなたのウェブサイトを立ち上げるとき、最も安いホスティングオプションを選ぶことは魅力的です。これはしばらくの間は問題ないかもしれませんが、大量のファイルをホストしている場合、またはトラフィックが多い場合は、これを超える可能性があります。

より安い計画が共有される可能性が高く、これはあなたの隣人のウェブサイト上のどんな問題もあなた自身に影響を与えることを意味します。専用サーバーを使用すると、共有サーバーを使用している場合に発生する可能性のある問題を回避できます。応答時間についてサポートが必要な場合は、カスタマーサービスのオプションも増えます。

ホスティングを購入する

あなたのウェブサイトのテーマを確認してください

あなたのウェブサイトがどのように設計されているかは、あなたのウェブサイトが訪問者にどれだけうまくそして速く見えるかにも影響します。テーマを切り替えるだけで、Webサイトの読み込み時間の貴重な数秒を解放できます。

シンプルなウェブサイトビルダーのメイン画像

プロのウェブサイトページビルダーまたはテーマを使用すると、ウェブサイトが不要で厄介なコードで肥大化しないようになります。そのため、Webサイトのテンプレート、テーマ、またはビルダーの美学以上のものを調べることが不可欠です。さらに、WebサイトまたはWebアプリにログインすることを検討してください。 Webサイトのログは、問題が発生する前に発見するのに役立ち、Webサイトで問題が発生するのを防ぐことができます。または、PapertrailAppなどのツールを使用してログメッセージを直接送信することもできます。

JavaとCSSファイルを減らす

今日のほとんどのWebサイトは、多くのJavascriptおよびCSSファイルを使用しており、これらのファイルはユーザーのブラウザーで個別に処理される場合があります。一度にリクエストが多すぎると、Webサイトの読み込み速度が低下します。これらのファイルをすべて縮小できる場合は、Webサイトの読み込み時間にそれほど大きな重みを加えることはありません。

すべてのページを圧縮するのではなく、JavaファイルとCSSファイルを外部にロードするのは賢明なアイデアです。そうすれば、ユーザーは、誰かがWebサイトの新しいページにアクセスするたびにではなく、表示されたとおりにファイルをロードするだけで済みます。ファイルが多すぎてユーザーのブラウザを混乱させないでください。

ネットワークを介して負荷を運ぶ

AWSクラウドフォントアカウントイメージ-ネットワーキング

トラフィックが多い場合は、ネットワークに真剣に取り組む必要があります。コンテンツ配信ネットワーク（CDN）サービスは、さまざまな地理的領域にまたがるサーバーを使用して、ファイルをユーザーに直接提供します。これは、場所間の時間が少なくなり、サイトの読み込みが速くなることを意味します。最もよく知られているCDNはAmazonCloudFrontであり、これを現在のWebサイトと簡単に統合できます。

外部ホスティングプラットフォームをお試しください

CDNと同様に、外部ホスティングプラットフォームでファイルをホストして、読み込み時間が遅くなるのを防ぐことができます。これは、ビデオファイルで最も一般的です。ビデオはかなり巨大であり、それらをWebサイトに直接アップロードすると、多くのスペースが必要になります。それらは簡単に100MBを超える可能性があるため、自分のサーバーでビデオやその他の大きなファイルをホストするのは賢明な方法ではありません。

これらのファイルを外部でホストすることをお勧めします。 YouTubeとVimeoは、ビデオファイルに最適なオプションです。そこから、あなたはあなたのウェブサイトにビデオを埋め込むことができます。スペースを節約し、ロード時間を遅くしません。また、はるかに簡単です！

特にYouTubeを使用すると、まったく新しい視聴者にコンテンツが開かれます。実際、YouTubeは世界最大の検索エンジンの1つと見なされており、月間10億人以上のユーザーを魅了しています。無料で使用でき、最大15分（リクエストを送信した場合はそれ以上）の動画をアップロードできます。あなたは単に間違って行くことはできません。

HTTPリクエストを確認してください

画像をチェックするHTTPリクエスト

Yahooは、ウェブサイトの読み込み時間の80％は、ページのさまざまな部分をすべてダウンロードすることによるものだと主張しています。 JavaファイルとCSSファイルに関しては、すでにベストプラクティスについて説明しましたが、他のすべてについてはどうでしょうか。ロードする必要のあるページ上の要素が多いほど、ページが完全に表示されるまでに時間がかかります。

ブラウザにアクセスすると、これらのリクエストがいくつ発生しているかを確認できます。 Google Chromeには、HTTPリクエストに焦点を当てたデベロッパーツールが搭載されています。これらのツールにアクセスするには、Google Chromeでページを右クリックし、[検査]をクリックして、[ネットワーク]タブに移動します。

これで、「時間」セクションですべてのファイルのロードにかかる時間を確認できます。隅には、リクエストの総数も表示されます。最も時間がかかるリクエストを減らすことは、ウェブサイトの読み込み時間を短縮する簡単な方法です。次のヒントでファイルを組み合わせる最良の方法を学ぶために読み続けてください。

HTMLファイルを結合して縮小する

ファイルを縮小すると、不要な空白やコードが削除されます。これらの小さなことはすべて重要ではないように思われるかもしれませんが、それはあなたのロード時間を増やします。目標は、可能な限り無駄のないHTMLファイルを作成することです。

Webサイトを確認して、使用していない不要なページがないかどうかを確認します。空白や不要なコードを削除できる場所はありますか？最後に、HTMLファイルを組み合わせて、Webサイトの読み込み時間が滞らないようにします。

外部CSSを使用する

CSSは、ページのスタイル要素とデザイン要素を含める方法です。 Webサイトは、ページの前に読み込まれる外部ファイルにアクセスするか、インラインスタイルにアクセスできます。 HTMLドキュメント自体にCSSを含めると、多くのコードが追加されます。前にも言ったように、それは良くありません。

代わりに、HTMLのヘッドにロードされている外部CSSを使用する必要があります。回避できる場合は、HTMLにCSSを含めないでください。これは特にdivまたは見出しを意味します。外部スタイルシートを使用すると、よりクリーンでスリムになります。編集もはるかに簡単です。

CSSのステータスがわからない場合は、CSS配信ツールを使用してCSSファイルがどのように積み重なっているかを確認してください。これにより、外部ファイルの場所と、HTMLにインライン要素があるかどうかがわかります。可能な場合は、1つの外部CSSファイルのみを使用してください。複数のファイルがある場合は、ファイルを組み合わせることができます。

Javascriptの読み込みを延期する

JavaScriptのようにファイルを延期する場合、追加のJava要素をロードする前に、Webサイトの残りの部分が正しくロードされることを確認します。 Javaの延期は、プラグインを使用するのと同じくらい簡単な場合があります。また、Javaを最後にロードすることをWebサイトに通知するために、HTMLスクリプトを手動で追加する必要がある場合もあります。

このスクリプトは、外部JavaScriptファイルを呼び出します。 Javaを延期するための完全なチュートリアルがここにあります。大きな違いではありませんが、これにより、パペの読み込みが速くなるように見せることができます。

最初のバイトまでの時間を確認する

最初のバイトまでの時間（TTFB）は、ブラウザーがデータの最初のバイトのロードを開始するまで待機する時間です。 Googleによると、TTFBは200ミリ秒未満である必要があります。ただし、これはサーバー側の懸念事項であるため、より多くのWeb開発者が見落としがちです。

ユーザーがWebサイトにアクセスしても、自動的にロードが開始されることはありません。瞬時のプロセスのように見えるかもしれませんが、最初に発生する3つのステップがあります。ブラウザは最初のHTTPリクエストをウェブサイトをホストしているサーバーに送信し、そこからの手順はDNSルックアップ、サーバー処理、および応答です。

繰り返しになりますが、Chromeデベロッパーツールには、このプロセスがWebページでどのくらいの時間がかかるかが表示されます。これは、インターネット接続の強度にも大きく依存します。接続が遅いとTTFBが遅くなります。 TTFBをチェックして、200ミリ秒未満であることを確認します。そうでない場合は、適切な解決策についてホストに相談するときが来ました。十分なスペースがないか、トラフィックが多すぎる可能性があります。

折り畳み上のコンテンツを最初に

読み込みに時間がかかる長いページがある場合があります。それが現実です。ただし、最初に上記の情報が読み込まれるようにすることで、一部の訪問者を節約できます。ページ上部のコンテンツがすべてすばやく表示されるようにすることで、ユーザーエクスペリエンスを向上させます。

これは「遅延読み込み」と呼ばれるプロセスであり、その名前は理にかなっています。これは、ページをゆっくりと読み込むようなものですが、ユーザーが最も集中している上部から始まります。遅延読み込みを使用すると、ユーザーはページの残りの部分が読み込まれるのを待たずに、トップコンテンツを表示し、ウェブサイトの読み込み速度を上げることができます。ページ全体に10枚以上の写真があることを想像してみてください。これらの画像がすべて読み込まれて読み始めるまで、訪問者を待たせたくないでしょう。

遅延読み込みでは、jQuery.sonarを使用して、表示されている画像のみを読み込みます。ページに遅延読み込みを簡単に追加できるプラグインはたくさんありますが、手動で追加するための完全なチュートリアルがあります。ユーザーは、折り畳み以上のコンテンツを待つ必要がなくなったことを喜ぶでしょう。

画像サイズを確認してください

画像サイズの縮小と画像のトリミング

ファイルサイズを確認せずに画像をアップロードするのは簡単です。これは時々問題ないかもしれませんが、注意しないとWebサイトの速度が低下する可能性があります。画像を保存するときは、[ウェブ用に保存]オプションを使用して画像を保存してみてください。これは、PhotoshopやFireworksなどのツールで利用できます。「Web用に保存」を使用すると、画像の鮮明さを損なうことなく画像サイズを縮小できます。

一般に、ファイルサイズを大きくすることは避けてください。 PNG 写真を保存するとき。画像のプロパティをチェックして、サイズが大きくなっているのかどうかを確認できます。最後に、Webサイトにすでに大きな画像がある場合は、プラグインを使用するか、それらのファイルを手動で圧縮して、Webサイトの読み込み速度を向上させます。

ウェブサイトの読み込み速度を向上させるために不要な余分なものを削除する

時々私達は私達のウェブサイトに新しいものを追加し、それらを忘れます。他の何かに移るか、過去の解決策はもう必要ありません。理由が何であれ、頻繁にWebサイトをチェックして、使用していないものにスペースを浪費していないことを確認してください。これは、次のすべてに適用されます。

画像;
プラグイン;
ナビゲーション要素;
デザイン要素;
ページ;
アーカイブされたブログ投稿。

どんなに小さくても、これらはあなたのウェブサイトの読み込み速度に悪影響を及ぼします。さらに、特にプラグインを使用すると、Webサイトのセキュリティに弱点が生じる可能性があります。これらは簡単に損傷し、セキュリティを低下させる可能性があります。古くなった余分なものがないか定期的にWebサイトを確認する習慣を身に付けてください。

ソーシャル共有ボタンを制限する

ソーシャル共有ボタンは、ソーシャルメディアでのエンゲージメントを促進するための優れた方法です。ただし、制限が必要です。これらのボタンは非常に効果的な場合があります。ただし、バストになることもあります。私たちが同意できるのは、これらのソーシャル共有ボタンはいくつかの外部JavaScriptを使用し、これらはWebサイトの速度を低下させるということです。

特にFacebookはこれの主な原因となっています。 Facebookスクリプトは、共有ボタンを使用してWebサイトのパフォーマンスを低下させる可能性があります。これらの共有ボタンが本当に面倒な価値があるかどうかを検討してください。あなたはまだそれらを保持することができますが、トップパフォーマーであることが証明されたものだけを保持します。

非同期配信

サードパーティのコードと言えば、うまくいかないことがたくさんあります。サードパーティが停止したり、突然速度が低下したりした場合、ソーシャル共有ボタンであろうとネットワーク分析スクリプトであろうと、ページがそのリソースを読み込もうとして簡単にスタックする可能性があります。

非同期配信は、その速度低下の解決策です。これを有効にすると、サードパーティのネットワークが停止した場合でも、自分のWebサイトは影響を受けません。非同期配信はいくつかの方法で有効にできますが、そのすべてをここで概説します。

GooglePageSpeedをインストールする

GooglePageSpeed画像

Google PageSpeedは、ウェブサイトの読み込み速度を最適化するオープンソースのサーバーモジュールです。それはあなたのウェブサイトをより速くするためにグーグルによって設計されて、そしてそれは使いやすいです。基本的に、サーバーとWebサイトファイルの両方に異なる変更を加えます。手動で何もする必要はなく、Webサイトのパフォーマンスが向上します。

これは、Webサイトのパフォーマンスに関しては、万能のソリューションに近いものです。 Google PageSpeedを自分でファイルマネージャーにインストールすることも、ホストまたは開発者にインストールの支援を依頼することもできます。あなたはそれを設定し、それを忘れることができます。

背景画像を組み合わせる

多くのテーマは、複数の背景画像を使用して単一の完全な画像を作成します。これは見栄えがよく、同時に発生する可能性がありますが、Webサイトのパフォーマンスが低下する可能性があります。ユーザーのブラウザは背景写真をロードするためにいくつかの異なるリクエストを行う必要があるため、これはロードプロセスに時間を費やします。

代わりに、画像を1つにまとめて、ウェブサイトの読み込み速度を上げてください。このように、ユーザーは多数ではなく単一のリクエストを行うだけで済みます。バックグラウンドを適切にロードするためのラウンドトリップリクエストが複数なくなるため、Webサイトが高速になります。

画像のホットリンクを停止する

ホットリンクとは、サーバーにアップロードせずに、別のWebサイトの写真を自分のWebサイトに埋め込む方法です。これは少しのコードで簡単ですが、とりわけWebサイトの速度低下につながる可能性があるのは悪い習慣です。

ホットリンクはあなたのウェブサイトに害を及ぼすだけでなく、許可なくそうすると技術的に盗みます。 Webサイトの所有者は、これらのファイルをホストするためのスペースの料金を支払います。同じファイルを埋め込みコードを使用して自分のWebサイトに配置すると、許可なくリソースを取得することになります。

画像を共有する目的で直接画像をアップロードできるWebサイトもありますが、それでもこれはお勧めできません。これらのWebサイトが遅いか、トラフィックが多い場合、それらを埋め込んでいると、Webサイトの読み込み速度が遅くなる可能性があります。さらに、スペースにお金を払っていない限り、これらのファイルは警告なしにいつでも削除できます。

はい、ホットリンクを使用すると帯域幅を節約できる可能性がありますが、長期的にはWebサイトの速度が低下する可能性が高くなります。ホットリンクではなく、常に独自のサーバーで画像をホストします。疑わしい場合は、アップロードする余裕があるように、自分のサーバーでより多くのスペースを購入することをお勧めします。とにかく小さな画像ファイルを使用する必要があるので、問題はありません。

今日あなたのウェブサイトの読み込み速度を上げる

あなたはあなたのウェブサイトを新しい高みに引き上げる準備ができていますか？それはあなたのウェブサイトの読み込み速度を上げる時です。 Webサイトの読み込み速度が遅い場合、意図せずに訪問者を失う可能性があります。ウェブサイトの読み込みに時間がかかりすぎると、どれほどイライラするか考えてみてください。ウェブサイトの読み込み時間が1秒遅れると、コンバージョンが7％減少し、ページビューが11％減少します。上記のヒントを真剣に受け止めて、ユーザーにそれを行わないでください。

あなたのウェブサイトをスピードアップすることは、複雑で、高価で、混乱することでもありません。これは、SEOを改善し、ユーザーにプラスの影響を与えるための最も簡単で最速の方法の1つです。 Webサイトのパフォーマンスを向上させ、ユーザーに印象を与えたい場合は、上記のヒントに投資する価値があります。

ホットリンクや壊れたリンクの回避からウェブホスティングのアップグレードまで、上記の小さな手順でも大きな影響があります。圧倒されている場合は、Webサイトの読み込み速度をテストすることから始めてください。そこから、Webサイトが最大のパフォーマンスレベルで実行されていることを確認するために必要な改善の程度がわかります。あなたのウェブサイトはそれをグーグルの基準に合わせるためにほんの少しの微調整を必要とするかもしれません。ユーザーは待つのにうんざりしているので、仕事に取り掛かる時が来ました。

ibrandifyによって作成されたウェブサイトの読み込み速度ベクトル