このガイドは、社会保障局のDavid Fernによって作成されました

JavaScriptの使用法、CSSの使用法、画像とリソースサイジング、キャッシュ/ネットワークの使用法、ポップアップによって作成されました。 これらは、最も訪問された政府のウェブサイトは、よりモバイルフレンドリーであるために焦点を当てるべきトップの慣行です。 しかし、あなたのウェブサイトがモバイルユーザーを喜ばせ、戻ってくるようにするために、これらの各分野でどのように働くことができますか?

2017年9月22日から2018年3月22日までの半年間、連邦政府のクラウドソースモバイルテストプログラムは、7つのモバイル向け自動テストツールを使 その結果、これらのサイトは、ユーザーがモバイルエクスペリエンスで期待したり望んだりするほどモバイルに適していない一般的な慣行であることが示されました。 これらの領域のほとんどは、ユーザビリティの問題に直接関係していませんが、代わりに、サイトがどのように構築されているかに関係しています(パフォーマ テストの実施方法の詳細については、最後の方法論のセクションを参照してください。

ここでの情報は、これらのサイトで見つかった上位5つの慣行を概説しています:

  • JavaScriptの配置
  • JavaScript Minify
  • インラインJavaScriptを使用しない
  • CSSの最適化
    • CSSディレクティブの絶対寸法と位置を避ける
    • 外部スタイルシートを使用してCSSのキャッ5453>
    • 画像の最適化
      • ページサイズと重量の制限
      • リソース圧縮の有効化
      • 画像の最適化
      • 画像の寸法の指定
    • キャッシュの活用
      • ブラウザキャッシュの活用
      • 複数のファイルを組み合わせてパフォーマンスを向上させる
    • ポップアップを避ける
    • コンテンツ管理システム(CMS)または開発フレームワークを使用してウェブサイトを開発している場合、これらの設定のすべてが設定可能ではないことに注意してください。 ただし、開発者はシステムの機能を調査して、可能かどうかを判断することをお勧めします。 これらの推奨事項のいくつかは、プログラムコードとは別のwebサーバー層で発生する可能性があります。

      Javascriptの最適化

      最も一般的な問題はJavaScriptの使用です。 JavaScriptは、webページの機能を拡張し、学習して使用するのが比較的簡単な言語であり、クライアント側で比較的迅速に実行されるため、多くのデスクトップ ただし、JavaScriptがコード内の最適な場所から配置および実行されず、最小化されず、インラインで使用されない場合、従来は最小限のリソースを持つモバイルデバ

      JavaScriptの配置

      問題-ページマークアップの最後にJavaScriptをグループ化することは、ページの読み込みに最適です。 HTTP仕様でJavaScriptがページの他の場所(例えば上部)に配置されている場合、JavaScriptファイルのダウンロード中にロードブロックが発生する可能性があります。 さらに、ブラウザがページをレンダリングする前に、HTMLマークアップを解析してDOMツリーを構築する必要があります。 パーサーは、スクリプトを検出するたびに、解析を続行する前にスクリプトを停止して実行します。 これにより、ページの読み込みのパフォーマンスが低下します。

      解決策-スクリプトを<head>タグに入れ、asyncまたはdefer属性を使用すると、ブラウザをブロックせずにスクリプトをできるだけ早くダウンロードできます。

      async属性を持つスクリプトは非同期で実行されます。 これは、スクリプトがダウンロードされるとすぐに実行され、その間にブラウザをブロックすることなく実行され、最初のスクリプトの前に2番目のスク

      defer属性を持つスクリプトは、順番に実行されます(つまり、最初のスクリプト1、次にスクリプト2)。 これはまた、ブラウザをブロックしません。 asyncスクリプトとは異なり、deferスクリプトはドキュメント全体が読み込まれた後にのみ実行されます。

      • Fixit-JavaScriptの配置| https://mobiforge.com/design-development/fixit-javascript-placement
      • レンダーブロッキングJavaScriptを削除します。| https://developers.google.com/speed/docs/insights/BlockingJS
      • 上記の倍の内容のサイズを小さくします| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
      • HTMLマークアップに<script>タグをどこに置くべきですか? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

      JavaScript Minify

      問題-JavaScriptファイルは、移動時間を短縮し、ページの読み込みを高速化するために常に最小化する必要があります。

      ソリューション-Minificationは、ブラウザによるリソースの処理方法に影響を与えることなく、不要なデータや冗長なデータを削除します。 サイトの開発に使用される統合開発環境(IDE)ツールには、ビルドプロセス中にJavaScriptを縮小する機能が含まれている場合があります。 また、クロージャコンパイラ、あなたのコードを書き換え、それが速くダウンロードするためにデッドスペースを最小限に抑えるオプティマイザを含むGoogleのクロージャーツールでこれを行うことができます。 開発環境でのトラブルシューティングやデバッグは、縮小されていないJavaScriptを使用すると簡単になるため、本番環境でのみ縮小するのが一般的です。

      • リソースの縮小(HTML、CSS、JavaScript)) | https://developers.google.com/speed/docs/insights/MinifyResources
      • あなたのウェブサイトを縮小する方法CSS、HTML&JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

      インラインJavaScript

      を使用しない問題-インラインJavaScriptコードは、処理が遅くなるJavaScriptコードマークアップをブラウザに渡す必要があるため、使用しないでください。

      ソリューション-すべてのJavaScriptコードを単一の縮小されたファイルに移動すると、マークアップ、スタイル、コードがきれいに分離されます。 これは、ApacheおよびNginx webサーバーで「インラインJavaScript」フィルタを有効にすることによっても実現できます。

      • Fixit-インラインJavaScript| https://mobiforge.com/design-development/fixit-inline-javascript
      • インラインJavaScript| https://modpagespeed.com/doc/filter-js-inline
      • なぜインラインCSSとJavaScriptコードが悪いのですか| https://dzone.com/articles/why-inline-css-and-javascript-

      リソース:

      • ジャバスクリプト: 長所と短所http://www.jscripters.com/javascript-advantages-and-disadvantages/

      Cssの最適化

      Cascading Style Sheets(CSS)は、HTML要素を画面上にどのように表示するかを記述し、多くの作業を節約し、複数のwebページのレイアウトを同時に制御できます。

      ただし、CSSディレクティブの絶対寸法と位置が指定されている場合、外部スタイルシートを使用してCSSのキャッシュをコンテンツから分離しない場合、CSSイメージアセットがスプライトファイルに結合されない場合、および/またはページごとに複数のH1タグがある場合、CSSはアプリケーションの読み込み時間を増加させる可能性があります。

      CSSディレクティブの絶対寸法と位置を避ける

      問題-CSSディレクティブのピクセルと絶対寸法と位置は、ブラウザがすべてのデバイスタイプでコンテン ただし、このルールには例外があります。 たとえば、特定のディスプレイに合わせて画像を調整する場合は、ピクセル単位で寸法を指定する方が理にかなっています。 さらに、余白、枠線、およびパディングには、ピクセルメジャーが適切な場合があります。

      ソリューション–次のような相対的な尺度を使用しますem, ex, bolder, larger, 可能であればthickとします。 たとえば、フォントを指定する場合は、font-size: 12pxの代わりにfont-size: 1.5emを使用します。

      • | https://mobiforge.com/design-development/fixit-measures

      外部スタイルシートを使用してCSSのキャッシュを

      のコンテンツから分離する–外部スタイルシートを使用してCSS命令をHTMLから分離する必要があります。 WebブラウザによるこのCSSキャッシュは、サーバーへの別の旅行を回避し、ページの読み込みを高速化します。

      解決策–HTMLの<head>セクションで、languageを使用してCSSファイルを外部から呼び出し、CSS命令をHTMLとは別のファイルに保持します(以下を参照)。

    <link rel="stylesheet" type="text/css" href="https://mysite.com/main.css" media="screen" title="style (screen)" />

    注意:多くの外部CSSスタイルシートを使用すると、パフォーマンスに悪影響を与える可能性があるため、単一の外部CSSに結合する必要があります。

    • 内部CSSと外部CSS| http://infoheap.com/internal-vs-external-css/
    • CSS配信の最適化| https://varvy.com/pagespeed/optimize-css-delivery.html

    CSSイメージアセットをスプライトファイルに結合する

    問題-多くのイメージが独立して使用される場合、それぞれをダウンロードするには複数のネットワー CSSスプライトは、複数の画像を単一の画像ファイルに結合して、webサイトで使用して、配信と読み込み時間を短縮します。 ファイルは、CSSを使用してカットアップすることができます。

    ソリューション-Compass、Lemonade、SpriteMe、Fireworks CS6、TexturePackerなど、スプライトシートを作成するための多くのツールを見つけることができます。

    • Fixit-画像スプリント| https://mobiforge.com/design-development/fixit-image-sprites
    • CSSスプライト:それらが何であるか、なぜ彼らはクールだ、とどのようにそれらを使用するには| https://css-tricks.com/css-sprites/
    • CSSスプライトシート:ベストプラクティス、ツール、有用なアプリケーシ| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    リソース

    • CSSとは何ですか? | https://www.w3schools.com/css/css_intro.asp

    画像の最適化

    “webの重力”とも呼ばれるページの重みは、ロード時間を増やし、ネットワークデータの使用量を減らすことによって、アプリケーションのパフォーマ ページの重さ、リソースの圧縮、画像の最適化、および画像の寸法を理解することは、web戦略を成功させるために重要です。

    ページサイズと重量の制限

    問題-依存ファイルを含むページの合計ファイルサイズが、ロード時間とモバイルクローラが評価するのにかかる時間に影響 モバイル検索エンジンは、これらのページをランク付けすることを好むでしょう。 すべてのモバイルページのファイルサイズを25kb以下に保つように努めてくださ これは、ダウンロードされたすべての要素に対してiPhoneがキャッシュする最大ファイルサイズです。

    ソリューション-画像の最適化、gzip圧縮、縮小、キャッシュ、JavaScript、CSSの統合など、ページの重さを減らす方法はたくさんあります。 その他の解決策には、埋め込みとインクルード、JavaScriptとCSSフレームワーク、カスタムフォント、不要なページの混乱を回避することが含まれます。 最善の解決策は、あなたのサイトの詳細に依存します。

    • Fixit-ページサイズ制限| https://mobiforge.com/design-development/fixit-page-size-limit
    • ページの重さを理解する| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • ページの重量を減らす| https://mobiforge.com/design-development/reducing-page-weight

    リソース圧縮を有効にする

    問題-gzipまたはDeflateを使用してリソースを圧縮すると、ネットワーク経由で送信されるバイト数を減らすことができます。

    解決策-ほとんどのサーバーはgzip圧縮を使用するように設定できます。 たとえば、.htaccess設定ファイルを使用して、Apacheサーバーでgzip圧縮を有効にできます。 また、mod_gzipを使用してgzip圧縮を有効にし、mod_deflateを使用してサーバーからの出力を訪問者に送信する前に圧縮することもできます。 サイトがWindowsサーバーでホストされている場合は、IIS(インターネットインフォメーションサービス)マネージャーで”静的圧縮を有効にする”を選択することで、静的

    • 圧縮を有効にする| https://developers.google.com/speed/docs/insights/EnableCompression
    • gzip圧縮を有効にする| https://varvy.com/pagespeed/enable-compression.html
    • gzip圧縮を有効にする方法| https://www.giftofspeed.com/enable-gzip-compression/

    画像の最適化

    問題-ページ上の画像は、視覚的な品質に大きな影響を与えることなく、ファイルサイズを小さくするように最適化する必要があります。 画像の書式設定と圧縮は、多くのバイトのデータを保存できます。

    ソリューション-画像圧縮アプリを使用して、画像のファイルサイズを簡単に縮小できます。 これらのツールは、追加のカラープロファイルやメタデータなど、画像ファイル内の非表示のデータを削除します、写真が撮影された場所の地理位置情報)、それは必要ありません。 彼らは、任意の画質を失うことなく、ファイルのサイズを小さくするための迅速かつ簡単な方法を提供します。 画像圧縮ツールには、TinyJPG、Compressor.ioこのアプリは、あなたの写真を保存することができますShop Softbank Shop Softbank Shop Softbank Shop Softbank Shop Softbank Shop Shop Shopifyアプリ。

    • | https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit-画像クランチ| https://mobiforge.com/design-development/fixit-image-crunch
    • Web用の画像の最適化: 実用的なガイド| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • WordPressウェブサイト用に画像を最適化する方法| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    画像の寸法を指定する

    問題-画像の寸法は常に含まれている必要があり、画像は実行時にリサンプリングされるべきではありません。 マークアップ内から画像を参照する場合は、ブラウザの表示寸法を一覧表示する必要があります。 すべての画像に幅と高さを指定すると、不要なリフローや再描画の必要性を排除することにより、より高速なレンダリングが可能になります。

    ソリューション-img要素を使用するときにwidthおよびheight属性を含めて、画像の幅と高さを指定します(下記参照)。

    <img src="images/clown.jpg" width="50" height="50" />

    含まれているドキュメントに寸法が指定されていない場合、または指定された寸法が実際の画像の寸法と一致しない場合、ブラウザは画像がダウン リフローを防ぐには、HTMLの<img>タグまたはCSSですべての画像の幅と高さを指定します。

    • Fixit–画像サイズを指定する| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • 画像の寸法を指定する| https://gtmetrix.com/specify-image-dimensions.html

    キャッシングの活用

    アプリケーションがリソースを要求して処理する回数を減らすと、ロード時間が改善され、ネットワークデータの使用量が削減されま これを行うには、ローカルキャッシュまたは外部スクリプトとオブジェクトの使用を最小限に抑える方法があります。

    ブラウザキャッシュの活用

    問題-ネットワーク経由でリソースを取得することは遅く、コストがかかり、ダウンロードにはクライアントとサーバー間の複数 これにより、訪問者のデータコストも発生する可能性があります。 すべてのサーバー応答は、クライアントが以前に取得した応答を再利用できるかどうかといつ再利用できるかを判断するのに役立つキャッシ

    ソリューション-キャッシュを使用するようにリソースのリクエストヘッダーを変更して、ブラウザキャッシ Webホスト/サーバー上の.htaccess設定ファイルにコードを追加するか、基本的なCache-ControlHTTPヘッダーを使用することができます(下記参照)。

    Cache-Control: max-age=2592000, public
    • ブラウザキャッシュを活用する| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • Fixit-キャッシング| https://mobiforge.com/design-development/fixit-caching
    • ブラウザキャッシュを活用する| https://varvy.com/pagespeed/leverage-browser-caching.html
    • 何ですか。htaccess? | http://www.htaccess-guide.com/
    • キャッシュ制御| https://varvy.com/pagespeed/cache-control.html

    パフォーマンスを向上させるために複数のファイルを結合する

    問題-ページにダウンロードされたすべての外部オブジェクトには、別々のドメインネームサー これは高速接続の従来のコンピュータでは大きな問題ではありませんが、遅いモバイルネットワークでは待ち時間が発生する可能性があります。 これにより、アプリケーションのパフォーマンスとロード時間が損なわれます。

    ソリューション-サイトに必要なリソースの数とサイズを削減します。 ただし、それが不可能な場合は、すべての外部CSSファイルを1つのスタイルシートに結合するか、すべてのJavaScriptファイルを1つの大きなファイルに結合して、ブラウザへの呼び出し回数を減らします。

    • モバイルWebアプリケーションのベストプラクティス-外部リソースの最小化| https://varvy.com/pagespeed/cache-control.html
    • WordPressサイトを高速化するためにHTTP要求を減らす方法| https://yoast.com/reduce-http-requests-wordpress/
    • ページの読み込み時間を改善するための簡単な手順| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    ポップアップを避ける

    デスクトップアプリケーションでは、ポップアップの使用が必ずしも悪いとは限りません。 ただし、アプリケーションがレスポンシブデザインを使用している場合、またはモバイルアプリケーションで使用されている場合、ポップアッ 彼らは、ポップアップにページから離れてユーザーの注意を引くと、初心者のユーザーはすぐに混乱し、イライラになります。

    ポップアップ

    問題-ポップアップウィンドウは多くのモバイルデバイスでサポートされておらず、それらを使用すると予測できない結果になる可能性があります

    解決策-ライトボックス、インライン展開、固定バナー広告など、ウィンドウ全体を占有せずに表示されるポップアップには多くの代替手段があります。

    • Fixit–ポップアップウィンドウ| https://mobiforge.com/design-development/fixit-pop-windows
    • モバイルポップアップの死とあなたが代わりに何ができるか| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Googleは侵入型モバイルポップアップを取り締まっている:ここでは、マーケティング担当者が知っておく必要があ| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • ポップアップの最良の選択肢はどれですか? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 ダイアログデザインのための必須UXルール| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 ポップアップ広告をホバーするので、侵入の代替ではありません| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    この研究のための私たちの方法論

    私たちは、この研究を実施するために、以下の手順を使用しました:

    1. デジタル分析プログラム(DAP)統計を使用して、モバイルデバイスがアクセスした米国連邦政府の上位26のウェブサイトの名前を取得しました。
    2. モバイルに優しい自動テストツールを使用して、各サイトをテストしました:
      • グーグルモバイルフレンドリーなテスト| https://www.google.com/webmasters/tools/mobile-friendly/
      • 携帯お灸| https://www.mobilemoxie.com/tools/site_analysis/
      • モビレディ| http://ready.mobi/
      • ページの洞察| https://developers.google.com/speed/pagespeed/insights/
      • W3Cモバイルチェッカー| https://validator.w3.org/mobile/
      • Varvy SEOツール| https://varvy.com/
      • Gtmetrix- https://gtmetrix.com/
    3. 各ツールによって報告された失敗した基準を見た後、結果を単一のMicrosoft Excelスプレッドシートにコンパイルしました。
    4. 15以上のサイトで見つかった問題を、このガイドで説明する五つのカテゴリにグループ化しました。

    Articles

    コメントを残す

    メールアドレスが公開されることはありません。