ページのパフォーマンスを向上させるための4つのヒント

Feb 12, 2026

操作方法

Web-performance expert Henri Helvetica sitting with his laptop

Web Performance Analyst Henri Helvetica. あなたのサイトのパフォーマンスを向上させる方法についての彼のプロのヒントを共有するでしょう ニューヨークを生成します 2018。 今すぐあなたのチケットを入手してください 。

パフォーマンスは最終的にWebデザインと開発における会話の大きい部分になりつつあります。しかし、人々に実際には素晴らしいコンテンツを消費することが課題になることがあります。

幸いなことに、フリーランス開発者とWebパフォーマンスアナリストHenri Helvetica（Real Name Henri Brisard）は、あなたのサイトのパフォーマンスをスープアップする上のヒントを手に入れるために手にあります。

01.測定に努める

Helveticaは、まずあなたがあなたが測定することを確実にする必要があることを示唆しています。「あなたが測定していないものを改善することはできません」と彼は説明します。「あなたがあなたの測定値とデータを配置したら、測定する重要な要素を理解する必要があります。 9秒にロードする2つのページがある可能性がありますが、ビューポートがはるかに速くいっぱいになっている可能性があるため、ユーザーエクスペリエンスが向上します。

「あなたはあなたのサイトとあなたの商業企業のためのロードプロセスにおいて重要なことを測定しなければなりません。ユーザーが対話することが重要なのか考えてください。すべてのサイトにはそれぞれ個人のニーズがあります。」

彼がページのロードを見たら、特定のアイテムがロードされているのか、そしていつの履歴がどのように投入されるのか、そしていつの次のステップを拾うのに役立ちます。それは明らかな選択です、それはそこにあるのでそれは無料です - あなたはPageが遅いかもしれない理由を発見するために別のツールにジャンプする必要はありません。それでも多くの開発者はそれをほとんど使いません。 "DevToolsは煙探知機のような少しです" Helveticaが主張しています。「火がある場合、DevToolsはあなたに伝えます。それは少なくとも煙がある場所を見せます。」

02.ページの重みを失う

それからHelveticaは滝を見ます、それは資産のサイズやそれをロードするのに関わっている待ち時間などのさまざまな問題を示しています。たとえば、サイズが不十分な画像を含んでいる場合は、通常非常に長い滝が表示されます。これはすばやく拾うための簡単な痛みの点の1つです。画像は、遅いロードサイトの最大の累積の1つです - かなり簡単に固定できる問題。それらが最大のデータの原因として、画像も最大のデータ節約の原因です。

「私はいつもあなたのページの体重を考慮しようとします」とHelveticaは説明しています。「どのようにスライスしても、3MB、あるいは1MBの画像でさえ3つの画像でさえそれぞれ3つの画像を持っている場合は、ユーザーエクスペリエンスの課題がある可能性があります。

Web-performance expert Henri Helvetica coding on his laptop

セルラーネットワークが本当に予測されることができないので、そのページの重さもあなたのネットワークの犠牲になるでしょう。それであなたの資産が小さくてビューポートのために最適化されていることを確認したい、それはあなたが見ることができないことを意味しますモバイルデバイス上のデスクトップサイズの資産」

Helveticaは、遅延ロード、必要になるまでオブジェクトのロードを遅らせる技術も推奨します。「すべてのユーザーがページの下部にそれを作るのではない」と彼は警告します。「かなり頻繁には、見られない資産を負荷にすることができます。怠惰な負荷を採用することは、データやバッテリの排水やメモリ管理だけでなくデータを保存しているため、非常に有益になる予定です。画像をロードしていない場合は、デバイス上でUSURPにメモリを持つことはできません。」

03.あなたがどのように積み重ねるかを見てください

もう一つの理由Helveticaの好みのDevToolsは、最初のペイントのようなメトリック（ユーザーが最初のコンテンツの最初の画素を見るのにかかる時間）と最初の意味のあるペイントとのような測定基準を提供するためです（ページの主な内容が表示されるのにかかる時間）。）。

その後、サイトをレンダリングするブラウザのインクリメンタルスクリーンショットを表示するフィルムストリップ（DevToolsまたはPerformance Tool WebPageTest）があります。そのため、ロード時にページがどのように見えるかを確認できます。それらを調べることによって、どの資産がタイムラインの早い時期にそれらのいくつかをロードする方法を見つけ、それらのいくつかをロードする方法を調べることができます。

WebPagetestでは、どのHelveticaがその刺激的な詳細を称賛しています - あなたはまた負荷のビデオをエクスポートし、フィルムストリップを競合他社のそれと比較することもできます。「ドットを接続したら、これらの資産を迅速にすることで、ユーザーエクスペリエンスを向上させる方法を調べることができます」とHelveticaは説明します。

04.雑然とした

Helveticaは、設計上の決定がパフォーマンスにも影響を与え、ビューポートへの最初の負荷が理想的にはできるだけ迅速であるだけでなく、できるだけ雑然としない限りではありません。

そのためには、Webページの初期ビューをレンダリングするために行われる一連のイベントを理解する必要があります。 - クリティカルレンダリングパス。これらのイベントは、必要ではなく、Webフォントや画像フォーマットの選択を中心に決定することによって、資産の負荷資産を回避することによって最適化できます。

「SVGSをできるだけ複雑にしておくことを確認してください」とHelveticaは例として示唆しています。「あなたがSVGをレンダリングするとき、あなたはより少ないコードを持っています。私はこれを開発者からいつも聞いています。彼らはデザイナーからSVGを入手し、それがパフォーマンスに影響を与えるのでそれを送り返さなければならないでしょう。」

この記事はもともとネット303で、Webデザイナーや開発者向けの世界で最も売れている雑誌で掲載されました。購入 発行303 または ネットを購読する 。

あなたのサイトのスピードをスープアップすることにさらに洞察が欲しいですか？

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri HelveticaはAPIの話惑星を掲げています。パフォーマンスとアンプの物語。 2018年4月25日から27日までのユーザーエクスペリエンス

あなたがあなたのページが稲妻を速くロードすることを確実にすることに興味があるなら、あなたがあなたがのためのチケットをつかむことを確認してください ニューヨークを生成します 。 Henri Helveticaは、Webアプリケーションの測定に採用されており、実験的なユーザー経験を提供し、最初の塗料、意味のあるペンキ、および対話型の塗料などの測定値へのより多くの洞察を提供しています。

ニューヨークを生成する2018年4月25日から27日までに行われます。 今すぐあなたのチケットを入手してください 。

関連記事：

釘付けウェブパフォーマンスのための7つのエキスパートのヒント
Webパフォーマンスをテストするためのトップツール
Webパフォーマンスが早く感じる必要がある理由

ページのパフォーマンスを向上させるための4つのヒント

01.測定に努める

02.ページの重みを失う

03.あなたがどのように積み重ねるかを見てください

04.雑然とした

あなたのサイトのスピードをスープアップすることにさらに洞察が欲しいですか？

操作方法 - 最も人気のある記事

Framer Xを使用して対話型プロトタイプを構築する

5分以内に人をスキャンする方法

アフィニティデザイナー：ピクセルペルソナの使い方

欠陥のある組成を修正する方法

Slick UIアニメーションを作成する

物語を伝えるカラフルな世界を作る方法

GIFSからのもっと得る方法

彫刻と塗装済みの移動マップを組み合わせる方法

カテゴリ