ウェブサイトの速度：ウェブサイトの速度を最適化するためのヒント

公開: 2019-12-25
ウェブサイトの速度は、ユーザーエクスペリエンスにとって非常に重要です。 サイトが遅すぎると、訪問者と潜在的な顧客の両方を失うことになります。 グーグルのような検索エンジンは、検索ランキングでウェブサイトの速度を考慮に入れています。 したがって、Webサイトの速度を最適化するときは、すべてを考慮に入れる必要があります。

ここでは、Webサイトの速度を向上させるための基本的および一般的な提案をいくつか示します。

可能な場合はコンテンツの読み込みを延期する

Ajaxを使用すると、いつでも非同期で更新できるWebページを作成できます。 つまり、ユーザーがアクションを実行したときにページ全体をリロードする代わりに、そのページの一部を更新するだけで済みます。

例として画像ギャラリーを使用できます。 高品質の画像ファイルは常に大きくて重いです。 彼らはウェブサイトの速度を遅くする可能性があります。 ユーザーが最初にWebページにアクセスしたときにすべての画像を読み込む代わりに、画像のサムネイルを表示するだけで済みます。 次に、ユーザーがそれらをクリックすると、サーバーからフルサイズの画像を非同期的にリクエストしてページを更新できます。 このように、ユーザーが数枚の写真だけを見たい場合は、すべての写真がダウンロードされるのを待つ必要はありません。 この開発パターンは、遅延読み込みと呼ばれます。

ウェブサイトの速度

無題

ウェブサイトの速度

読み込み速度が速い優れたClaueテーマ

jQuery、Prototype、MooToolsなどのAjax / Web開発ライブラリを使用すると、遅延コンテンツの読み込みを簡単に実装できます。

ホット！！ Claueのバージョン2.0がリリースされました

claue2_edited（1）

デモを見る

Claue Magento Theme 2. 0がリリースされ、パフォーマンスが大幅に向上し、独自の機能が追加されました。 これが私たちが最も興奮しているいくつかの変更のピークです

  • ルマのテーマに基づいています。
  • Magentoテーマのすべての基準を満たす
  • 大幅なパフォーマンスの向上
  • ほとんどのサードパーティの拡張機能と互換性があります。
  • Magento2.4.xと完全に互換性があります

この2番目の高度なバージョンは、以前のバージョンとは完全に異なります。 したがって、Claueバージョン1を使用していて、Claueバージョン2に更新する場合は、古いバージョンから更新するのではなく、新しいWebサイトを再構築することしかできません。

外部JSおよびCSSファイルを使用する

ユーザーが最初にWebページをロードすると、ブラウザーはCSSファイルやJavaScriptファイルなどの外部リソースをキャッシュします。 したがって、インラインのJavaScriptファイルとCSSファイルの代わりに、それらを外部ファイルに配置することをお勧めします。

ウェブサイトの速度

CSS

インラインCSSを使用すると、Webページのレンダリング時間も長くなります。 メインのCSSファイルにすべてを定義すると、適用する必要のあるすべてのスタイルルールが既に認識されているため、ブラウザはページをレンダリングする際の作業を減らすことができます。

ボーナスとして、外部のJavaScriptファイルとCSSファイルを使用すると、複数のWebページに散在するコードではなく、グローバルファイルを維持するだけでよいため、サイトの保守が容易になります。

キャッシングシステムを使用する

同じコンテンツを作成するためにサイトがデータベースに接続していることがわかった場合は、キャッシュシステムを使用してWebサイトの速度を高速化するときが来ました。 キャッシュシステムを導入することで、ユーザーがページにアクセスするたびにコンテンツを作成するのではなく、サイトでコンテンツを1回作成するだけで済みます。 キャッシングシステムは、設定方法に応じて定期的にキャッシュを更新します。そのため、絶えず変化するWebページ（コメント付きのブログ投稿など）でもキャッシュできます。

WordPressやDrupalなどの人気のあるコンテンツ管理システムには静的キャッシュ機能があります。 動的に生成されたページを静的なHTMLファイルに変換して、不要なサーバー処理を減らします。 WordPressについては、WP Super Cache（Six Revisionsがインストールした6つの重要なWordPressプラグインの1つ）を確認してください。 Drupalのコアにはページキャッシュ機能があります。

Webサーバーにインストールできるデータベースキャッシングおよびサーバーサイドスクリプトキャッシングシステムもあります（インストールできる場合）。 たとえば、PHPには、キャッシュやその他のさまざまな方法を通じてパフォーマンスを最適化するPHPアクセラレータと呼ばれる拡張機能があります。

HTMLで画像のサイズを変更しないでください

画像のサイズが元々1280x900pxであるが、400x280pxにする必要がある場合は、HTMLの幅と高さの属性を使用する代わりにPhotoshopなどの画像エディタを使用して画像のサイズを変更して再保存する必要があります（つまり、 <img width =” 400” height = ” 280” src =” myimage.jpg” /> ）。 これは、当然、大きな画像は小さな画像よりもファイルサイズが常に大きくなるためです。

HTMLを使用して画像のサイズを変更する代わりに、Photoshopなどの画像エディタを使用して画像のサイズを変更してから、新しいファイルとして保存します。

画像を使用してテキストを表示するのをやめる

画像内のテキストはスクリーンリーダーにアクセスできなくなり、SEOにはまったく役に立たなくなるだけでなく、画像を使用してテキストを表示すると、画像が多いほどWebサイトの速度が速くなるため、Webページの読み込み時間が長くなります。

Webサイトで多くのカスタムフォントを使用する必要がある場合は、CSS @ font-faceについて学習して、カスタムフォントでテキストをより効率的に表示します。 言うまでもなく、画像を提供するよりもフォントファイルを提供する方が最適かどうかを判断する必要があります。

正しいファイル形式を使用して画像サイズを最適化する

適切な画像形式を選択することで、画質を損なうことなくファイルサイズを最適化できます。 たとえば、PNG形式で提供される画像の透明度（アルファレイヤー）が必要でない限り、JPG形式では多くの場合、写真画像が小さいファイルサイズで表示されます。

さらに、画像のファイルの重みをさらに減らすために使用できるツールがたくさんあります。

ドキュメントの最後にJavaScriptをロードする

スクリプトをページの最初ではなく最後にロードするのが最適です。 これにより、JavaScriptを開始する前に、ブラウザですべてをレンダリングできます。 これにより、JavaScriptの動作方法は、ダウンロードが完了するまでJavaScriptの下にあるものがレンダリングされないようにするため、Webページの応答性が向上します。 可能であれば、HTMLドキュメントの終了<body>タグの直前でJavaScriptを参照してください。 詳細については、JavaScriptの読み込みの延期についてお読みください。

コンテンツ配信ネットワーク（CDN）を使用する

Webサイトの速度は、Webサーバーに対して、ユーザーの場所がどこにあるかによって大きく影響されます。 それらが遠くなるほど、送信されるデータが移動する距離が長くなります。 戦略的に配置された複数の地理的な場所にコンテンツをキャッシュしておくと、この問題に対処するのに役立ちます。 CDNを使用すると、多くの場合、運用コストが少し高くなりますが、速度のボーナスは確実に得られます。

Webキャッシングを最適化する

キャッシングシステムを使用することに加えて、可能な限りWebキャッシングを利用するWebサイトを作成する必要があります。 Webキャッシュは、後で使用するためにファイルがWebブラウザによってキャッシュされる場合です。 ブラウザがキャッシュできるものには、CSSファイル、JavaScriptファイル、画像などがあります。

複数のページで使用されるCSSおよびJavaScriptコードを外部ファイルに配置するなどの基本以外にも、ファイルを可能な限り最も効率的な方法でキャッシュしていることを確認する方法はたくさんあります。