- [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.

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

But this is a way you can run Lighthouse

しかし、これはLighthouseを実行するための方法です。

on any website, even if you don't have Chrome

Chromeをお持ちでない方でも、どのウェブサイトでも

and you get the same type of breakdown,

と、同じような故障が発生します。

same type of tips and everything else.

チップも何もかも同じタイプ。

One cool thing is the PageSpeed Insights screenshots

クールなのはPageSpeed Insightsのスクリーンショット

are not reliant on the browser window.

は、ブラウザのウィンドウに依存しない。

You may have noticed in my Lighthouse output here

こちらのライトハウスの出力でお気づきの方もいらっしゃるかと思いますが

that the screenshots are based

スクリーンショットがベースになっていること

on the size of my browser window,

をブラウザのウィンドウサイズに合わせました。

so right now, we're just getting the hamburger menu.

ということで、今はハンバーガーメニューが出るだけです。

Well, in PageSpeed Insights,

さて、PageSpeed Insightsでは。

you get the actual screens.

をクリックすると、実際の画面が表示されます。

You can see what's going on.

何が起こっているのかがわかる。

Another popular tool is the WebPageTest website.

また、WebPageTestというサイトも人気のツールです。

Again, here you just enter the website you want to test,

ここでも、テストしたいウェブサイトを入力するだけです。

and you get a report and return,

で、レポートとリターンを得る。

and you get a full breakdown of the waterfall,

をクリックすると、滝の全容がわかります。

you get different runs

さかさまになる

so you can run the same site against different browsers,

そのため、異なるブラウザに対して同じサイトを実行することができます。

different configurations, different locations

異なる構成、異なる場所

to see how it differs.

をクリックして、その違いを確認してください。

So the difference between run one and run two here

つまり、ここでのラン1とラン2の差は

is run one is the first load.

は、1が最初のロードを実行します。

Run two is the cached load,

ラン2がキャッシュロードです。

so the website is already being cached inside the system.

ということで、すでにシステム内にキャッシュされています。

And you get a ton of information.

そして、膨大な情報を得ることができるのです。

Regardless of what testing procedure you use,

どのような検査方法であっても。

browser tools, hosted third-party tools

ブラウザツール、ホスティングされたサードパーティツール

or something else,

などと言われることがあります。

the actual test results always include page speeds scores

実際のテスト結果には、常にページスピードのスコアが含まれています。

and other details.

などがあります。

They also show you key indicators,

また、重要な指標も表示されます。

describing the user experience,

ユーザーエクスペリエンスを表現しています。

most important of which are First Paint,

その中でも特に重要なのが「ファーストペイント」です。

the time it takes before the users sees changes happening

ユーザーが変化を確認するまでの時間

in the browser.

をブラウザで表示します。

Largest Contentful Paint,

最大のコンテントフルペイント

the time it takes before the user sees content,

ユーザーがコンテンツを見るまでにかかる時間。

so text, images, something else in the browser.

ということで、テキスト、画像、何か他のものをブラウザで表示します。

First Meaningful Paint,

初めての意味深な塗装。

the time it takes before the user sees content

ユーザーがコンテンツを見るまでにかかる時間

that is actually meaningful.

というのは、実は意味があることなのです。

So when above the full content

そのため、フルコンテンツの上では

and web fonts are loaded

とウェブフォントが読み込まれる

and the user can derive meaning from what they are seeing.

と、ユーザーが見ているものから意味を導き出すことができるのです。

And finally, Time to Interactive,

そして最後に、「Time to Interactive」。

the time it takes before the content has finished loading

コンテンツの読み込みが終了するまでの時間

and the UI can be interacted with,

とUIをインタラクティブに操作することができます。

so the user can actually click on buttons,

で、ユーザーが実際にボタンをクリックできるようにしました。

fill forms or do whatever else is going to happen on the site.

フォームに入力したり、サイト上で起こるあらゆることを行うことができます。

The longer it takes for a site to hit each of these points,

サイトがそれぞれのポイントにヒットするまでの時間が長いこと。

the higher the chance of the user either getting annoyed

というように、ユーザーをイライラさせる可能性が高くなります。

or abandoning the user experience all together.

またはユーザーエクスペリエンスを完全に放棄してしまいます。

As an example, I'm sure you've experienced visiting a site

例えば、皆さんはあるサイトにアクセスした経験があるかと思います。

on your computer or mobile device

パソコンや携帯端末で

and experiencing not being able

と、できないことを体験しています。

to click on a button or interact with an input field.

ボタンをクリックしたり、入力フィールドを操作したりすることです。

In that circumstance,

そのような状況の中で

you're still waiting for TTI or Time to Interactive,

TTIやTime to Interactiveをまだ待っているのですね。

and that wait can be extremely infuriating.

その待ち時間が非常に腹立たしいのです。

When it comes to reliable automated testing,

信頼性の高い自動テストになると

Lighthouse is currently the industry standard

現在、業界標準となっているLighthouse

and it's even integrated in other hosted solutions,

で、他のホスティングソリューションに統合されていることもあります。

like GTmetrix and PageSpeed Insights.

GTmetrixやPageSpeed Insightsのような。

Lighthouse also gives you other important feedback,

ライトハウスは、他にも重要なフィードバックを提供します。

like accessibility testing and recommendations

アクセシビリティ・テストと推奨事項のようなもの

on more performant JavaScript libraries and so on.

よりパフォーマンスの高いJavaScriptのライブラリなどで。

So for ongoing testing during development,

だから、開発中の継続的なテストのために。

Lighthouse is by far the quickest

ライトハウスは圧倒的に速い

and more reliable route.

と、より信頼性の高いルートを確保することができます。

(upbeat music)

(アップビート・ミュージック)