単一ページデザインを打ち負かす4つのヒント – 視差パフォーマンスの問題

視差のパフォーマンスの問題
視差スクロールのウェブサイトは、正しく最適化されていない場合、パフォーマンスの悪夢になる可能性があります。

マーケティング担当者が会社のストーリーを伝えるクリーンで簡潔な方法を模索する中で、最近2つの新しいウェブサイトデザインが人気を集めています。 単一ページデザインは、1 つの Web ページを使用してサイトのすべてのコンテンツを表示する Web サイトです。 視差スクロールは何年もビデオゲームで行われてきましたが、ウェブページのスクロール機能の一部としてますます一般的になっています。 視差スクロールでは、異なる速度で移動するように見える複数の背景を使用して 3D 効果を作成します。 多くの場合、単一ページのデザインと視差スクロールが一緒に使用されます。

これらのデザイン手法を使用するサイトが人々に愛されている理由は簡単にわかります。 彼らは説得力があり、従うのは簡単です。 ただし、すべてのグラフィックスとテキストが 1 ページに表示され、これらのサイトではビデオが頻繁に使用されるため、正しく最適化されていないと、パフォーマンスが悪夢になる可能性もあります。

スロー ページ シンク サイト

ご存知のように、ページの読み込み時間と 対話時間 (TTI) は 、優れたユーザー エクスペリエンスを作成する際に追跡する重要なメトリックです。 最適なページ読み込み時間は 3 秒未満です。もはや、サイトは顧客と売上を失うリスクがあります。 (ウェブサイトの読み込み速度はどのくらいですか? ここでテストしてください。 しかし、Radwareの最近の「一般教書」調査が示すように、ウェブサイトはこの業界標準を満たす良い仕事をしていません。 実際、ページの読み込み時間は 遅くなっています

創造性のもう一つの側面

Web デザイナーはクリエイティブですが、Web パフォーマンスにどう対処するかを考えてクリエイティブにする必要があります。 単一ページデザインと視差スクロールのウェブサイトを作成する際に留意する3つのヒントを次に示します。

  1. ネットワークの影響 (DNS の検索、待機時間、統合されたネットワーク対話) は、地理やサード パーティのホストされた要素の使用に基づいて、大きな影響を及ぼし、増大する影響を持つことに注意してください。
  2. JavaScript と Flash を HTML や CSS と共に利用して、読み込み時間を大幅に増やすことなく、より多くのコンテンツをページに収めます。
  3. 遅延読み込みを使用して、すぐにユーザーに表示されるコンテンツだけを読み込みます。 ユーザーがそのコンテンツに関わっている間に、ユーザーが中断や待機時間に耐えられないように、他のコンテンツを読み込みます。 レイジーロードのテクニックは、プラグインを使用してJavaScriptを使用して、あなたのウェブサイトにハードコードすることができます。
  4. ウェブサイトのパフォーマンスを向上させるために、Web サイトのパフォーマンスツールを使用 して、Web サイトのパフォーマンスを定期的にテストし、Web サイトのパフォーマンスの変更がユーザー エクスペリエンスに影響を与えないことを確認します。

これらの新しいWebデザイン技術を使用する際に、美学とパフォーマンスを念頭に置くウェブサイト開発者は、ページの読み込み速度とTTIのユーザーの期待に応える美しいサイトの報酬を得るでしょう。

Latest Web Performance Articles​

トップ25サーバー監視ツール

この記事では、Dotcom-Monitorの独自のソリューションから始めて、Webサイトの稼働時間を監視し、ユーザーに最高のエクスペリエンスを提供するのに役立つ上位25のサーバー監視ツールの専門家を紹介します。 サーバー監視が監視戦略の重要な部分である理由について説明します。

トップ20の合成監視ツール

合成モニタリングにより、チームは考えられるあらゆる視点からWebサイトとWebアプリケーションのパフォーマンスを24時間監視および測定し、問題が実際のユーザーに影響を与え始める前にアラートを受信できます。 ここでは、合成監視ツールのトップピックを紹介します。

Start Dotcom-Monitor for free today​

No Credit Card Required