PageSpeed Insights_html/css_WEB-ITnose

PageSpeed Insights は、モバイルおよびデスクトップ デバイス上の Web ページのパフォーマンスとユーザー エクスペリエンス (UX) をテストするための優れたツールです。

ユーザー エクスペリエンスの側面は非常に興味深いもので、これは以前は利用できなかった機能です。たとえば、モバイル デバイスでタッチ領域が小さすぎる、または他のタッチ領域に近すぎるなど、ページ内の領域を改善する必要があるか、または隣接する要素間の間隔を広げる必要があるかを指摘できます。 [問題の解決策] をクリックして、問題の原因となっているリソースまたは要素を確認します。さらにその横にある「スクリーンショットを表示」をクリックすると、問題の正確な場所が表示されます。

パフォーマンスの観点から、ページ上のどの特定の画像をさらに最適化できるか、またどの CSS と JavaScript を圧縮できるかについて説明します。パフォーマンス ルールの最後 (パッケージ化された zip ファイル) で、「このページに最適化された画像、JavaScript、および CSS アセットをダウンロード」することもできます。もちろん、ページに何らかの調整を加えるたびに、ここに来て最適化されたリソースを再ダウンロードする必要はありません。代わりに、自動化されたビルド プロセスに最適化を組み込む必要があります。

前のページでは、PageSpeed Insights のいくつかの検出ルールのみを紹介しました。現在サポートされている完全なルールはすべて学習する価値のあるベスト プラクティスです。

ユーザー エクスペリエンス ルール:

• 読みやすいフォント サイズを使用する
• ビューポート サイズに合わせてコンテンツのサイズを変更する
• クリック数を適切に調整する ターゲット サイズ
• アプリのインストール インタースティシャルの使用を避ける
• プラグインの使用を避ける
• ビューポートの構成

パフォーマンス ルール:

• CSS 配信の最適化
• 画像の最適化
• ブラウザーのキャッシュの提案
• CSS サイズの削減
• HTML サイズの削減
• JavaScript コンテンツのサイズの削減
• 圧縮を有効にする
• 表示コンテンツを優先する
• サーバーの応答時間を最適化する
• ランディング ページのリダイレクトを回避する

毎日の使用と自動テスト

PageSpeed Insights は非常に多くの利点を提供し、これまで気づかなかった問題を発見するのに役立ちます。そのため、PageSpeed Insights を使用して Web サイトを時々チェックする必要があります。

「私のページは頻繁に変更されるので、それを自動的に検出できればいいのに。」はい、PageSpeed Insights は REST API をサポートしており、プログラムを通じて自動的に実行して検出結果を取得できます。使用方法は他の Google API と同様です。詳細については、こちらを参照してください。

注: PageSpeed Insights は現在、オンラインまたは API の使用のみをサポートしており、Chrome および Firefox プラグインはサポートされなくなりました。

パフォーマンスの向上

Web ページのパフォーマンスの問題の改善には、主に、構築ツールの使用、ページ構造、サーバー側の 3 つの側面が関係します。以下のビデオでさらに詳しい説明があります:

最後に、サーバー側の PageSpeed モジュールを紹介します。これは、Web サーバー上の Web サイトを自動的に最適化するためのオープンソース モジュールであり、Apache と Nginx をサポートしています。

著者：韓国カイ。このシリーズの記事は、Addy と Matt のビデオ シリーズ Totally Tooling Tips の内容に基づいて再構成されたもので、主に (フロントエンド) 開発者が好むいくつかのツールやテクニックを紹介しています。

投稿閲覧数: 2

特に明記されていない限り、この記事の内容はクリエイティブ コモンズ表示 3.0 ライセンスに基づいてライセンスされており、コード サンプルは Apache 2.0 ライセンスに基づいてライセンスされています。詳細については、利用規約をご覧ください。