時間の必要性はレスポンシブデザインではなく、レスポンシブパフォーマンスです

公開: 2016-04-28

レスポンシブデザインは、最近いくつかのパフォーマンスの問題を示しています。皮肉なことに、レスポンシブデザインは最新のスマートフォンでかなりうまく機能していますが、それ以上のことはありません。

ほとんどのWebユーザーはハイエンドのスマートフォンを持っているため、混乱する可能性があります。ただし、大勢の人がまだ古いバージョンのAndroidまたはiOSで実行されている小さな画面サイズのモバイルデバイスを使用しており、機能がほとんどないフィーチャーフォンにすぎない可能性があります。その結果、レスポンシブデザインは、想定されているように幅広いユーザーにサービスを提供していません。

レスポンシブデザインはあらゆる画面サイズのモバイルデバイス向けであるという長年の信念は、この問題と多くの関係があります。パフォーマンスが低下し、不満が高まっているため、レスポンシブデザインを超えて検討する必要があります。代わりに、応答性の高いパフォーマンスを確保することに焦点を当てる必要があります。この投稿はほぼ同じです。

だから、大きな問題は何をすべきかです？

デスクトップファーストの設計コンセプトを破棄する

この永続的な問題の重要な原因は、依然としてデスクトップファーストの設計アプローチに焦点が当てられていることです。デスクトップ用のWebサイトを設計してから、スマートフォンやタブレットなどの他のデバイス用に設計することに重点が置かれています。不足している機能については、開発者はシムとポリフィルを惜しみなく使用します。もちろん、迅速な開発を確実にするための膨大なライブラリがあります。ただし、これはブラウザの非互換性の問題には対処していません。望ましい結果が得られない設計コンセプトに従事することは正当化されますか？

モバイルファーストの設計アプローチを実装することはそれほど難しくありません。その目的は、デバイスを殺しているすべてのものではなく、意図した情報のみを画面上でモバイルユーザーに提供することです。 Luke Wroblewskiは、2011年に初めてこの設計アプローチを概念化し、それ以来、多くの業界専門家が彼の画期的な設計アプローチを称賛してきました。

ほんの一瞬でもデータが増えると、全体的な読み込み時間に大きな影響を与える可能性があります。ただし、グラフィックが豊富なコンテンツでWebサイトが重くなり、モバイルデバイスを使用して同じコンテンツにアクセスする人が増えていることも事実です。ユーザーが低解像度の画面を備えたモバイルでWebサイトのURLを入力するとき、彼の目的は常にWebサイトのコンテンツにアクセスすることですが、彼が経験するのは悪夢です。これは、無限の不要な広告を介してナビゲートするのが難しいためです。このような回避可能なコンテンツ要素を削除して、ユーザーがメインコンテンツにアクセスできるようにします。これにより、ハイエンドのスマートフォンを使用しているユーザーを除いて、多くのユーザーが低解像度のモバイルデバイスを介してWebサイトにアクセスするため、サイトのトラフィックが増加します。モバイルの機能が制限されている場合は、テキストのみのバージョンを提供することは完全に理にかなっていますが、繰り返しになりますが、ユーザーエクスペリエンスが損なわれると言うかもしれません。そうですね、コンテンツをまったく受け取らないよりはましです。少なくともそのような場合、ユーザーはあなたのサイトに関する基本的な情報にアクセスします。潜在的なリーチを減らすような方法でウェブサイトをデザインすることに意味はありますか？

ウェブサイトをチェックするためだけに延々と待つことは誰も興奮させないという事実をあなたは確かに受け入れるでしょう。 AkamaiとGomez.comによるいくつかの調査によると、Webユーザーの約50％は、Webサイトが2秒以内に読み込まれることを強く期待しています。わずか3秒以内にウェブサイトがブラウザに読み込まれなかった場合、サイトが放棄される可能性が高くなります。さらに、最近のほとんどのeコマースWebサイトには、Facebook、Google Plus、Twitter、LinkedInなどの多数のソーシャル共有ボタンがあります。これらのボタンがレスポンシブサイトに500KB以上を追加し、そのパフォーマンスに影響を与えることをご存知ですか？ Facebookの「いいね！」ボタンだけでも270KBの圧縮コードが必要です。また、複数のHTTPリクエストが必要です。代わりに、URLに基づいたソーシャル共有ボタンを使用してください。モバイル接続が高速であっても、そのような巨大なサイズはレスポンシブWebサイトの読み込み時間に必然的に影響します。

Webサイトのパフォーマンスはビジネスのパフォーマンスに直接影響し、応答の遅いWebサイトはビジネスに何の役にも立ちません。信じられないかもしれませんが、ほとんどのモバイルユーザーは、調査を行ったり、長い記事を読んだりすることに興味がありません。彼らのほとんどは、Facebook、WhatsApp、Twitterに簡単にアクセスしたり、オンラインショッピングの楽しさを楽しんだりするためにモバイルデバイスを使用しています。さらに、モバイルはもはやトレンドではなく、未来です。

昨年のComscoreの統計によると、米国のモバイル専用インターネットユーザーの数は急激に増加し、デスクトップのみのユーザーは10.6％に減少しています。

説得するためにもっと何か言う必要がありますか？

優雅な劣化を確実にする

ここ数年で、レスポンシブデザインの世界で新しい流行語に出くわしたかもしれませんが、それは「優雅な劣化」です。はい、グレースフルデグラデーションは、機能が正常に機能しなくても、許容できるユーザビリティを促進する方法で機能が失敗することを意味します。つまり、デスクトップ用のWebサイトのデザインを作成してから、タブレット、スマートフォン、フィーチャーフォンに徐々に移行していきます。ウェブサイトが優雅に劣化しているレスポンシブデザインのパフォーマンスは、ユーザーエクスペリエンスが常に一流であるため、高いものになるはずです。ウェブサイトはどんな欠点があっても機能し続け、訪問者は確かに全体的な品質に感銘を受けるでしょう。

さて、あなたはあなたの心の中にこの疑問を抱くかもしれません。それは、優雅な劣化について何がとても魅力的であるかということです。答えは簡単です。これは、ブラウザに関係なくコンテンツを表示および読み取り可能にするためです。これは驚くべき偉業です。幸い、CSS3を使用している場合、CSS3のほとんどのプロパティが自動的に劣化するため、優雅な劣化が簡単になります。つまり、丸みを帯びた角が正方形になり、テキストが1行で実行されるのではなく折り返され、グラデーションが単色になります。

優雅な劣化の例を見てみましょう。 JavaScript機能を使用してレスポンシブWebサイトを設計し、これらの機能がブラウザーでサポートされていないか、クライアント側で無効になっている可能性があるとします。では、コンテンツを取得するために何ができるでしょうか。そうですね、そのような場合、グレースフルデグラデーションにより、ブラウザは「noscript」タグ内のコンテンツを表示できます。

これは、以下のコーディングでよりよく理解できます。

[xhtml]
<noscript>
<h1>親愛なるジョン、あなたは問題に遭遇しました！</ h1>
<p>お使いのブラウザはJavaScriptをサポートしていないか、一時的に無効になっています。
ヘルプが必要な場合は、<ahref = "/ support / browsers /">ブラウザサポート</a>にアクセスしてください。</ p>
</ noscript>
[/ xhtml]

私が共有したいもう1つの優雅な劣化の例があります。それは、ビデオを再生するためのYouTubeによるHTML5の使用です。ブラウザがHTML5をサポートしておらず、ビデオはFlashを使用して表示され、Flashがインストールされていない場合でも、モバイルデバイスに同じものをインストールするようにというメッセージが表示されます。どちらの場合でも、あなたはビデオを見ることができるでしょう。ただし、この優雅な劣化の1つの欠点は、パフォーマンスは良好ですが、古いブラウザを使用している場合は、特定の設計要素に妥協する必要があることです。私はあなたのウェブサイトの本質的な視覚的要素を前もって決定することがトリックをすることができると思います。

未使用のライブラリを保持する必要はありません

ベストプラクティスの1つは、使用されていないライブラリを保持しないことです。はい、使用済みライブラリと未使用ライブラリを追跡するのは非常に時間がかかることは事実ですが、それは確かに価値があります。ライブラリを組み込んだ後、単一の機能のみを使用していることに気付く場合があります。それは時々2つか3つでさえありえます。レスポンシブデザインを作成するために私が使用する最も頻繁なツールはjQueryです。実際、開発者がレスポンシブWebサイトを作成するのに役立つjQueryライブラリはたくさんあります。いくつかのウィジェットが気に入ったという理由だけでJavaScriptライブラリのようないくつかのライブラリを含めると、ページの読み込み時間が大幅に長くなります。ただし、どのライブラリがどの程度使用されているかを分析することは適切な方法です。

機能の可用性を確認します

デバイスが特定の機能をサポートしているかどうかを確認してから、同じ機能をアクティブにすることができます。たとえば、古いAndroid携帯に最新バージョンのGoogle Chromeをインストールしても、Webサイトが表示されない場合があります。このようなWebサイトを読み込もうとすると、ブラウザがひどくクラッシュして、モバイルデバイス全体が応答しなくなることがあります。デバイスを再起動する必要がありますが、これが最後に望んでいたことではありませんか？特定のWebアプリケーションの多くのユーザーは、この問題のためにすでに苦しんでいます。

デバイスの機能が利用できないにもかかわらず、ウェブサイトやアプリケーションを設計していると、ブラウザの種類に関係なく、世界中のAndroidデバイスでGoogleハングアウトアプリがすぐにクラッシュするなど、いくつかの顕著な問題が発生しました。これは、アプリが軽量アプリであったにもかかわらずです。ユーザーが古いバージョンのAndroidスマートフォンを使用していたと主張するかもしれませんが、そのようなデバイスは、どのモバイルストアでも新品としてすぐに入手できることも事実です。多くのモバイルユーザーは、YouTubeやTwitterアプリでも同じパフォーマンスの問題に直面しています。 GooglePlayを介したGoogleのAndroidSystem Webviewサービスの更新でさえ、多くのスマートフォンをフリーズさせ、一種のユーザーの悪夢になります。

画像を最適化する

視覚的に魅力的な大きな画像を含めることは、デザイナーにとって常に魅力的です。これらの画像をCMSにアップロードする前に圧縮しないと、問題が発生します。これは、Web全体の複数のeコマースWebサイトに特に当てはまります。ラドウェアによる最近の調査によると、ページは大きくなっており、上位100の小売サイトの約45％が画像圧縮を行っていません。これにより、このようなサイトはかさばり、その結果、読み込み時間が長くなりますが、設計者としては問題を回避できます。

適切な画像最適化ツールを使用して、より小さなサイズの画像を作成します。実際、Web上にそのようなツールが不足することはありません。使用できる注目すべきものには、Dynamic Drive、Smush it、Riotがあります。 Photoshopのプロであれば、自分で画像サイズを最適化することもできます。スマート圧縮技術を使用して、冗長なメタデータからそれを取り除きます。グラフィックをPNGに、色が豊富な画像をJPEGに、アニメーション画像をGIFに変換することもできます。

極端な場合に対応

デザインを始めるとき、あなたはあなたがより簡単なページをデザインしたくなることに気づいたに違いありません。少なくとも、これにより、利害関係者に何かを示すことができます。これは一見良いように思えるかもしれませんが、最も困難なシナリオに向けて努力を集中すると、最初は良い結果が得られます。

たとえば、いくつかの記事、ブログ、プレスリリースを掲載したWebページ。タイトルも必要です。さて、あなたが「レスポンシブWebデザインのヒント」を表示しようと思ったタイトルスペースに、「レスポンシブWebサイトデザインを成功させるための10の重要なヒントとテクニック」というタイトルを表示する必要がある場合はどうなりますか？さて、これは極端なケースです。

レスポンシブウェブサイトのパフォーマンスを最適化するための上記のような取り組みは目に見えないようです。しかし、これらの努力は、満足して満足しているユーザーに良い利益をもたらします。レスポンシブウェブサイトの読み込み時間を簡単に監視できるPingdomツールなどのさまざまなツールを利用できます。レスポンシブウェブサイトが意図したとおりに機能していることを確認するために、テストの重要な側面をスキップしないでください。できるだけ多くの実際のデバイスでテストしてください。

複数の画面解像度でWebサイトをテストできるScreenflyなどのリソースを利用することもできます。これらすべての戦略にはかなりの時間が必要であると主張することができますが、その場合も、利益を享受するために一生懸命汗をかく必要があります。今日、Googleはパフォーマンスに基づいてサイトを評価しているため、レスポンシブパフォーマンスを備えたレスポンシブWebサイトを作成することが不可欠です。設計者または開発者の場合は、上記のベストプラクティスのいずれかに限定しないでください。あなたはより多くの解決策を探すべきであり、レスポンシブなパフォーマンスを示すウェブサイトを提供するために一生懸命にプッシュするかもしれません。