- [Morten] Most aspects of web performance

- Morten] ウェブパフォーマンスのほとんどの側面

can be measured in a consistent way

は一貫した方法で測定することができます

for comparison and analysis and iteration.

比較・分析・反復のために

There are a myriad of tools out there for this purpose,

そのためのツールは無数に存在します。

including tools built into your browser

ブラウザに組み込まれたツールも含む

and online tools you can use either for free

とオンラインツールを無料で利用することができます。

or for a fee.

または有償となります。

Different tools give you different types of feedback,

ツールによって、得られるフィードバックの種類は異なります。

and because they exist in different locations

と、それぞれ異なる場所に存在するため

on different stacks and provide different types of services,

は、異なるスタックで、異なるタイプのサービスを提供します。

they also give you slightly different results compared

また、比較すると微妙に異なる結果が得られます。

to one another.

を互いに交換する。

For this reason, the best practice

このため、ベストプラクティス

is to use several different performance monitoring tools,

は、複数の異なるパフォーマンスモニタリングツールを使用することです。

collect the data from all of them

全員からデータを集める

and then compare, contrast and analyze when possible.

を行い、可能であれば比較・対照・分析を行う。

These tools fall under two main categories:

これらのツールは、大きく2つに分類されます。

browser tools and hosted third-party tools.

ブラウザツールやホスティングされたサードパーティツールを使用します。

Let's look at the browser tools first.

まず、ブラウザツールを見てみましょう。

There are two main types of tools here.

ここでは、大きく分けて2種類のツールを用意しています。

The first one exists inside the Chrome browser.

1つ目は、Chromeブラウザの中に存在するものです。

If you open the Developer Tools for Chrome,

Chromeのデベロッパーツールを開いた場合。

and go to the far right-hand side

をクリックし、右端へ

of the Developer Tools,

デベロッパーツールの

there's a button called Lighthouse.

Lighthouseというボタンがあります。

This tool generates a performance report

本ツールはパフォーマンスレポートを作成します

for your site and it also gives you a long list

を表示することができます。

of suggestions on how to improve the performance

パフォーマンス向上のための提案の

of your site.

をご覧ください。

It also tests for other things,

また、それ以外のテストも行います。

Progressive Web Apps, best practices,

Progressive Web Apps、ベストプラクティス。

accessibility and SEO.

アクセシビリティとSEO

And you can choose whether you want

とか選べるんですよ。

to test on a mobile device or a desktop device.

をクリックすると、モバイルデバイスまたはデスクトップデバイスでテストできます。

If you choose mobile,

モバイルを選択した場合。

then the browser will mimic a mobile device,

とすると、ブラウザがモバイル端末を模倣することになります。

so small screen, slower load times and all that.

ということで、小さい画面、遅いロード時間、その他もろもろ。

So I'm going to generate a report

そこで、レポートを生成してみることにします

just to see what's going on on this site

どうしたものかと思いきや

that I'm running right now.

今走っている

This is a site that lives somewhere on the web

これは、ウェブのどこかに住んでいるサイトです

but you can also run Lighthouse on a locally hosted site

が、ローカルにホストされているサイトでもLighthouseを実行することができます。

on your computer if you want to.

をお使いのコンピューターにインストールすることもできます。

What I get in response here

ここでの回答で得たもの

is a performance score of 84.

はパフォーマンススコア84です。

This is good but not great.

これは良いことですが、素晴らしいことではありません。

Ideally, I want to get as close as possible to 100.

理想は100に限りなく近づけることです。

I want it to at least be in the green, so over 90.

せめてグリーンにしてほしいので、90点以上。

To fix that, I can now scroll down

それを解決するために、下にスクロールすることができるようになりました

and see what's slowing my site down.

で、何が私のサイトを遅くしているのかを見てください。

Well, first off, I can see there's some issues.

まあ、まず、問題があるのはわかります。

First Contentful Paint is too slow.

まずContentful Paintが遅すぎる。

Largest Contentful Paint is too slow

最大のContentful Paintは遅すぎる

and there's too much cumulative layout shift,

とか、累積レイアウトシフトが多すぎる。

meaning things are moving too much around

いってこい

as the page is loaded.

を、ページが読み込まれたときに表示します。

Scrolling further down,

さらに下にスクロールする。

we get a list here of opportunities, and diagnostics.

このリストには、チャンスと診断が表示されます。

So the opportunities here

だから、ここでのチャンスは

include eliminate render-blocking resources.

は、レンダーブロックを引き起こすリソースを排除することを含んでいます。

If I open that,

それを開けたら。

I can see the render-blocking resource in question

問題のレンダーブロッキングリソースが見える

is Google Fonts.

はGoogle Fontsです。

You can also see it says server images in next-gen formats.

また、次世代フォーマットでのサーバーイメージと書かれているのも確認できます。

And if we open up, it'll say image formats

そして、開くと、画像フォーマットと表示されます。

like JPEG 2000, JPEG XR,

JPEG 2000、JPEG XRのように。

and WebP often provide better compression

やWebPの方が圧縮率が高い場合が多い

than PNGs and JPEGs.

PNGやJPEGよりも

And finally at the bottom here,

そして、最後にこの一番下。

we have remove unused JavaScript.

未使用のJavaScriptを削除しています。

And that just means somewhere in the site,

そしてそれは、サイトのどこかを意味するだけです。

there's JavaScript being loaded that isn't being used,

使用されていないJavaScriptが読み込まれている。

which is a waste of resources.

というのは、資源の無駄遣いです。

So the Lighthouse report is really good

だから、ライトハウスのレポートは、本当に良い

at seeing at a glance where the performance enhancements

性能向上のポイントが一目瞭然です。

of your site can be.

のサイトができます。

It gives you good recommendations on what to do.

何をすべきか、良い提案をしてくれる。

If you want to dig further into exactly

さらに具体的に掘り下げたい場合は

what is going on in your site,

あなたのサイトでは何が起こっているのでしょうか。

you can also run the network monitor.

は、ネットワークモニターを実行することもできます。

You open the network monitor,

ネットワークモニターを開くと

make sure you click disable cache

キャッシュを無効にするをクリックしてください。

so that you are downloading the site from scratch

一からサイトをダウンロードすることになるため

and then you just reload the page.

で、ページを再読み込みするだけです。

What you get here is a waterfall

ここで得られるのは、滝

of every single resource

あらゆるリソースの

that's being downloaded from the site

サイトからダウンロードされている

and you can see right away

を見ると、すぐにわかります。

how it's been downloaded.

どのようにダウンロードされたのか

On this case, the site is running HTTP/2,

この場合、サイトはHTTP/2を実行しています。

meaning it's multiplexing and loading resources

リソースを多重化してロードしていることを意味します。

as fast as they become available.

を、いち早くお届けします。

And we can see here

そして、私たちはここを見ることができます。

that it takes quite a bit of time

結構な時間がかかること

for everything to load.

をクリックすると、すべてが読み込まれます。

For example, we have this file here called vendor.js.

例えば、ここにvendor.jsというファイルがあります。

Now, this is the file that Lighthouse said has a lot

さて、このファイルは、ライトハウスが、多くの

of unused code.

未使用のコードの

And we can see it takes quite a while to load,

そして、読み込みにかなり時間がかかることがわかります。

and there's a lot of execution going on here too.

と、こちらも実行に移すことが多いですね。

Further down, we have main.js.

さらにその下に、main.jsがあります。

If you hover over any of these,

どれかにカーソルを合わせると

you get a breakdown of how long it takes

所要時間の内訳を知ることができる

for queuing, how long it was stalled,

の場合、どれくらいの時間ストールしていたのか。

how long it took for the request to be sent

リクエスト送信に要した時間

and how much wait time happened before it came back,

と、どれくらいの待ち時間で戻ってきたのか。

how long it take to download.

ダウンロードにかかる時間

So here you see, for example,

そこで、例えばこんなものがあります。

it took 237.99 milliseconds

237.99ミリ秒を要した

between the request was sent to the server

リクエストがサーバーに送信されるまでの間

and the response came back.

と返事が返ってきた。

And then the actual download

そして、実際のダウンロード

was only 1.49 milliseconds.

はわずか1.49ミリ秒だった。

If we look at the top one here,

ここで一番上のものを見てみると

this is the HTML document,

これがHTML文書です。

you can also see there's a very slow start

出だしが非常に遅いこともわかります。

on the server.

をサーバーにインストールします。

So the server waited for 1.48 milliseconds

つまり、サーバーは1.48ミリ秒待ったわけです

before anything happened,

何も起こらないうちに

and then we waited 151 milliseconds

そして、151ミリ秒待ちました。

before the file actually got downloaded.

実際にファイルがダウンロードされる前に

So the total execution of this was 153.9 milliseconds,

つまり、これの総実行時間は153.9ミリ秒だったのです。

which is a very long time.

というのは、とても長い時間です。

That means that the server that it's running on

つまり、それが動作しているサーバーは

is not all that fast.

は、そんなに速いものではありません。

If you want to go even deeper

さらに深く知りたい方は

into what's going on,

を、どうなっているのか。

you can also go to the performance monitor.

をクリックすると、パフォーマンスモニターに移動することもできます。

Now, the performance monitor tells you

さて、パフォーマンス・モニターが教えてくれるのは

about how the scripts and everything else on the site

スクリプトをはじめ、サイト上のあらゆるものが、どのように

are actually performing

実際に行っている

but it's worth knowing about

が、知っておいて損はない

because it gives you a lot of details

詳細がわかるから

about what's going on in your site.

あなたのサイトで何が起こっているのかについて。

Again, to run it, you need to go over here,

もう一度言いますが、実行するには、こちらに移動する必要があります。

clear everything and then click on start profiling

すべてをクリアにしてから、プロファイリングの開始をクリックします。

and reload page.

をクリックし、ページを再読み込みしてください。

Now the page will be reloaded into the browser

これで、ページがブラウザに再読み込みされます

and the profiler starts.

をクリックすると、プロファイラが起動します。

Now, the profiler's a fairly advanced tool,

さて、プロファイラーというのはかなり高度なツールです。

and you can use it to do things

といったことができるようになります。

like profile existing behaviors,

既存の行動をプロファイルするようなものです。

so you can go in and mess around with the site

ということで、入ってサイトをいじることができます。

and then see what is happening.

をクリックして、何が起こっているのかを見てください。

But what you get here is now very detailed information

しかし、ここで得られるのは、今や非常に詳細な情報です。

about how the page is loaded

ページのロード方法について

and what kind of activity happens as it's loaded.

とか、読み込み時にどのような動作が起こるかとか。

So you can see, there's 20 milliseconds for loading,

つまり、ローディングに20ミリ秒かかっていることがわかります。

then 83 for scripting

その後、スクリプティング用83

and 38 for rendering and 12 for painting.

とレンダリングが38、ペイントが12です。

And you can see here in the breakdown exactly

そして、この内訳を見れば、まさに一目瞭然です。

when different things happen

ことあるごとに

and what is happening, and so on.

とか、何が起きているのか、などなど。

So there's a lot of information here.

だから、ここにはたくさんの情報が詰まっているんです。

Lighthouse exists in Chrome,

LighthouseはChromeに存在します。

network monitor and performance monitor exist

ネットワークモニタやパフォーマンスモニタが存在する

in all modern browsers, including Firefox,

をFirefoxを含むすべてのモダンブラウザで表示します。

Edge and so on.

エッジなど。

The second category of performance monitoring tools

パフォーマンスモニタリングツールの2番目のカテゴリー

is hosted third-party tools.

はサードパーティツールをホストしています。

The most used example here is PageSpeed Insights.

ここで最も利用されている例が、PageSpeed Insightsです。

Now, if we go to PageSpeed Insights,

さて、「PageSpeed Insights」にアクセスしてみると。

you'll notice, it looks exactly the same

同じように見えるはずです。

as Lighthouse, just that it's on the web.

ライトハウスと同じで、ウェブ上にあるというだけです。

That's because it is.

それは、そうだからです。

The difference is Lighthouse runs on your computer.

違いは、Lighthouseがパソコン上で動作することです。

PageSpeed Insights runs on some server

PageSpeed Insightsは、いくつかのサーバーで動作しています。

that Google has.

Googleが持っているもの。

So you get slightly different data

だから、微妙に違うデータが得られる

and you get slightly more reliable data

で、若干信頼性の高いデータを得ることができます。

because it's also compared to other data that they have.

というのも、他のデータとも比較されるからです。