モバイルデザイン
ページ速度101：モバイルUIデザイナーの基盤
知ってますか 40％の人 ロードに3秒以上かかる場合、Webページを離れますか？レスポンシブウェブデザインが普及するにつれて、インターネットユーザーは並外れたパフォーマンスを期待するようになりました。彼らは、使用しているデバイスに合わせてサイトを完全に調整し、簡単なナビゲーションと直感的なデザインを求め、ページの読み込み速度を1秒未満に抑えたいと考えています。これは打撃の高い基準ですが、適切な最適化が行われていれば、どのデザイナーもモバイルインターフェイスに高速のページ速度を与えることができます。
私は最近Webをスキャンし、さまざまなプラットフォームでWebサイトの速度を最適化するための最新のヒントとコツをすべて探しました。これが私のページ速度ハックの完全なリストです：
1.画像のサイズを変更する
必要以上に大きい画像は、サイトの速度を低下させるのに役立つ場合があります。単にフルサイズの画像をアップロードしてウェブサイトに適切なサイズに縮小させるのではなく、正しいサイズから始めてください。のようなシンプルなソフトウェア スカッシュ画像圧縮 画像をページの正確なサイズにサイズ変更し、ファイルサイズを数秒で縮小するために使用できます。
2.機能の制限
モバイルサイトで制限付き読み込みを有効にすると、モバイルデバイスで効果的に使用できないデスクトップサイトの一部がまったく読み込まれなくなります。これにより、ページの読み込みを大幅に高速化しながら、ユーザーエクスペリエンスを向上させることができます。したがって、モバイルデバイス用にサイトを最適化するときは、Webサイトで無効にできる機能を検討してください。サイドバーや広告など、すべて無効にすることができます。モバイルの場合、最も重要な機能に焦点を当てます。
3.コンテンツを減らす
多くの場合、パフォーマンスバジェットを設定することをお勧めします。新しい画像、動画、プラグインを追加するとパフォーマンス予算を超える場合は、ページが最大の読み込み速度を維持できるように、削除または最適化できる他のコンテンツを探してください。
4.HTTPリクエストを制限する
これを実現する方法はたくさんありますが、間違ったアプローチをとると、サイトの品質が低下する可能性があります。秘訣は、行き過ぎずにHTTPリクエストを減らすことです。データURIの代わりにCSSスプライトを使用したり、CSSスタイルシートをすべてのページの上部に保持したりするなどの変更を加えることができます。キャッシュも有効にする必要がありますが、後で有効にします。
5.レスポンシブデザインを選択する
レスポンシブデザイン それらはあなたのサイト訪問者によって当然と思われるものです。これにより、訪問者が使用している画面サイズに合わせてコンテンツを調整し、さまざまなデバイスのデザインを最適化できます。レスポンシブデザインテンプレートを使用すると、[デザイン]をさまざまなプラットフォームで不適切に機能させる（https://www.toptal.com/designers/ui）よりも、コードがクリーンになり、読み込み速度が向上します。
6.優れたCDNを使用する
コンテンツ配信ネットワーク（CDN）は、Webサイトの中心です。高速で信頼性が高い必要があります。 CDNがその約束を果たしていることを確認してください。
7.サーバーの応答時間を短縮する
目標は、サーバーの応答時間を200ミリ秒未満で取得することです。このリストの他のすべてのヒントは、この数を減らすのに役立つはずです。無料の応答チェックツールをいくつでも使用して、応答時間を監視し、潜在的な問題を探すことができます。これらのツールはすべて、簡単なGoogle検索で見つけることができます。
8.すべてを圧縮します
Webページを圧縮することは、それらをzipファイルに圧縮するようなものです。圧縮により、ページの帯域幅を減らすことができ、HTTPリクエストの数を減らすことができます。これを行う最も簡単な方法は、 Gzip 。
9.ブラウザのキャッシュを有効にする
キャッシュは、サイト訪問者が自分のデバイスでサイトを「記憶」するための方法です。初めてアクセスするときは、サイトを表示するために最大30個のコンポーネントをダウンロードする必要があります。キャッシュが有効になると、その数はその後のアクセスでいくつかのコンポーネントに減少し、ページの読み込み速度が劇的に向上します。
10.視覚的な改善
これはページの読み込み速度の高速化にはつながりませんが、そうなっているような印象を与えます。 FacebookとMediumは、スピンローダー（否定的に認識される可能性があります）を表示する代わりに、視覚的なプレースホルダーコンテンツを作成することで、これをうまく処理します。
Mediumは画像でそれを行います。
Facebookは、アップロードスピナーを表示する代わりに、偽のプレースホルダーコンテンツをアップロードします。
11.リソースを整理する
Webサイトに意味のあるものを追加しないコードはすべて削除する必要があります。余分なコードは、サイトをロードするための余分な時間を意味します。 HTMLコードを最小化するには、 Google PageSpeed InsightsAPI拡張機能 。 CSSを最小化するには、 YUIコンプレッサー または[cssmin.js]（http://www.phpied.com/cssmin-js/）。 JavaScriptの使用を最小限に抑えるには、 クロージャーコンパイラ 、 JSMin または YUIコンプレッサー 。
12.画像に適切なフォーマットを設定します
画像を正しいサイズにするだけでなく、画像が正しい形式であることを確認する必要もあります。 JPEGが最適で、PNGも使用できます。また、GIFは、小さくてシンプルなグラフィック、理想的には10x10ピクセル未満にのみ使用する必要があります。
13.画像を適切にエンコードする
コードの場合、画像のHTMLはのようになり、ファイル名は引用符で囲まれている必要があります。画像が正しくエンコードされていない場合、サイトは正しい画像を取得するためにさらに努力する必要があり、ページの速度が低下します。
14.外部CSSを使用する
CSSには、サイトのスタイル要件が含まれています。外部ファイルまたはオンラインに含めることができます。インラインCSSはすべてのページのHTMLコードに挿入されるため、深刻な遅延が発生する可能性があります。代わりに外部CSSを使用すると、コードが大幅に簡素化されます。
15.スクロールせずに見える範囲（スクロールせずに見える範囲）よりもコンテンツを優先する
訪問者がスクロールせずに表示するランディングページの部分は、古いコンテンツと呼ばれます。これは古い新聞用語ですが、ウェブサイトにも当てはまります 設計 。読み込みよりもサイトコンテンツを優先して読み込みを速くすると、訪問者をサイトに長くとどめることができます。これを行う1つの方法は、CSSを2つの部分に分割することです。つまり、上記の2つのコンテンツ用のインライン部分と、その他すべて用の外側部分です。
16.プラグインを削除します
プラグインの数が多すぎると、サーバーの速度が低下し、不要なセキュリティ問題が発生する可能性があります。使用していないプラグインを取り除き、プラグインを1つずつ無効にして、特定のプラグインが読み込み速度に大きな問題を引き起こしていないかどうかを確認してください。
17.Redireccionesを減らす
サイトがリダイレクトに依存してユーザーをメインサイトからモバイルサイトに誘導する場合、Webサイトの速度が低下する可能性があります。 HTTPリダイレクトを使用して、メインサイトからモバイルサイトへの中間リダイレクトを減らすことができます。デスクトップページにマークアップを含めて、Googleクローラーがモバイルページを検出できるようにすることもできます。
18.ポップアップを避ける
ポップアップは今でも人気があり、多くのサイトでポップアップが使用されているので、ポップアップは機能すると思います。あなたはまだあなたのウェブサイトにそれらを埋め込むことができますが、モバイルサイトではそれらはうまく機能しません。モバイルデバイスで記事を読んでいるときにポップアップが表示されたことはありますか？それがあなたに起こったなら、あなたはおそらく私が何を意味するか知っているでしょう。
代替手段は何ですか？のブログのように、ブログまたはページの下部にある変換ボックスを使用します ニール・パテル ：
19.弾むDOM要素を取り除く
DOMはDocumentObjectModelの略です。これは、サイトがさまざまなデバイスで表示される方法を指します。モバイルデバイスでは、デスクトップのホームページに表示される一部のアイテムが非表示になりますが、モバイルブラウザはそれらのアイテムを非表示にするのに時間と労力を要します。これらの隠された要素を取り除くことは、各プラットフォームでのページの読み込み速度に役立ちます。
ページ速度の重要性
ページの速度にあまり注意を払ったことがない場合は、腰を落ち着けて注意してください。サイトの読み込みに時間がかかりすぎると、コンテンツやデザインに費やす時間とエネルギーはまったく無駄になります。
実際には、 アバディーングループ ページの読み込み時間がわずか1秒遅れると、ページビューが11％少なくなり（直帰率が高くなります）、顧客満足度が16％低くなり、顧客コンバージョンが7％減少することがわかりました。サイトの読み込みに3秒以上かかると、損失が大幅に悪化します。
このリストが圧倒的であると感じたり、技術的なスキルを少し上回っている場合は、最初から始めるとよいでしょう。 Googleの推奨事項とツール 。ここでは、ページの速度をテストするための基本情報と無料のリソースを入手できます。グーグルはあなたのサイトがどんな問題を扱っているかを正確に教えてくれるので、あなたはあなたのサイトの最適化の努力に集中することができます。
あなたが遭遇するすべてのページ速度の問題に対する簡単な解決策を見つけることができるように、グーグルに向かう前にこのリストをブックマークすることを忘れないでください。
SharePointを使用している企業の数
