遅いサイトのパフォーマンス問題の修正

ZootopiaのDMVからこれらのナマケモノのXNUMXつのようにサイトが移動する場合、速度を落としている原因を修正できる方法がいくつかあります。 問題の原因を突き止めることは戦いの半分なので、原因を特定したら、少なくとも問題を解決するための答えが得られます。

低品質のホスティングが最も可能性の高い犯人です

Webホスティングに関しては、低品質の概念が他の状況でのそれと同じことを常に意味するわけではありません。 たとえば、ホスティングに支払う価格は、常に期待できる品質を正確に反映しているとは限りません。 サービスの人気やブランド名の知名度も同様です。

実際、あまりにも多くの人々がそれらを使用しているという理由だけで、最も人気のあるホスティングブランドのいくつかは最悪の選択です。 それは彼らのインフラの質に少し依存します。 彼らが彼らのテクノロジーに適切に投資しているなら、あなたは重大なパフォーマンスの問題を経験しないかもしれません。 一方、XNUMXつのサーバーを他の何百ものサイトと共有している場合、その問題はディスクストレージの容量が増加し続けるにつれて増大します。

したがって、そのような状況では、優れたテクノロジーを備えた、あまり知られていない小規模なWebホスティングサービスに切り替える方が適切な選択になる可能性があります。 これを行うと、巨大なものよりも高い品質レベルで、より個人的なカスタマーサービスを利用できるようになる場合もあります。 検討する価値はあります。新しいホストでXNUMXか月のサブスクリプションを購入し、既存のサイトに対するパフォーマンスをベンチマークするだけで、簡単にテストできます。

F12キーを使用する

ほとんどのWebブラウザーは、F12キーを介してデバッグコンソールにアクセスできるように調整されており、ご使用のブラウザーも例外ではありません。 例外について言えば、JavaScriptコードでエラーをスローし、パフォーマンスに影響を与えているエラー、つまり正確に言えば、それがほとんどです。

これらのエラーは、独自のコードとjQueryのようなインポートされたコードライブラリの両方で見つかります。 jQueryが大きく人気があるからといって、それが完璧であるとは限りません。 これがあなたが探しているものの例です:

青色のフラグが付いたエラーは単なるCSSエラーであり、スタイルシートを作成するときに開発者がシミングを行う必要があるため、通常、すべてのブラウザーで採用されている標準がXNUMXつもないため、これらのエラーが表示されます。 多くのアニメーションやトランジション効果を使用している場合を除き、通常はパフォーマンスに影響を与えません。

しかし、オレンジ色のフラグが付いたエラーはJavaScriptエラーであり、それだけでなく、この特定のエラーによってコードの実行が非常に遅くなることが具体的に示されているため、この場合はジャックポットです。

Googleから無料のアドバイスをもらいましょう

Googleがあなたのウェブページを無料で分析し、問題を修正するためのヒントを提供できることをご存知ですか? GoogleのPage Speed Insightsページにアクセスして、分析するページのURLを入力するだけです。

必ずしもすべてのアドバイスに忠実に従う必要はないかもしれませんが、それは本当に簡単なことではありません。 Googleのシステムは、ページの速度を低下させている原因を突き止めるのに優れていますが、修正によっては、発生する問題の多くを解決できない場合があります。

理想的には、85を超えるスコアを表示する必要があります。確かなことは誰にもわかりませんが、ページの読み込み時間は、Googleのページランクに大きな影響を与えると広く考えられています。 多くの主要なWebサイトでは素晴らしいスコアが得られないため、サイトがグリーンゾーンの最上部にない場合でも、絶望しないでください。

いくつかの注目すべき例は次のとおりです。

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

これらの例はどれも、実際に自分のサイトのパフォーマンスを低下させる言い訳にはなりませんが、遅いサイトが必ずしも失敗の代名詞であるとは限らないことを証明しています。

画像を正しく使用する

誰かが使用する正しい画像形式を知っているとしたら、それはいつデザイナーである必要がありますか? しかし、驚くべきことに、多くの人は知らないようです。あるいは、知っているときは、それは問題ではないと思います。 さてここにニュースがあります:それは常に重要です。

この問題は、特定のテンプレートスタイルがビジネスサイトのデファクトスタンダードとして採用されて以来勢いを増しており、減速の兆候を見せていない傾向です。 プロのデザイナーとして、あなたは怠惰なデザインショートカットの罠に陥らないように自分とクライアントに負っています。

これらの残念なショートカットのXNUMXつは、ページの上部(または他の場所ですが、通常はそこにあります)のヒーローユニットに大きなPNG画像を使用しています。 言うまでもなく、画像に透明なセクションが必要な場合でも、絶対にこれを行うべきではありません。

以下に、その傑作を作成するときに留意すべき基本事項を示します。

  • 大きな画像は使用しないでください。

画像が大きいほど、読み込みに時間がかかるため、大きい画像はひどい考えです。 大きな画像をはるかに効率的に機能させるために使用できるいくつかの異なるテクニックがありますが、それに入る前に、ほとんどの場合、小さな画像を使用し、大きな画像を保存する必要があるとしましょう。本当に必要です。

  • PPI / DPI値を適切に設定する

使用するグラフィックエディターによっては、DPIまたはPPIの値が表示される場合があります。 後者は、グラフィックエディタが印刷ではなくWebでの使用向けに設計されていることを示しているため、より優れています。 PhotoShopの一部のバージョンでDPIを変更する場合の問題は、DPIだけでなく、画像の物理的な寸法も調整されることです。 これは、PPIを使用する最新バージョンのPhotoShopでは問題ではないため、古いバージョンを使用している場合は、アップグレードする必要があります。 または、代わりにGIMPを使用してください。

  • 大きな画像をスライスする

ここから魔法が始まります。 同じ数のバイトをダウンロードしているため、イメージをスライスしてもロード時間は改善されず、知覚される改善は単に心理的なものであると多くの人が言うのを見つけます。 それらの人々は最も遅いバージョンの画像スライスを使用しているので、彼らは本当の可能性を知りません。

画像をスライスした後、それを最適化する機会があります。 元の画像がPNG形式であったとすると、不透明部分をJPG形式に変換し、多くのバイトを節約して、透明が必要な部分をPNG画像として残すことができます。

次に、スライスが完全に最適化されるまで、個々のスライスの圧縮レベルを試すことができます。 この最適化の全体的な効果により、元の最適化されていない画像と比較して50%以上の節約が可能になります。

ビデオも最適化できます

ビデオ圧縮の技術は、4つのことに依存しています。ターゲットフォーマットと、エンコードに使用するコーデックです。 どの形式を選択するかは、完全にニーズによって異なります。 一般に、高品質が必要な場合は、H.264エンコーディングのMPXNUMXが高圧縮で最高の品質を提供しますが、高品質が不要な場合、WebMおよびFLVはファイルサイズを小さくします。 ビデオ編集ソフトウェアはオプションとしてFLVを提供している可能性がありますが、この形式を使用することはお勧めしません。

DVD品質が必要な場合は、H.4エンコードを使用したMP264で優れた結果が得られますが、大量のダウンロードが必要になります。 ストリーミングビデオの場合、WebMははるかに優れた圧縮を提供します。 問題は、すべてのモバイルオペレーティングシステムがまだWebMをサポートしているわけではないことです(サポートするべきですが、モバイル開発者のゴールデンルールに従う必要があるという、おかしな理由があるように見えます。

MP4ビデオでH.264の代わりにMPEG-4コーデックを使用する必要がありますか? 同じ品質レベルでファイルサイズが大きくなるため、通常はそうではありません。 ただし、ビデオの物理的なサイズが小さくなり、ストリーミング用にビデオを完全に送信したい場合は、データの整合性を確保するためのエラー訂正が組み込まれているため、MPEG-4は優れたコーデックです。

WMVはどうですか? これは特別なケースです。 MP4とほぼ同じビデオ品質が得られますが、圧縮率はさらに高くなります。 ここでの欠点は、MacおよびiOSユーザーがペイウェアビデオコンバーターを使用している場合にのみビデオを表示できることです。これにより、再生の遅延が発生します。これは、ページの最適化で回避しようとしていたことです。

WMVファイルは、Android、Windows、またはLinuxユーザーには問題ありません。 しかし、インターネットコミュニティの12.5%がAppleデバイスを使用しているため、それらを不便にする価値があるかどうかを判断する必要があります。 個人的には、ロード時間を短縮するためだけに実行することはお勧めしません。

最後に、インターネットビデオであるため、フルスクリーンまたはシアターモードでの再生を許可しない場合は、ビデオの物理サイズをページに表示するサイズまで縮小し、保存できるバイト数を確認します。 。

ボグダン・ランセア

ボグダンはインスパイアードマグの創設メンバーであり、この期間でほぼ6年の経験を積んでいます。 余暇には、クラシック音楽を学び、視覚芸術を探索するのが好きです。 彼はフィクシーにもかなり夢中です。 彼はすでに5を所有しています。