モバイルユーザー向けにウェブサイトを最適化する方法

サイトがモバイル対応であることを確認しましたか?


Googleがモバイルファーストと呼ばれる新しいポリシーを導入したことをご存知ですか?だんだん Webユーザーはデスクトップコンピューターから離れています, 代わりに、モバイルデバイスを使用してブラウジングして買い物をします.

レスポンシブウェブデザインにより、すべてのプラットフォームで同じレベルのサイトを作成できるようになりました。しかし、それでも、レスポンシブデザインはモバイル向けのUX最適化戦略のほんの一部にすぎません.

真のパフォーマンス最適化が必要な場合は、他の選択肢も検討する必要があります.

これが、サイトの構築に非常に重点を置いている理由です モバイルファースト体験. 簡単に言うと、モバイルファーストとは、デザインとコンテンツがモバイルユーザー向けに最初に最適化されることを意味します.

そうは言っても、この投稿はまったく新しいサイトをデザインすることについてのものではありません。代わりに、モバイルファーストの基本的な設計原則をいくつか見ていきます。また、モバイルユーザーのユーザーエクスペリエンスを最適化するための技術に焦点を当てて時間を費やす.

#1:モバイルを念頭に置いた設計

Webは、主にデスクトップユーザーにサービスを提供するという原則に基づいて構築されています。実際のWeb、テクノロジーの実際の進歩は、美しいフルスクリーンディスプレイで表示するのが最適です。しかし、スマートフォンやその他のモバイルデバイスは重要であり、モバイルファーストデザインのコンセプトに適応し始める時が来ました.

常識的なレスポンシブデザイン以外に、モバイルファーストのWebデザインに実装する必要があるその他のデザイン要素?

  • 優先順位付け. モバイル画面は、利用可能な表示スペースに制限されています。また、モバイル画面は、デスクトップのはるかに広い(水平)構造とは対照的に、コンテンツを垂直に表示します。つまり、優先順位を使用して設計する必要があります。ユーザーが見る上で最も重要な要素はどれですか。 CTAボタンがある場合、モバイルユーザーに表示するのはどれほど簡単か?
  • 最初のコンテンツ。カラーセカンド. あなたはモバイルデザインでいくつかの面白いことをすることができますが、確かにデスクトップデザインの範囲ではありません。だから、まずコンテンツに道を譲る。コピーやその他のコンテンツ部分を読みやすく、アクセスしやすくします。モバイル画面は、視覚的要素をそらすことに対して寛容ではありません.
  • 簡単なナビゲーション. モバイルデバイスでは、どこをクリックしてもホームページに戻ることはできません。もちろん、事前にこのタイプのナビゲーションを計画している場合を除きます。そして、あなたはすべきです。 Scroll-to-Topウィジェットを試しますが、可能な限りシームレスなスティッキーヘッダーも試します.

これを正しく行っているかどうかを確認する最良の方法は、自分の電話を使用して(私はいつもそうしています)、サイトにアクセスすることです。物事がどのように感じ、一緒に流れるかを徹底的に調査する.

カフェに座っている場合や空港でのフライトを待っている場合は、誰かの肩をつついて、サイトの確認を丁寧に依頼してください。次に、座って彼らのフィードバックを聞いてください。ほとんどの場合、あなたは、人々があなたのウェブサイトのユーザー体験を知覚する方法に驚かれるでしょう.

#2:リソースの最適化。画像、アイコンなど.

UXではなく、個人的な好みでビジュアルを使用する頻度はどれくらいですか。それは確かに起こります、そしてあなたが創造的に行くつもりなら、メディア最適化がどのように機能するかを理解することはお金を払うことです.

写真、イラスト、アイコン、ビデオなどの視覚要素は ウェブページで最大の帯域幅の消費者.

2018年の平均ページ読み込み時間MachMetrics Speed Blogをどのように比較しますか2018年の平均ウェブページサイズ。業種別、国別.

全員が満たす必要のある設定されたWebページのサイズはありませんが、Webページのサイズが小さいほど、読み込み時間は速くなるというのが常識です.

では、ビジュアルコンテンツから余分なKBやMBを切り落とすにはどうすればよいでしょうか。?

  • 画像のサイズを変更する. 簡単に聞こえますか?ええと、1980 x 1200の画像をバックグラウンドでロードするためだけにモバイルサイトを閲覧した回数を数えることはできません。代わりに、必要に応じて、フルサイズの写真を代替リンクとして提供する必要があります。サイズを変更すると、必要なサイズに応じて、画像の合計サイズの最大80%を削減できます。ただし、モバイルデバイスの場合、せいぜい600〜700ピクセルの範囲を超える理由はありません。.
  • 圧縮でファイルサイズを縮小する. 画像の圧縮/最適化は、サードパーティのソフトウェアを使用して、画像に存在する色の数を減らすプロセスです。これは、写真が本来の品質を失うことなく、ファイルサイズを大幅に削減できる程度に行うことができます。画像の圧縮についてサポートが必要な場合は、画像圧縮ツールの包括的なまとめをご覧ください.
  • 別のファイル形式を探す. 誰もがPNGおよびJPEGファイル形式について聞いたことがある。結局のところ、これらはWeb上の事実上の画像標準です。そんなに長くない。デジタル画像配信の最新かつ最高の技術が中心に展開 WebP およびSVGファイル形式。たとえば、SVGは自動的に 画面サイズに合わせる, 特定のビジュアルコンポーネントを読み込むために必要なリソースの数を減らす.

モバイルファーストのユーザーエクスペリエンスの最適化は、注意を要するものです。衝動的に設計するということは、意思決定の長期的な影響を考慮しないことを意味します。マインドフルなアプローチは、モバイルユーザーを念頭に置いて構築するのに役立ちます.

洞察に満ちた: 直感的なモバイルデザインのコンセプトに沿って、モバイルデザインで同じビジュアルコンポーネントを再利用する必要はありません。いくつかの背景画像を削除し、それらをカラーの背景(モバイル上)に置き換えても、ユーザーエクスペリエンスに悪影響はありません。ごくわずかな帯域幅でも節約する方法を常に探してください.

#3:プリロードとレイジーロード

読むのにかなりの時間がかかるページにすべてのメディアリソースをロードする必要がありますか?また、ユーザーがアクセスする前に外部ページをレンダリングするのに役立ちますか?

まず、プリローダーを見てみましょう。 ブラウザのヒント.

プリローダーは、ページがブラウザーに潜在的なナビゲーションの機会を伝えるための方法です。例えば。ユーザーがページAからページBにアクセスする.

プリロードにより、ユーザーはページAのナビゲーションリンクをクリックする前にページBをレンダリングできます。.

プリロードディレクティブ

プリロードは常に機能するわけではなく、最終的な決定はブラウザ次第であることに注意してください。デバイスタイプや帯域幅などの要素は個別に評価されます.

最も一般的なプリローダーのタイプは何ですか?

  • プリフェッチ. このタイプは、特定のURLが次のナビゲーション選択になる可能性が最も高いことを示唆しています。また、ブラウザがリクエストを許可すると、重要なページリソースが自動的にキャッシュされ、次のページの読み込みがはるかに速くなります.
  • 事前レンダリング. 上記のタイプは特定のリソースのみをフェッチしますが、プリレンダーはページ全体をキャッシュします。レンダリングされたすべてのコンテンツはユーザーのデバイスメモリ内に保存されます.
  • DNSプリフェッチ. DNSプリフェッチは、指定されたDNSのみを解決します。その結果、ユーザーがサイトで特定の「方向転換」を行うと、基本的にナビゲートにかかる時間を節約できます。.
  • 事前接続. 上記と同じですが、TCP接続とTLS接続で接続とハンドシェイクも確立します.

プリローダーのコード例は何ですか?

プリローダーはダイナミックHTMLタグを使用するため、次のことができます。 Google Fontsなどのコンテンツをプリロード またはWordPressでJavaScriptアセットをプリロードするためのカスタムスクリプトを作成します.

ところで、WordPressを使用している場合 WPロケット あなたのサイトを強化するのに役立ちます.

プリローダーの詳細を理解したところで、もう1つの注目のトピックである遅延読み込みについて話しましょう。.

遅延読み込みとは?

ブログ投稿でも静的サイトでも、新しいWebページにアクセスすると、ブラウザーはページコンテンツ全体をフェッチし、そのコンテンツをネイティブのブラウジングエクスペリエンスとして提供します。ほとんどの場合、実際にはスクロールせずに見える範囲以外にページ全体をダウンロードする必要があります。.

一方、遅延読み込みでは、ブラウザはユーザーのビューポート内にのみあるコンテンツを読み込む(レンダリングする)ように指示されます。したがって、特定のページにサイズに敏感な写真やビデオが追加されている場合、それらのファイルは、ブラウザ画面がサイトのその部分に到達したときにのみ表示されます.

また、潜在的なSEOの問題が心配な場合は、心配しないでください。ヨーストはそれを確認しました Googleは遅延読み込みを使用するページをレンダリングします, そしてそれは単なる別のパフォーマンス向上のシグナルと見なします.

レイザーjs

ライブラリを使用するための私の推薦は Layzr.js —画像のシンプルで効果的な遅延読み込み!スクリプトもプロジェクトのホームページでアクティブ化されるため、リアルタイムで実行することがわかります。 WordPressユーザーは、公開プラグインリポジトリで数十の遅延読み込みプラグインを見つけることができます.

#4:Webキャッシング

Webキャッシュは、ページのバージョンをコピーするという概念に基づいており、いつでもユーザーに表示できます。ページは、Webサイトのページに初めてアクセスしたときにキャッシュされます。新しいユーザーがそのページにアクセスしようとすると、ライブバージョンを提供する代わりに、Webサーバーはキャッシュされたバージョンを表示します.

あらゆる種類のキャッシングの目標は、Webサイトのパフォーマンスを向上させ、必要なバックエンドリソースを減らすことです。キャッシングソリューションに応じて、カスタム間隔やその他のトリガーベースのイベントを構成できます.

ウェブキャッシング

Webキャッシングで最も人気のある名前には、Varnish、Squid、Memcachedなどがあります。しかし、特にWordPressユーザーであれば、市場には他にもたくさんのソリューションがあるので安心してください。.

CDNへのサインアップを検討することもできます.

CDN(コンテンツ配信ネットワーク)とは?

コンテンツ配信ネットワークは、分散サーバーのグローバルクラスターを使用して、驚くほど高速なコンテンツ配信を提供します。あ CDN ビデオ、写真、JavaScriptなど、Webで人気のあるすべてのコンテンツタイプをすばやく転送できます。最近では、ほとんどのWebトラフィックが何らかの形式のCDNを通過します.

コンテンツ配信ネットワークについて覚えておかなければならないことの1つは、需要の高いWebサイトで使用すると最も効果的に機能することです。したがって、月に数千人の訪問者にのみサービスを提供している場合、顕著な改善を確認することは難しいかもしれません。それにもかかわらず、CDNは、Webサイトの読み込み時間を改善し、帯域幅のコストを削減し、コンテンツの可用性を高め、全体的なセキュリティを強化するための優れたソリューションです。.

CDNの経験がない場合は、試してみることをお勧めします クラウドフレア —彼らは永久に自由な計画を提供し、学習を始めるのに最適なプラットフォームです。そして、Cloudflareがあなたの期待に応えられない場合は、市場で最高の無料CDNプロバイダーの投稿をチェックしてください.

#5:AMP(Accelerated Mobile Pages)

Googleの AMPプロジェクト ステロイドのモバイル最適化です!基本的に、AMPはページを最小限に抑えて超高速の読み込みエクスペリエンスを提供するだけでなく、コンテンツの読みやすさを優先します。ページ速度がいかに重要であるかを考えると、ほぼ瞬時の読み込み時間に対してノーと言う勇気を奮い起こすことができますか?

Google AMP(Accelerated Mobile Pages)

さて、これらすべての流行語は素晴らしい音ですが、AMPは実際にはどのように機能しますか?

AMPは、どのような種類のコンテンツを表示できるかについて一定の制限がある、素早いHTMLページです。これにより、ロード時間が大幅に短縮され、スクリプトの実行制限などにより、全体的なパフォーマンスが向上します。.

たとえば、JavaScriptはAMPでは機能しません。もちろん、あなたが使用しない限り GitHubで利用可能なAMP JSライブラリ. JSライブラリを使用すると、広告ブロッカーを回避するなど、特定の結果を得ることができますが、真のパフォーマンスが必要な場合は、生のAMPが適しています.

例によるAMP

WordPressユーザーの場合、ほとんどの場合、ブログへのAMPの追加はプラグインを使用して行われます。ただし、カスタムサイトで作業している場合、初めてAMPを追加するのは少し難しいかもしれません.

例でAMPを学ぶ

ここは 例によるAMP 重宝します。実際のプラットフォームへの副次的なプロジェクトであるこのサイトは、AMPで実現できるあらゆるフックとフックの詳細を説明しています。各コンポーネントとエフェクトにはデモが付属しているため、どのように見えるかを確認できます.

AMPの興味深いケーススタディ:

  1. TerraがAMPでモバイル視聴率を向上
  2. タイムズオブインドは1.5倍以上の収益を報告しています
  3. FastcommerceはAMPファーストを構築することでクライアントのコンバージョンを促進します

#6:コミットする前にテストする

この時代には、プロジェクトに個別のステージング環境を用意しないことの言い訳はありません。ほとんどのクラウドホスティングプラットフォームは、デフォルトでステージング環境を提供しているため、アクセスできるかどうかをプロバイダーに確認してください.

コミットする前にテストする

ステージング環境とは?

さて、これを説明する最も簡単な方法は、あなたの現在のライブウェブサイトを見ることです.

このサイトは、本番サイトと呼ばれるもので、サイトのベースとなっているすべてのコード、スクリプト、コンテンツのリアルタイムバージョンです。このコンテキストのステージング環境は、本番サイトのコピーです。よければダミーサイト。このステージング環境では、ライブサイトを壊すことなく、変更や新機能の追加を行うことができます.

私はいつもアシュリーハープの投稿を思い出します, 時間を無駄にしない–コミットする前に変更をテストする.

私たちが特定のことを回避するために私たち自身を「だます」方法を彼女がとるのは、私たちが間違いを犯したときに責任を取りたくない方法の典型的な例です。それにもかかわらず、アシュリーの投稿には、ローカルのステージング環境をセットアップするための便利なツールへのリンクも含まれています.

テストは思ったほど怖くない。しかし、プロダクションサーバーでデータベース全体を誤って削除してしまった場合は、恐ろしいことになります。!

おわりに

スムーズなモバイル体験のためにウェブサイトを最適化することはそれほど難しいことではありません。必要なのは少しの決断であり、この投稿で概説されている方法を喜んで適用します。コンテンツキャッシングやレイジーロードなどはすでにご存じでしょうが、ステージング環境やプリローダーはどうでしょうか。?

うまくいけば、この投稿はモバイルウェブサイトの最適化の現状に光を当てることができました。コメントを残すか、追加の解決策をお勧めします.

タグ:

  • SEO

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map