「Above the foldのコンテンツは1秒以下で表示させること」、モバイルサイトの高速化をGoogleが推奨
[対象: 中〜上級] モバイル向けサイト（スマートフォン向けサイト）の高速化に取り組むように、Googleは、ウェブマスター向け公式ブログであらためて推奨しました。 Official Google Webmaster Central Blog: Making smartphone sites load fast 速さが求められているのに現実は遅い いくつかのリサーチから次のような結果が出ています。 素早く使えて手軽なので、ユーザーはスマートフォンを使っている モバイル向けページは、平均して表示時間にたいてい7秒以上かかっている 表示に1秒以上かかると「時間がかかっている」とユーザーは感じ、遅いサイトには再訪問しないかもしれない “速い”モバイルサイトをユーザーは求めていますが、実際のモバイルサイトは“遅い”のが現状です。 そこで、モバイルサイト高速化のために知っておくべき基本的な知識と対応
スクロールせずに見える範囲のコンテンツのサイズを削減する | PageSpeed Insights | Google for Developers
スクロールせずに見える範囲のコンテンツのサイズを削減する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、ページをスクロールせずに見える範囲のコンテンツを表示するのに追加のネットワーク ラウンド トリップが必要なことを PageSpeed Insights が検出した場合にトリガーされます。 概要 リクエストされたデータの量が初期の輻輳ウィンドウ（通常は圧縮状態で 14.6 KB）を超える場合、サーバーとユーザーのブラウザとの間で追加のラウンド トリップが必要になります。モバイル ネットワークのような遅延の多いネットワークの場合、これによってページ読み込みが大幅に遅延する可能性があります。 推奨される解決方法 ページ読み込みを速くするため、スクロールせずに見えるページ範囲のコンテンツの表示に必要なデータ（HTML マークアップ、画像、CSS、
レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers
レンダリングを妨げる JavaScript を削除する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。 この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワーク ラウンド トリップが発生し、ページが最初に表示される
サーバーの応答時間を改善する | PageSpeed Insights | Google for Developers
サーバーの応答時間を改善する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、サーバーの応答時間が 200 ミリ秒以上であることを PageSpeed Insights が検出した場合にトリガーされます。 概要 サーバーの応答時間は、ページのレンダリングを開始するために必要な HTML をサーバーから読み込むのにかかる時間を測定したもので、Google とサーバーの間のネットワーク遅延が差し引かれます。測定を実行するたびに差異がありますが、違いはそれほど大きくはなりません。サーバーの応答時間が大きく変動する場合は、根底にパフォーマンスの問題がある可能性があります。 推奨される解決方法 サーバーの応答時間は 200 ミリ秒以下に抑える必要があります。 サーバーの応答が遅くなる要因としては、さまざまな理由が考えられます。たとえば、速度の遅いアプリ
リンク先ページでリダイレクトを使用しない | PageSpeed Insights | Google for Developers
リンク先ページでリダイレクトを使用しない コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、ある URL から最終的なリンク先ページまでの間にリダイレクトが複数あることを PageSpeed Insights が検出した場合にトリガーされます。 概要 リダイレクトは HTTP リクエストとレスポンスのサイクルを増加させ、ページの表示が遅くなる原因となります。最善の場合は、リダイレクトごとに追加されるラウンド トリップ（HTTP リクエストとレスポンス）は 1 回ですが、最悪の場合には、HTTP リクエストとレスポンスのサイクルの追加に加えて、DNS ルックアップ、TCP ハンドシェイク、TLS ネゴシエーションを実行するために複数回のラウンド トリップが追加されることがあります。そのため、サイトのパフォーマンスを改善するにはリダイレクトの使用を
リソース（HTML、CSS、JavaScript）を圧縮する | PageSpeed Insights | Google for Developers
リソース（HTML、CSS、JavaScript）を圧縮する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、リソースのサイズを圧縮によって削減できることを PageSpeed Insights が検出した場合にトリガーされます。 概要 圧縮（軽量化）とは、ブラウザによるリソースの処理に影響を与えることなく、不要なデータや重複データ（コードのコメントや書式など）の削除、使用されていないコードの削除、短い変数名や関数名の使用といった処理を行うことを指します。 詳しくは、前処理とコンテキスト固有の最適化をご覧ください。 推奨される解決方法 HTML、CSS、Javascript のリソースを圧縮します。 HTML の圧縮: HTMLMinifier をお試しください。 CSS の圧縮: CSSNano、csso をお試しください。 JavaScr
圧縮を有効にする | PageSpeed Insights | Google for Developers
このルールは、圧縮可能なリソースが gzip 圧縮されずに配信されていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 最新のブラウザはすべて gzip 圧縮に対応しており、すべての HTTP リクエストで自動的に圧縮のネゴシエーションを実施します。gzip 圧縮を有効にすると、転送されるレスポンスのサイズが最大で 90% 削減されるため、リソースのダウンロード時間の大幅な短縮、クライアントのデータ使用量の削減、最初のページ レンダリング時間の改善といった効果があります。 詳しくは、GZIP によるテキストの圧縮をご覧ください。 推奨される解決方法 ウェブサーバーで gzip 圧縮を有効にしてテストします。HTML5 Boilerplate プロジェクトには一般的なサーバーすべてに対応するサンプル構成ファイルが用意されており、各設定フラグと設定項目に
画像を最適化する | PageSpeed Insights | Google for Developers
このルールは、ページ上の画像を最適化して、視覚的な品質に大幅な影響を与えずにファイルサイズを削減できることを PageSpeed Insights が検出した場合にトリガーされます。 概要 画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。 推奨される解決方法 画像アセットの最適な形式と最適化方法を見つけるには、エンコードするデータの種類、画像形式の機能、画質の設定、解像度といった、さまざまな項目にわたる慎重な分析が必要です。また、画像をベクター形式で配信するのが最適かどうかや、必要と
ブラウザのキャッシュを活用する | PageSpeed Insights | Google for Developers
ブラウザのキャッシュを活用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、サーバーからのレスポンスにキャッシュ ヘッダーが含まれていないことや、リソースが短時間のみキャッシュされるよう指定されていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 ネットワークを介したリソースの取得は速度が遅く、コストもかかります。ダウンロードにはクライアントとサーバーの間で複数回のラウンド トリップが必要となることがあり、処理が遅延しページ コンテンツの表示が妨げられます。また、訪問者のデータ費用も増大します。クライアントが以前に取得したレスポンスを再利用してよいかどうかやその有効期限を判断できるよう、すべてのサーバー レスポンスにキャッシュ ポリシーを指定することをおすすめします。 推奨される解決方法 各リソース
レスポンシブ ウェブ デザインの基本 | Articles | web.dev
レスポンシブ ウェブ デザインの基本 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 モバイル デバイスを使用したウェブ ブラウジングは、天文学的なペースで増え続けています。こうしたデバイスはディスプレイ サイズに制約があることが多く、画面上でのコンテンツの配置方法について異なるアプローチが必要になります。 元々 Ethan Marcotte in A List Apart によって定義されたレスポンシブ ウェブ デザインは、ユーザーのニーズとユーザーが使用しているデバイスに対応します。レイアウトはデバイスのサイズと機能に応じて変わります。たとえば、スマートフォンではコンテンツが 1 列で表示されますが、タブレットでは同じコンテンツが 2 列で表示されます。 この動画では、利用可能な画面のスペースに合わせて、デザインが狭いビューポートから広いビューポートへ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PageSpeed Insights